 |
|
|
| How do I use an HTMLBox with the IsWindowLess property set to true? |
|
|
I am trying to avoid the scrolling of an HTMLBox (I will do my own scrolling inside the HTML). Searching these forums, the solution seems to be to set the IsWindowLess property to true. When I do this, it does not display the HTML properly. Why?
Steps to reproduce:
1. Create a new Visual WebGUI Application.
2. Create a new folder named "Resources".
3. On the form, drop an HTMLBox (it will be named htmlBox1).
4. This should be your Form_Load event:
private void Form1_Load(object sender, EventArgs e)
{
string TheFileName = HttpContext.Current.Server.MapPath(@"~/Resources/test.html");
string TheCode = null;
using (System.IO.StreamReader sr = new System.IO.StreamReader(TheFileName))
{
while (sr.Peek() != -1)
{
string xLine = sr.ReadLine();
int xLength = xLine.Length;
if (xLength <= 0)
{
continue;
}
TheCode = TheCode + xLine + " ";
}
}
htmlBox1.Html = TheCode;
}
5. In the Resources folder, create a file called test.html. Put this html inside it:
<html>
<head>
<!--<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<style>
div.divHeader {overflow:hidden;width:2453px;}
div.tableHeader {width:100px;max-width:100px;height:20px;max-height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background-color:#ECE9D8;}
div.tableHeaderExtra {width:1px;max-width:1px;height:20px;max-height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background-color:#ECE9D8;}
div.TheFirstColumn {width:200px;max-width:200px;height:20px;max-height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background-color:#ECE9D8;}
</style>
<table cellspacing="0" cellpadding="0" border="0" >
<tr>
<td id="firstTd">
<table cellspacing="0" cellpadding="0" border="1" >
<tr><td><div class="TheFirstColumn">Agent</div></td></tr>
</table>
</td>
<td>
<div class="divHeader" id="divHeader">
<table cellspacing="0" cellpadding="0" border="1" >
<tr>
<td><div class="tableHeaderExtra"></div></td>
<td><div class="tableHeader">12:00</div></td>
<td><div class="tableHeader">1:00</div></td>
<td><div class="tableHeader">2:00</div></td>
<td><div class="tableHeader">3:00</div></td>
<td><div class="tableHeader">4:00</div></td>
<td><div class="tableHeader">5:00</div></td>
<td><div class="tableHeader">6:00</div></td>
<td><div class="tableHeader">7:00</div></td>
<td><div class="tableHeader">8:00</div></td>
<td><div class="tableHeader">9:00</div></td>
<td><div class="tableHeader">10:00</div></td>
<td><div class="tableHeader">11:00</div></td>
<td><div class="tableHeader">12:00</div></td>
<td><div class="tableHeader">1:00</div></td>
<td><div class="tableHeader">2:00</div></td>
<td><div class="tableHeader">3:00</div></td>
<td><div class="tableHeader">4:00</div></td>
<td><div class="tableHeader">5:00</div></td>
<td><div class="tableHeader">6:00</div></td>
<td><div class="tableHeader">7:00</div></td>
<td><div class="tableHeader">8:00</div></td>
<td><div class="tableHeader">9:00</div></td>
<td><div class="tableHeader">10:00</div></td>
<td><div class="tableHeader">11:00</div></td>
</tr>
</table>
</div>
</td>
</tr>
<!-- $STARTHERE -->
</table>
</body>
</html>
6. Comple, test, run.
7. With IsWindowLess set to false, the html displays perfectly fine. With IsWindowLess set to true, the html does not display correctly. It's as if some of my style width's are ignored. The html has been tested with IE6, IE8, and Firefox (latest version). And it works, as long as IsWindowLess is not set to true. |
|
|
|
 | |
|
|
| Re: How do I use an HTMLBox with the IsWindowLess property set to true? |
|
|
Hi Dan,
You should use FireBug or IE's Developer Tools to view the Html that is output to understand fully what is going on.
The main difference between using IsWindowLess = False and True is that when False, an IFrame is rendered around the contents of the HtmlBox, while for IsWindowLess = True a simple div is enclosing the contents.
Without the IFrame, the Html syntax doesn't allow for a full Html document with a head and body tags, so the head section is simply ignored. What happens next is probably per the Html standard, but the script tag seems to be removed in all cases and the script is not loaded. You will have to preload it with your application, or even after you have loaded the Html contents, via InvokeScript or something like that.
I believe the CSS style is honoroed though, but the "path" to the CSS class names may be different, as you are not working "from the top" as you were within an IFrame. Try naming the styles like ".divHeader" instead of "DIV.divHeader" and see if that works for you.
Again, I suggest you view the rendered Html for both of these cases to see the difference and how it appears within the browser.
Hope this explains and helps a bit.
Palli
Páll Björnsson -
Visual WebGui support team - Email: support@visualwebgui.com |
|
|
|
| |
|
|
| Re: How do I use an HTMLBox with the IsWindowLess property set to true? |
|
|
OK, based on what you said, I removed everything and just put together a simple table (I've tried this with the html/body tags and without - same results):
<table cellspacing="0" cellpadding="0" border="1" >
<tr>
<td><div style="width:1px;max-width:1px;height:20px;max-height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background-color:#ECE9D8;"></div></td>
<td><div style="width:100px;max-width:100px;height:20px;max-height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background-color:#ECE9D8;">12:00</div></td>
<td><div style="width:100px;max-width:100px;height:20px;max-height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background-color:#ECE9D8;">1:00</div></td>
<td><div style="width:100px;max-width:100px;height:20px;max-height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background-color:#ECE9D8;">2:00</div></td>
<td><div style="width:100px;max-width:100px;height:20px;max-height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background-color:#ECE9D8;">3:00</div></td>
<td><div style="width:100px;max-width:100px;height:20px;max-height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background-color:#ECE9D8;">4:00</div></td>
<td><div style="width:100px;max-width:100px;height:20px;max-height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background-color:#ECE9D8;">5:00</div></td>
<td><div style="width:100px;max-width:100px;height:20px;max-height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background-color:#ECE9D8;">6:00</div></td>
<td><div style="width:100px;max-width:100px;height:20px;max-height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background-color:#ECE9D8;">7:00</div></td>
<td><div style="width:100px;max-width:100px;height:20px;max-height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background-color:#ECE9D8;">8:00</div></td>
<td><div style="width:100px;max-width:100px;height:20px;max-height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background-color:#ECE9D8;">9:00</div></td>
<td><div style="width:100px;max-width:100px;height:20px;max-height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background-color:#ECE9D8;">10:00</div></td>
<td><div style="width:100px;max-width:100px;height:20px;max-height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background-color:#ECE9D8;">11:00</div></td>
<td><div style="width:100px;max-width:100px;height:20px;max-height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background-color:#ECE9D8;">12:00</div></td>
<td><div style="width:100px;max-width:100px;height:20px;max-height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background-color:#ECE9D8;">1:00</div></td>
<td><div style="width:100px;max-width:100px;height:20px;max-height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background-color:#ECE9D8;">2:00</div></td>
<td><div style="width:100px;max-width:100px;height:20px;max-height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background-color:#ECE9D8;">3:00</div></td>
<td><div style="width:100px;max-width:100px;height:20px;max-height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background-color:#ECE9D8;">4:00</div></td>
<td><div style="width:100px;max-width:100px;height:20px;max-height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background-color:#ECE9D8;">5:00</div></td>
<td><div style="width:100px;max-width:100px;height:20px;max-height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background-color:#ECE9D8;">6:00</div></td>
<td><div style="width:100px;max-width:100px;height:20px;max-height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background-color:#ECE9D8;">7:00</div></td>
<td><div style="width:100px;max-width:100px;height:20px;max-height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background-color:#ECE9D8;">8:00</div></td>
<td><div style="width:100px;max-width:100px;height:20px;max-height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background-color:#ECE9D8;">9:00</div></td>
<td><div style="width:100px;max-width:100px;height:20px;max-height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background-color:#ECE9D8;">10:00</div></td>
<td><div style="width:100px;max-width:100px;height:20px;max-height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background-color:#ECE9D8;">11:00</div></td>
</tr>
</table>
That's it. That's the html that gets loaded. I cut-and-paste the same "style" for each div tag.
And when I go to one of the table-data elements (using the IE Developer Toolbar), I see: i40.tinypic.com/20r93ie.jpg
So, it looks like it's applying my style, as the DIV attribute is displaying all my attributes and the "current style" matches what I put for styles. Meanwhile, the IsWindowLess = false works. But, IsWindowLess = true does not. It's as if certain attributes are getting ignored. I'm not using a Head or JavaScript or anything. This is a simple table with div tags to apply styling. That's it.
And as a heads up, one of the reasons we chose VisualWebGUI was to avoid the learning-curve of html/css/javascript/jquery/blah/blah/blah. So the fact that we have to get our hands dirty here is an issue (for us). Basically, it has to really be spelled out.
EDIT: Is there a way that I can create my own HTMLBox UserControl, keep IsWindowLess = false, but somehow turn-off scrolling? For example, what would I need to override to do that? |
|
|
|
| |
|
|
| Re: How do I use an HTMLBox with the IsWindowLess property set to true? |
|
|
Hi Dan,
I was, and I still am, exactly in your shoes regarding trying to not get my hands dirty with all the blah/blah/blah stuff. In my book that means I will try to use Visual WebGui controls as much as humanly possible, but if I need to go outside of that protecive circle, well, that means some fighting and I'll just need to accept that. In this case you are of course going outside of that circle by choosing to go Html directly.
Anyway, I'm not sure why the browser doesn't honor the CSS inline styles. Must be some standards or browser thing, as it almost seems like the styles are there but they are not really "applied".
Examining your original Html (the one with head and body tags in your first message), it seems to me that it's not the HtmlBox that's producing the scrollbars, but your own Html code. So, before going any further, let's try this simple test. Set your HtmlBox.IsWindowLess = False and then inside your html code, place "overflow: hidden;" on the body tag within your own html and see if that produces the results you are after. From what I can see, the scrollbars are removed.
Hope this helps,
Palli
Páll Björnsson -
Visual WebGui support team - Email: support@visualwebgui.com |
|
|
|
| |
|
|
| Re: How do I use an HTMLBox with the IsWindowLess property set to true? |
|
|
I agree. We try to do as much as humanly possible with the Visual WebGUI controls. This HTML is related to the Schedule Control I have been asking about. There's just no reasonable Visual WebGUI solution until 6.4d is released (and that's when I'll be able to get the Panels with the DataGridView). I know it was suggested to build a WebGUI control from scratch, and that "there was plenty of source code" to look at, but looking at the source, one doesn't know where to begin.
I did some google searching on visualwebgui.com again (yesterday) and finally hit the right keywords to discover a solution. So, I did add the "overflow:hidden" to the body tag. And that did take care of the scrollbars for me. So, there's no need to use IsWindowLess = true now. But, I'm still curious as to why my styles were ignored. In addition, when you have IsWindowLess = true, you don't even get the IE context menu (on that HTMLBox), which seemed odd. I guess I don't get the IsWindowLess = true feature. It mangles HTML, it doesn't load anything in the HEAD tags, etc. ... I just want to know how to use it now!
But, I have solved my original problem, so we are good to go . |
|
|
|
| |