Cannot control the width of the label control

[BobLaughland]

Hi There,

I am trying to get some fields to align on a web page, like this,

To:
From:
Subject:

Each of the fields above have a corresponding asp:Textbox control next
to it that I cannot get to lign up. I have this code,

<asp:Label Runat="server" Width="100px" ID="Label6">To: </
asp:Label>
<asp:TextBox ID="Textbox1" Runat="server" Width="200px" />
<asp:Label Runat="server" ID="Label7" ForeColor=red Width="5px">*</
asp:Label>

So that means I have tried to tell it that I want the asp:label
control to be 100 pixels wide, but it seems to shrink the label width
to fit the text.

Please help.

 

[Nathan Sokalski]

I once had that problem too, and I found that the problem is that the
element must also be a block element. To solve your problem, add the
following attribute:

style="display:inline-block;"

This will solve your problem. I add this attribute to many of my Label
controls when creating input forms, because it is more efficient than making
a table if you only have a few fields (not to mention specifying the
dimensions of table cells has given me more frustration than any other
layout aspect). Good Luck!

 

[BobLaughland]

I once had that problem too, and I found that the problem is that the
element must also be a block element. To solve your problem, add the
following attribute:

style="display:inline-block;"

This will solve your problem. I add this attribute to many of my Label
controls when creating input forms, because it is more efficient than making
a table if you only have a few fields (not to mention specifying the
dimensions of table cells has given me more frustration than any other
layout aspect). Good Luck!
--
Nathan Sokalski
(e-mail address removed)://www.nathansokalski.com/










- Show quoted text -

Great, you are on the money.

I have a CSS file which I want to put it into. How do I do that?

The label I want to control is wrapped in side a div.

<div class="EmailEntry">
<asp:Label Runat="server" ID="Label1" >To: </asp:Label>
<asp:TextBox ID="ToField" Runat="server" Width=80% />
..............
.............
</div>

So if I put this into my css why does it not work?

div.emailentry label
{
display: inline-block; /* or inline block, which ever one you
think looks better */
width: 80px;
}

I have also tried 'div.emailentry label1' but that didn't work either.

 

[marss]

Great, you are on the money.

I have a CSS file which I want to put it into. How do I do that?

The label I want to control is wrapped in side a div.

<div class="EmailEntry">
<asp:Label Runat="server" ID="Label1" >To: </asp:Label>
<asp:TextBox ID="ToField" Runat="server" Width=80% />
.............
............
</div>

So if I put this into my css why does it not work?

div.emailentry label
{
display: inline-block; /* or inline block, which ever one you
think looks better */
width: 80px;

}

I have also tried 'div.emailentry label1' but that didn't work either.

Try this:

<style>
div.EmailEntry span
{
width: 80px;
float:left;
}
div.EmailEntry input
{
margin-left: 100px; /*indent from left side*/
display:block;
width: 80%;
}
</style>

Mykola
http://marss.co.ua

 

[bruce barker]

<asp:label> does not generate a <label> (for which there is no asp.net
control) but rather a <span>.

-- bruce (sqlwork.com)

 

[Nathan Sokalski]

My recommendation would be to use a CSS class, like the following:

..FixedWidthLabel{display:inline-block;}

And then apply that class to each of the Label controls you want by using
the CssClass property, such as:

<asp:Label Runat="server" Width="100px" ID="Label6" Text="To:"
CssClass="FixedWidthLabel"/>

If you would like to place the width in the CSS class as well, you may want
to do that as well, since it sounds like you want them all to be the same
width, but that is obviously your choice. Hopefully this helps. Good Luck!