CODEWITHSUNDEEP
htmlformstwitter-bootstrapcss
vincent
vincent

Reputation: 233

Prevent input fields from breaking/wrapping

I got 2 input fields below. One select another input text. I need it to stay inline even in mobile mode.

How do I prevent input fields within from breaking? They stay inline regardless of screen size.

<div class="col-sm-4">
    <label class="control-label">Form label</label>
    <div class="form-inline">
    <div class="form-group">
        <select class="form-control">
            <option value="A">Option A</option><option value="B">Option B</option><option value="C">Option C</option><option value="D">Option D</option>
        </select>
    </div>
    <div class="form-group">
        <input class="form-control" type="text">
    </div>
    </div>
</div>

Upvotes: 0

Views: 3119

Answers (3)

Nefelibata
Nefelibata

Reputation: 99

What has worked for me is wrapping the label and input, select, checkbox, etc.. in a div tag.


<form>
<div style=" white-space: nowrap;overflow: hidden;" >
<label>
<select>
<option value="?">Select</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
</select>
</label>
</div>
</form

Upvotes: 0

Hemant Parihar
Hemant Parihar

Reputation: 752

You can use tables for both select field and text field. In table you can specify the width of the so both are inline.

<table> 
    <tr><td><div class="form-group">
        <select class="form-control">
            <option value="A">Option A</option><option value="B">Option B</option><option value="C">Option C</option><option value="D">Option D</option>
        </select>
    </div></td></tr>
    <tr><td>
    <div class="form-group">
        <input class="form-control" type="text">
    </div>
    </td></tr>
    </table>

if you mean inline, both to be have same width and are on each other. Not that both are in same line.

Upvotes: 0

Travtex
Travtex

Reputation: 66

From http://getbootstrap.com/css/

Bootstrap's inline forms, as in:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form class="form-inline">
  <div class="form-group">
    <select class="form-control" >
        <option>Thing One</option>
        <option>Thing Two</option>
    </select>
    
  </div>
  <div class="form-group">
    <input type="text" class="form-control">
  </div>  
</form>

States in the docs 'This only applies to forms within viewports that are at least 768px wide.'

You could directly force them to stay inline with a fluid width in CSS and floating the elements.

Ex: https://jsfiddle.net/cm94dup9/

Upvotes: 1

Related Questions