If I set a WebGroupBox width=100% it is actually wider than the window in IE when not in compatibility mode. I included a simple example that shows what I mean. I'm using IE9 looking for anything I might need to change visually before it is rolled out to my user base. It is purely a visual thing but the application window is like a big grid/table and the WebGroupBoxes don't align with other 100% items on the page. I am using the app styling and Office2007Blue
Hello,
I have tested this using a regular div element. The exact widths discussed are related to this test only.
Please notice, that the div element and the fieldset (WebGroupBox is rendered in) have exactly the same width, when using width=100% for the WebGroupBox. And in the screenshot attached you could see that it was exactly 1264px for both. And yet there was a difference in the visualization. The fieldset again is wider and a scrollbar appears. This is because the fieldset also had margins and paddings inherited (could be browser/Chrome defaults or other).
If you don’t specify width for the WebGroupBox it will automatically render as 1260px and will be visually looking good.
If you set the width of the WebGroupBox to 99%, the fieldset it is rendered in will be just fitting the page as you expect, using this 1% for balancing the margins and paddings included.
Is there any particular reason you would like to set a width as 100%, as it seems not really necessary. What is more, if you set it to 100%, you should additionally track where these margins and padding are coming from and set them to 0, so the fieldset the WebGroupBox is rendered and fits the window. You could experiment with, and clear such margins and paddings with default page css style similar to these:
html, body { margin: 0; padding: 0; max-width: 100%; }
html, body, form { width:100%; margin:0; }
Please let me know if you need further assistance on this.
That was very helpful. I guess I was setting Width="100%" for some reason in the past. After removing it and adjusting the left/right margin in .igpnl_Office2007BlueGroupBoxControl I was able to accomplish my goal with the WebGroupBox. They now line up perfectly with my 100% tables.
I have a similar question with WebDataGrid. I'm binding to a grid with many different datasets and in code behind I'm adding the desired columns based on the particular dataset. I want to control the width of certain columns but have the rest (usually only the last column) use the remaining space. What I find is if I set the last column's width to 0 the resulting HTML shows width:100% and that expads hte grid a few pixels to the right. Before the databind it is width:auto and files the desired amount of space.
If there a way to leave the last column's width as "auto" and have it fill the remaining space? Or is the problem with width:100% (post-databind) being wider than width:auto (pre-databind)?
The attached example has a "Load Rows" button to bind a row to the grid so you can see what I'm seeing. In the ASPX I do not set the grid width and only set the column widths for the first 3 columns: last one does not have a defined width.
Hello dc06663,
And thank you for the code sample provided!
For tracking purposes, could you please open a new thread with a corresponding to the issue/questions title? This will help all forum users to more easily find a solution regarding their specific scenario.