Привет
Как сделать что-бы при добавлении нового элемента в определённый контейнер этот элемент был виден сразу, на данный момент пользователь должен прокрутить что-бы его увидеть.
Код такой.
<html>
<head>
<style>
html, body{
margin: 0px;
border: 0px;
padding: 0px;
}
div#container
{
margin: 0px;
color:white;
background-color: #465e2d;
height:100%;
vertical-align:bottom;
}
.chat-user{
width: 120px;
background-color: black;
}
.chat-message{
background-color: lightcoral;
font-size: 12px;
padding: 2px;
}
.chat-time{
width: 150px;
background-color: green;
text-align: right;
}
.chat-time > p {
text-align: right;
margin: 2px;
}
.container-x { flow:horizontal; border-spacing:2px; padding:2px; }
.container-x > div { margin:0; height:1*; }
</style>
<script type="text/tiscript">
function ScrollMessageToBottom(){
return 10;
}
</script>
</head>
<body>
<div id="container">
<div class="container-x">
<div class="chat-user">Maceo Jourdan And Burgen</div>
<div class="chat-message">This is a single row layout. All static child elements of flow:horizontal container are replaced horizontally one by one, forming a single row. Layout is performed with respect to the direction attribute of the container.
In the horizontal direction, width, left and right margins, borders and paddings of contained elements, when given in flex units, participate in free space distribution. All immediate children of the flow:horizontal container are competing for free space available between the left and right sides of the container's content box. Thus, this free space is distributed among them, proportionally to corresponding flex values.
In the vertical direction: flex values of height, top and bottom margins, borders and paddings of contained elements are computed against the height of the container. This makes it possible to align elements of the flow:horizontal container not only horizontally, but also vertically.
All children have the same height with this style:</div>
<div class="chat-time"><p>12/12/2012 08:34</p></div>
</div>
</div>
</body>
</html>
Пытаюсь сделать что-то типа списка сообщений в Skype. Новое сообщение показывается внизу и сразу видно в случае когда перед этим был виден последний элемент.
Использую HtmlLayout.
Спасибо
Здравствуйте, ShaggyOwl, Вы писали:
SO>Здравствуйте, Holms, Вы писали:
H>>Как сделать что-бы при добавлении нового элемента в определённый контейнер этот элемент был виден сразу, на данный момент пользователь должен прокрутить что-бы его увидеть.
SO>ЕМНИП ScrollToView/scroll_to_view()
так я и пробовал
public partial class Form1 : Form
{
private readonly HtmlView _htmlControl;
private string _rootPath;
public Form1()
{
InitializeComponent();
SuspendLayout();
_htmlControl = new HtmlView();
_htmlControl.Parent = panel1;
_htmlControl.Dock = DockStyle.Fill;
panel1.Controls.Add(_htmlControl);
//_htmlControl.Html = "<H1 style='color: red; padding:10px;'>Test</h1>";
ResumeLayout(false);
_rootPath = Path.GetDirectoryName(Assembly.GetExecutingAssembly().Location);
}
private void Form1_Load(object sender, EventArgs e)
{
Uri uri = new Uri(Path.Combine(_rootPath, "conv.html"));
_htmlControl.BaseUrl = new Uri(Path.GetDirectoryName(uri.LocalPath) + Path.DirectorySeparatorChar);
_htmlControl.LoadHtml(uri);
}
private void button1_Click(object sender, EventArgs e)
{
using (HtmlTag root = _htmlControl.RootTag)
{
using (HtmlTag container = root.SelectFirst("div#container"))
{
string row = File.ReadAllText(Path.Combine(_rootPath,"row.html"));
container.AppendHtml(row.Replace("<%%TIMESTAMP%%>", DateTime.Now.ToString()));
container.SelectLast("div.container-x").ScrollToView(HtmlScrollBehavior.ToTop);
}
}
}
}
не работает правильно.
Что я делаю не так?
conv.html
<html>
<head>
<style>
html, body{
margin: 0px;
border: 0px;
padding: 0px;
}
div#container
{
margin: 0px;
color:white;
background-color: #465e2d;
height:100%;
vertical-align:bottom;
}
.chat-user{
width: 120px;
background-color: black;
}
.chat-message{
background-color: lightcoral;
font-size: 12px;
padding: 2px;
}
.chat-time{
width: 150px;
background-color: green;
text-align: right;
}
.chat-time > p {
text-align: right;
margin: 2px;
}
.container-x { flow:horizontal; border-spacing:2px; padding:2px; }
.container-x > div { margin:0; height:1*; }
</style>
<script type="text/tiscript">
function ScrollMessageToBottom(){
return 10;
}
</script>
</head>
<body>
<div id="container">
<div class="container-x">
<div class="chat-user">Maceo Jourdan And Burgen</div>
<div class="chat-message">This is a single row layout. All static child elements of flow:horizontal container are replaced horizontally one by one, forming a single row. Layout is performed with respect to the direction attribute of the container.
In the horizontal direction, width, left and right margins, borders and paddings of contained elements, when given in flex units, participate in free space distribution. All immediate children of the flow:horizontal container are competing for free space available between the left and right sides of the container's content box. Thus, this free space is distributed among them, proportionally to corresponding flex values.
In the vertical direction: flex values of height, top and bottom margins, borders and paddings of contained elements are computed against the height of the container. This makes it possible to align elements of the flow:horizontal container not only horizontally, but also vertically.
All children have the same height with this style:</div>
<div class="chat-time"><p>12/12/2012 08:34</p></div>
</div>
</div>
</body>
</html>
row.html
<div class="container-x">
<div class="chat-user">Maceo Jourdan And Burgen</div>
<div class="chat-message">This is a single row layout. All static child elements of flow:horizontal container are replaced horizontally one by one, forming a single row. Layout is performed with respect to the direction attribute of the container.
In the horizontal direction, width, left and right margins, borders and paddings of contained elements, when given in flex units, participate in free space distribution. All immediate children of the flow:horizontal container are competing for free space available between the left and right sides of the container's content box. Thus, this free space is distributed among them, proportionally to corresponding flex values.
In the vertical direction: flex values of height, top and bottom margins, borders and paddings of contained elements are computed against the height of the container. This makes it possible to align elements of the flow:horizontal container not only horizontally, but also vertically.
All children have the same height with this style:</div>
<div class="chat-time"><p><%%TIMESTAMP%%></p></div>
</div>
Здравствуйте, Holms, Вы писали:
H>Привет
H>Как сделать что-бы при добавлении нового элемента в определённый контейнер этот элемент был виден сразу, на данный момент пользователь должен прокрутить что-бы его увидеть.
H>Код такой.
Я немного изменил твой пример чтобы он запускался в Sciter для теста (ниже).
Проблем с такими стилями не вижу на самом деле.
В твоем случае попробуй вставить view.update(); (HTMLayoutUpdateWindow() в твоем случае ) между append и scroll:
container.append( rowhtml );
view.update(); // <<---
container.last.scrollToView();
Пример
<html>
<head>
<style>
html, body{
margin: 0px;
border: 0px;
padding: 0px;
}
div#container
{
margin: 0px;
color:white;
background-color: #465e2d;
width:*;
height:*;
overflow:auto;
flow:vertical;
vertical-align:bottom;
}
.chat-user{
width: 120px;
background-color: black;
}
.chat-message{
background-color: lightcoral;
font-size: 12px;
padding: 2px;
}
.chat-time{
width: 150px;
background-color: green;
text-align: right;
}
.chat-time > p {
text-align: right;
margin: 2px;
}
.container-x { flow:horizontal; border-spacing:2px; padding:2px; }
.container-x > div { margin:0; height:1*; }
</style>
<script type="text/html" #row1>
<div class="container-x">
<div class="chat-user">Maceo Jourdan And Burgen</div>
<div class="chat-message">This is a single row layout. All static child elements of flow:horizontal container are replaced horizontally one by one, forming a single row. Layout is performed with respect to the direction attribute of the container.
In the horizontal direction, width, left and right margins, borders and paddings of contained elements, when given in flex units, participate in free space distribution. All immediate children of the flow:horizontal container are competing for free space available between the left and right sides of the container's content box. Thus, this free space is distributed among them, proportionally to corresponding flex values.
In the vertical direction: flex values of height, top and bottom margins, borders and paddings of contained elements are computed against the height of the container. This makes it possible to align elements of the flow:horizontal container not only horizontally, but also vertically.
All children have the same height with this style:</div>
<div class="chat-time"><p><%%TIMESTAMP%%></p></div>
</div>
</script>
<script type="text/tiscript">
$(button#add1).onClick = function() {
var container = $(#container);
container.append( $(#row1).text );
container.last.scrollToView();
}
</script>
</head>
<body>
<button #add1>Add row</button>
<div id="container">
</div>
</body>
</html>
