CODEWITHSUNDEEP
asp.netcss
Sithelo Ngwenya
Sithelo Ngwenya

Reputation: 501

Setting panel height with content that does not fill the panel completely

I have a two panels which have to be the same height. The code for the panels is below:

<asp:Panel ID="Panel1"  GroupingText="Material" CssClass="material" 
                runat="server" >

                <asp:RadioButtonList ID="RadioButtonList1"   runat="server" >
                <asp:ListItem Selected="True">Plastics</asp:ListItem>
                <asp:ListItem Enabled="false">Glass</asp:ListItem>
                </asp:RadioButtonList>

             </asp:Panel>
<asp:Panel ID="Panel2"  GroupingText="Material" CssClass="design" 
                runat="server" >

                <asp:RadioButtonList ID="RadioButtonList1"   runat="server" >
                <asp:ListItem >SV</asp:ListItem>
                <asp:ListItem ">Bifocal</asp:ListItem>
                 <asp:ListItem >Varifocal</asp:ListItem>
                <asp:ListItem >Intermediate</asp:ListItem>
                </asp:RadioButtonList>

             </asp:Panel>

I have a styled these two panels with the css below:

.material{display:inline-block; float:left;max-height:200px;width:90px;overflow:hidden;}
.design {display:inline-block; float:left;max-height:200px;width:210px;overflow:hidden;}

Notice I tried making the height same. However since panel1 has little content, the border of the panel does go all the way to height 200px. How can I have same height even when content does not fill the panel completely.

Upvotes: 0

Views: 921

Answers (2)

Sithelo Ngwenya
Sithelo Ngwenya

Reputation: 501

Remove the max-height in yours css and add this code:

fieldset {height:200px}

Upvotes: 0

user1
user1

Reputation: 1065

The Panel in asp.net when rendered in HTML doesn't get rendered as a panel as panel is not a valid html tag. you could wrap div inside of the panel and provide styling to the div.

<asp:Panel ID="Panel1"  GroupingText="Material" CssClass="material" 
            runat="server" >
            <div class="material">
            <asp:RadioButtonList ID="RadioButtonList1"   runat="server" >
            <asp:ListItem Selected="True">Plastics</asp:ListItem>
            <asp:ListItem Enabled="false">Glass</asp:ListItem>
            </asp:RadioButtonList>
            </div>
         </asp:Panel>
<asp:Panel ID="Panel2"  GroupingText="Material" CssClass="design" 
            runat="server" >
            <div class="design">
            <asp:RadioButtonList ID="RadioButtonList1"   runat="server" >
            <asp:ListItem >SV</asp:ListItem>
            <asp:ListItem ">Bifocal</asp:ListItem>
             <asp:ListItem >Varifocal</asp:ListItem>
            <asp:ListItem >Intermediate</asp:ListItem>
            </asp:RadioButtonList>
            </div>
         </asp:Panel>

Upvotes: 1

Related Questions