0

I looked into this post since it's exactly what I am trying to achieve: Radio Button and Label to display in same line.

Yet the struggle continues... Here's the layout I have (first 3 columns) and I expect to have (last two columns). Please ignore the outline boxes. Those were drawn just to mark the div.

I have two to three radio buttons that needs to be in the same line, as per the image shown below. These radio buttons their title should be within one div and nested inside a main div that contains the radio buttons, and the other html selector (e.g. Capacity) I tried giving enough width to this div, so radio buttons can sit horizontally in one line. But it doesn't work.

enter image description here

jsFiddle for html and css.

After removing float:left, width, height from said classes. As you see the Select button no longer aligns.

enter image description here

Community
  • 1
  • 1
aspiring
  • 1,557
  • 2
  • 20
  • 43

3 Answers3

1

Comment the css - height and width of #bookingForm input, #bookingForm textarea

aspiring
  • 1,557
  • 2
  • 20
  • 43
Domain
  • 11,562
  • 3
  • 23
  • 44
  • the width can't be removed from this bookingform input area. Because it affect the text input controls. If I remove it here, where else can I manage it? – aspiring May 26 '15 at 08:03
1

Remove float: left; from .fl1 em

And remove width and height from #bookingForm input, #bookingForm textarea will solve your issue.

Check Fiddle Here.

ketan
  • 19,129
  • 42
  • 60
  • 98
  • The label of radio buttons have a class called `tmRadio`. Although this seems to align the radio buttons, it affects the Capacity `select button`. Since the class for all divs the same, it shouldn't really get affected. Unless there's a `margin-bottom` to be fixed for class `tmRadio`. – aspiring May 26 '15 at 04:54
  • @aspiring remove `float: left;` from `.fl1 em +div`. Check https://jsfiddle.net/ud3qL6co/4/. – ketan May 26 '15 at 04:58
  • @aspiring ohh ok i got it `.tmRadio { height: 30px; }` will solved issue. Check https://jsfiddle.net/ud3qL6co/5/ – ketan May 26 '15 at 06:21
  • Nope, `height` will not work since background color has to be provided and the height must be same size as other grayish controls. So as guessed `margin-bottom` and `padding` did the trick for this alignment. – aspiring May 26 '15 at 06:30
  • Assuming I have a div with entire button group styled and aligned into one line. How can I incorporate that into this `fl1 fl2` class? Because changing classes here and there seems less standard for maintaining the css file. – aspiring May 26 '15 at 06:32
  • It is because to class `.tmSelect.auto, .tmSelect2.auto` you already given height. – ketan May 26 '15 at 06:34
  • You can also give `padding-bottom: 10px;` to `.tmRadio ` instead of height – ketan May 26 '15 at 06:35
  • It will effect because radio button have less width. If you trying to change in f1 f2 class then it will effect to all. – ketan May 26 '15 at 06:38
  • removing `width` from the booking form input is not the right move here. It is clearly messing up with the all the other text input controls. How else would you approach this? – aspiring May 26 '15 at 08:10
1

Remove CSS height and width property from this style.

#bookingForm input, #bookingForm textarea{ }
stanze
  • 2,456
  • 10
  • 13