Align Radio Button text and button

Discussion in 'ASP .Net' started by tshad, Nov 18, 2009.

  1. tshad

    tshad Guest

    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
     
    tshad, Nov 18, 2009
    #1
    1. Advertising

  2. "tshad" <> wrote in
    news:uR3VGL$:

    > 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?


    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! |
    *******************************************
     
    Gregory A. Beamer, Nov 18, 2009
    #2
    1. Advertising

  3. On Nov 18, 2:59 am, "tshad" <> wrote:
    > 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;"
     
    Alexey Smirnov, Nov 18, 2009
    #3
  4. tshad

    tshad Guest

    "Gregory A. Beamer" <> wrote in message
    news:Xns9CC76852ACFBBgbworld@207.46.248.16...
    > "tshad" <> wrote in
    > news:uR3VGL$:
    >
    >> 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?

    >
    > 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:


    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

    > 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! |
    > *******************************************
     
    tshad, Nov 18, 2009
    #4
  5. tshad

    tshad Guest

    "Alexey Smirnov" <> wrote in message
    news:...
    On Nov 18, 2:59 am, "tshad" <> wrote:
    > 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;"


    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
     
    tshad, Nov 18, 2009
    #5
  6. "tshad" <> wrote in
    news::

    > 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.


    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! |
    *******************************************
     
    Gregory A. Beamer, Nov 18, 2009
    #6
  7. On Nov 18, 7:27 pm, "tshad" <> wrote:
    > "Alexey Smirnov" <> wrote in message
    >
    > news:...
    > On Nov 18, 2:59 am, "tshad" <> wrote:
    >
    >
    >
    >
    >
    > > 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;"

    >
    > 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 -


    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....
     
    Alexey Smirnov, Nov 26, 2009
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kay
    Replies:
    2
    Views:
    7,158
  2. tshad

    text-align vs align

    tshad, Jun 23, 2005, in forum: HTML
    Replies:
    1
    Views:
    1,266
    David Dorward
    Jun 23, 2005
  3. Paul Lautman

    left align within centre align

    Paul Lautman, Mar 3, 2006, in forum: HTML
    Replies:
    3
    Views:
    576
    Paul Lautman
    Mar 3, 2006
  4. Steve Richter
    Replies:
    1
    Views:
    902
    Mark Rae
    Jun 24, 2007
  5. Hiten
    Replies:
    1
    Views:
    625
    Vidar Petursson
    May 26, 2004
Loading...

Share This Page