StephenT StephenT - 4 months ago 11
CSS Question

Groupingtext border does not cover all items inside the panel

I have a panel with a couple objects inside. When I add text to the to the groupingtext property the frame displays the full width of the panel but only goes down about 5px leaving all of the objects outside of the frame. How do I force the groupingtext frame to cover the full area of the panel?

<asp:Panel ID="pnlLEAddress" runat="server" GroupingText="Legal Entity Address"
style="z-index: 1; left: 50px; top: 250px; position: absolute; height: 50px; width: 400px">

<asp:TextBox ID="txtLEName" runat="server"
style="z-index: 1; left: 20px; top: 10px; position: absolute">
</asp:TextBox>
<asp:TextBox ID="txtLEStreet" runat="server"
style="z-index: 1; left: 20px; top: 40px; position: absolute">
</asp:TextBox>
<asp:TextBox ID="txtLECityStateZip" runat="server"
style="z-index: 1; left: 20px; top: 70px; position: absolute">
</asp:TextBox>
<asp:TextBox ID="txtLECountry" runat="server"
style="z-index: 1; left: 20px; top: 100px; position: absolute">
</asp:TextBox>

</asp:Panel>

Answer

Apparently in that case your panel is rendered as a FieldSet. Try adding following style to your markup:

<style>
  #pnlLEAddress > fieldset {
       height: 150px;
  }
</style>