0

I have some radio-buttons in a Bootstrap 3.3.5 setup. If a certain radio-button is checked an addional input field may be filled. I thus want to place it near that radio button. What is a good way to do that? Whether I place it in the label or the li - it's always displayed with a break before and breaks the inline display of the radios.

        <ul class="list-inline">

            <li>
                <label class="radio-inline">
                    <input type="radio" name="rdoInp" id="rdoInp1" value="1"> Radio 1
                </label>
            </li><li>
                <label class="radio-inline">
                    <input type="radio" name="rdoInp" id="rdoInp6" value="6"> Radio 6
                </label>
            </li><li>
                <label class="radio-inline">
                    <input type="radio" name="rdoInp" id="rdoInp7" value="7"> Radio 7
                    <input type="text" name="txt1" class="form-control col-xs-1">
                </label>
            </li><li>
                <label class="radio-inline">
                    <input type="radio" name="rdoInp" id="rdoInp8" value="8"> Radio 8
                </label>
            </li>

        </ul>

Unlike answered in Question add text input to inline radio buttons am I in a .form-horizontal formular.

Fiddle: http://www.bootply.com/F57p30Eyo2

Community
  • 1
  • 1
Bernhard Döbler
  • 1,960
  • 2
  • 25
  • 39
  • are you looking for something like this (see only radio 7)? http://www.bootply.com/oNp11RQBru (we can make it much better later) – JGV Aug 30 '15 at 21:42

1 Answers1

0

This looks like an issue with how you've set up the grid system on your containers rather than the list. You have "col-sm-4" on the containing div. If you change it to "col-sm-12" it displays the text input field inline.

The element simply doesn't fit inline with all the others as part of such a narrow column. For example, applying "width: 50px" to the text field also places it inline.

akoinesjr
  • 288
  • 2
  • 5
  • I set up `col-sm-4` in this sample as I am in a `modal` in real life. – Bernhard Döbler Aug 31 '15 at 08:49
  • 1
    I understand, I was just trying to illustrate that as far as I can tell the element is being displayed inline and that there is a break simply because the content doesn't fit in the width of the container. – akoinesjr Aug 31 '15 at 17:44