Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Styling Radio Buttons: display on single line

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #36196
    pherankh
    Participant

    I’ve been trying to modify the “Subtraction Good Form 0.2” (http://examples.webtypes.com/goodform/)

    Unfortunately, I’m learning that there is a large amount of CSS involved in styling the form elements and that of course makes it confusing to deal with the needs of particular elements.

    I’m having a lot of problems trying to get the radio buttons to display on one line (you will see that they are surrounded with a red border). Plus the HTML functioning of the buttons is impaired (and I haven’t figured out why). Any ideas on how I can fix the CSS? And if you can spot the HTML issue with the radio buttons I would be very thankful.

    My version of the form is here:
    http://www.burntscarlet.com/_test/help_forums/form_radio_styling.html

    #94961
    TheDoc
    Member

    I don’t particularly like how you have your HTML set up, but here’s how I would go about it given the HTML provided: http://jsfiddle.net/5HgVj/

    #94967
    pherankh
    Participant

    Thanks Doc. The outer labels are being used as containers for the HTML input elements – that’s the method being used by this particular “Subtract 0.2” form. And that seems to be what is breaking the functionality of the radio buttons (and probably checkboxes as well). We’d like to hear your comments about the HTML setup.

    #94969
    TheDoc
    Member

    A label shouldn’t be used as a wrapper. If you need to wrap each item, you can use a div.

    #94985

    Well it’s easy, you have the floating left idea correct, but you need to specify a width so that it may know that it can float left and fit together.

    Specify a width of lets say 50px to the labels wrapping the radio buttons, and then bob’s your uncle it’ll work the way you want.

    #94995

    @TheDoc With the correct markup, the form elements behave as @pherankh wants without any styling: http://jsfiddle.net/sl1dr/5HgVj/1/

    #95011
    TheDoc
    Member

    Much better.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.