Align Radio Button text and button

  • Thread starter Thread starter tshad
  • Start date Start date
T

tshad

How do you get the text to line up with the button when it is small text?

I have a button:

<asp:RadioButton id="rdbClients" GroupName="SetupDisplay" style=" font-size:
11px " runat="server" />

If the button is the default size where the text is large, it lines up so
the button is at the middle of the text. But when you change the text to a
small font, it is still positioned in the same place but since the text is
smaller, the button is now aligned with the top of the text because the text
is now shorter.

Is there a way to get the text move up so that the button is aligned with
the middle of the text?

Thanks,

Tom
 
How do you get the text to line up with the button when it is small
text?

I have a button:

<asp:RadioButton id="rdbClients" GroupName="SetupDisplay" style="
font-size: 11px " runat="server" />

If the button is the default size where the text is large, it lines up
so the button is at the middle of the text. But when you change the
text to a small font, it is still positioned in the same place but
since the text is smaller, the button is now aligned with the top of
the text because the text is now shorter.

Is there a way to get the text move up so that the button is aligned
with the middle of the text?
Click to expand...

If I am reading you correctly, you have a need to vertically align the
text? If so, you can do this in the tag, or if you are using CSS (as in the
image/table problem), you can use the vertical-align attribute:
http://www.w3schools.com/Css/pr_pos_vertical-align.asp

Peace and Grace,
Greg

--
Vote for Miranda's Christmas Story
http://tinyurl.com/mirandabelieve

Twitter: @gbworld
Blog: http://gregorybeamer.spaces.live.com

*******************************************
| Think outside the box! |
*******************************************
 
How do you get the text to line up with the button when it is small text?

I have a button:

<asp:RadioButton id="rdbClients" GroupName="SetupDisplay" style=" font-size:
11px " runat="server" />

If the button is the default size where the text is large, it lines up so
the button is at the middle of the text.  But when you change the text to a
small font, it is still positioned in the same place but since the text is
smaller, the button is now aligned with the top of the text because the text
is now shorter.

Is there a way to get the text move up so that the button is aligned with
the middle of the text?

Thanks,

Tom
Click to expand...

You can try to specify positioning, like

style="position:relative; top:-5px;"
 
Gregory A. Beamer said:
If I am reading you correctly, you have a need to vertically align the
text? If so, you can do this in the tag, or if you are using CSS (as in
the
image/table problem), you can use the vertical-align attribute:
Click to expand...

I already tried that:

<asp:RadioButton id="rdbClients" GroupName="SetupDisplay" style=" font-size:
11px; vertical-align: top " runat="server" />

but the text is still at the bottom.

Tom
 
How do you get the text to line up with the button when it is small text?

I have a button:

<asp:RadioButton id="rdbClients" GroupName="SetupDisplay" style="
font-size:
11px " runat="server" />

If the button is the default size where the text is large, it lines up so
the button is at the middle of the text. But when you change the text to a
small font, it is still positioned in the same place but since the text is
smaller, the button is now aligned with the top of the text because the
text
is now shorter.

Is there a way to get the text move up so that the button is aligned with
the middle of the text?

Thanks,

Tom

You can try to specify positioning, like

style="position:relative; top:-5px;"
Click to expand...

This only works (same with Gregs suggestion) if you use a separate control
such as a Label and then put the style on that. But then the text is about
a couple of characters to the right and not right up to the button as it is
if the text is part of the control.

Neither way works if the text is part of the RadioButton control.

Thanks,

Tom
 
I already tried that:

<asp:RadioButton id="rdbClients" GroupName="SetupDisplay" style="
font-size: 11px; vertical-align: top " runat="server" />

but the text is still at the bottom.
Click to expand...

Brain went on vacation for a bit there.

There is no real control over alignment between the selection circle (the
button part) and the text (or at least none that I know of). This is not an
ASP.NET exclusive problem either, as this is an HTML construct.

Peace and Grace,
Greg

--
Vote for Miranda's Christmas Story
http://tinyurl.com/mirandabelieve

Twitter: @gbworld
Blog: http://gregorybeamer.spaces.live.com

*******************************************
| Think outside the box! |
*******************************************
 
This only works (same with Gregs suggestion) if you use a separate control
such as a Label and then put the style on that.  But then the text is about
a couple of characters to the right and not right up to the button as it is
if the text is part of the control.

Neither way works if the text is part of the RadioButton control.

Thanks,

Tom- Hide quoted text -

- Show quoted text -
Click to expand...

Tom,

the funny thing is that it is a Label. If you look at the source code
generated, you will see something like this

<input id="rdbClients" type="radio" name="SetupDisplay"
value="rdbClients" /><label for="rdbClients">This is a text string</
label>

Where text from the Text property goes between Label HTML tags. This
means that you need to add CSS style as I told you above

<style>
label
{
position: relative;
top: -5px;
}
</style>

and this should fix the issue. Please try it.

It was not clear from the beginning where your text is since your
sample tag doesn't include Text property....
 
Back
Top