Member Avatar for anish.anick

Hi All,
I need to create a user control having a label and button.
The label text size can be different, When the text length is
greater the user control must autosize the label as well as the
button(button size is fixed). My issue is when the label text is
greater the button control becomes invisible from that user control.
Please help me to solve this.

Thanks

  • 3 Contributors
  • 2 Replies
  • 92 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by Diamonddrake

Dani AI

Generated

A few practical ways to keep the button visible when the label text grows (referring to 's issue and 's observation that the label sizing is what pushes the button off):

Use a layout that reserves space for the fixed-width button and lets the label take only the remaining area. The modern, simple solution is CSS Flexbox. Example markup and styles you can apply to your ASCX:

<asp:Panel CssClass="ucRow" runat="server">
  <asp:Label ID="lblText" runat="server" CssClass="ucLabel" />
  <asp:Button ID="btnAction" runat="server" CssClass="ucButton" Text="Go" />
</asp:Panel>
.ucRow { display:flex; align-items:center; }
.ucLabel { flex:1 1 auto; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin-right:8px; }
.ucButton { flex:0 0 auto; width:80px; }

Notes and troubleshooting tips:

  • min-width:0 is important in flex layouts so the label can actually shrink and trigger the ellipsis. Without it the label may refuse to shrink and still push the button.
  • If you want the label to wrap to multiple lines instead of an ellipsis, switch white-space:nowrap to white-space:normal and remove text-overflow:ellipsis; the button will remain visible so long as the parent allows height to grow.
  • If you need older-browser support, a two-cell table layout or a right-aligned fixed-width cell achieves the same effect.
  • If the button still disappears, inspect the parent container for overflow:hidden, fixed widths, absolute positioning, or z-index issues with browser devtools.

References: MDN on using flexbox and text-overflow, and the ASP.NET Label control docs for server-side usage (Using CSS flexible boxes, text-overflow, Label control).

Recommended Answers

All 2 Replies

Member Avatar for Ramy Mahrous

I don't understand your question, where's your problem?

Member Avatar for Diamonddrake

ah. you mean the label is set to autosize and if the text is too long it pushes the button off the control, and removes it from the visible control. simply set the label autosize to false, then set its size to fill the space available. it might be a good idea to set the autoelipses to true as well.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.