views:

166

answers:

1

Hi everyone,

I have an asp.net panel that contains a checkboxlist. I'd like to resize it so that its width fits the list's contents snugly.

Right now I'm handling the panel's pre rendering event, setting its width to match that of the checkboxlist. However it appears the checkboxlist's width property reads zero (at least in this pre render method) so the panel's width is set identically, which leads to inconsistent renderings in Firefox vs IE. Does anyone have a better approach to doing what I'm attempting here? Many thanks.

A: 

You could set the panel width onload per javascript:

<script>
function resizePanel() {
            var panel = document.getElementById('Panel1');
            var checkBox = document.getElementById('CheckBoxList1')
            if (panel != null && checkBox != null)
                panel.style.width = checkBox.offsetWidth + "px";
}
</script>
</head>
<body onload="resizePanel()">
    <form id="form1" runat="server">
    <asp:Panel ID="Panel1" runat="server" BorderWidth="1" BorderColor="Silver">
    <asp:CheckBoxList ID="CheckBoxList1" Width="200px" runat="server">
    <asp:ListItem Text="Item 1" Value="1"></asp:ListItem>
    <asp:ListItem Text="Item 2" Value="2"></asp:ListItem>
    <asp:ListItem Text="Item 3" Value="3"></asp:ListItem>
    <asp:ListItem Text="Item 4" Value="4"></asp:ListItem>
    <asp:ListItem Text="Item 5" Value="5"></asp:ListItem>
    <asp:ListItem Text="Item 6" Value="6"></asp:ListItem>
    <asp:ListItem Text="Item 7" Value="7"></asp:ListItem>
    </asp:CheckBoxList>
    </asp:Panel>
    </form>
</body>
</html>
Tim Schmelter
Thanks for the assistance. This is working for me, with the modification that I had to check the offsetWidth was greater than (say) 25 pixels. Otherwise, when I had no data in the checkboxlist, the offsetwidth was zero and my panel took up the entire screen in both IE and Firefox for some reason.
larryq