Last post Mar 03, 2017 03:02 AM by Cathy Zou
Mar 02, 2017 10:52 AM|Yeoman|LINK
I have a web page with a lot of controls. There are groups of controls that are enclosed in panels, so that there is a frame with a title around them. It looks nice on a "standard" computer. But there are users that have configured their browser to enlarge
the display up to 175%. There is a panel with a CheckBoxList, which is much to width in this environment, so that it extends beyond the edge of the content area:
The code for the panel "Referat" looks like this:
<asp:Panel ID="Panel3" runat="server" GroupingText="Referat" Style="display: inline-block">
<asp:CheckBoxList ID="cbl_Referat" runat="server" DataSourceID="src_Referat" DataTextField="sym"
DataValueField="sym" RepeatColumns="18" RepeatDirection="Horizontal" ... />
I know that there is some constant logical width defined by the RepeatColumns="18" attribute. But if I omit this attribute, the checkboxes are displayed in one single row, which also is bad.
It would be good, if you could define some width (in percent) for the panel, and it arranges its checkboxes automatically...
How can I make this layout more flexible for different screen sizes?
Mar 02, 2017 01:41 PM|mgebhard|LINK
Try setting the RepeatLayout to something other than a table which is the default. A panel renders as a div and therefore you can use CSS to adjust the width relative to the panel's container.
Use the browser's developer tools (F12) to view and debug the HTML layout.
Mar 03, 2017 03:01 AM|paty20|LINK
Mar 03, 2017 03:02 AM|Cathy Zou|LINK
Furthermore, bootstrap is completely free to download and use.
So, I suggest you could refer to Bootstrap library for you could use it:
Besides, as mgebhard suggested, you could use CSS to change your layout of your control.
CSS Responsive Web Design: