How to position two selects within the same div?

Asked

Viewed 765 times

2

I need to put two selects within a single div, one aligned to the left, and the other to the right.

I’ve tried using CSS by creating a class to apply to each select, but it didn’t work:

select.left {
  text-align: left;
}

select.right {
  text-align: right;
}

I’m using the + Flat-ui, so I’ve already created the checkable example below and the FIDDLE with these libraries:

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://designmodo.github.io/Flat-UI/docs/assets/js/application.js"></script>
<link href="http://designmodo.github.io/Flat-UI/dist/css/flat-ui.min.css" rel="stylesheet"/>
<script src="http://designmodo.github.io/Flat-UI/dist/js/flat-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-md-8">
    <label class="control-label" for="cest"> Estado: 
        <br/>
        <select name="Test" id="cest" class="select select-primary select-exemploa right" data-toggle="select"></select>
    </label>
    <label class="control-label" for="Ccid"> Cidade:
        <br/>
        <select class="select select-primary select-exemploa left"  name="Tcid" id="Ccid" data-toggle="select"></select>
    </label>
</div>

Note: they have to stay the same div because otherwise the script that populates the selects do not find the city after you have chosen the state. In this link you have a fiddle with the plugin.

html css html5 twitter-bootstrap flat-ui

1 answer

4


You can use columns <div class="col-md-6"> inside the columns.

Don’t put the selects within the labels.

Use the class form-control us selects.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://designmodo.github.io/Flat-UI/docs/assets/js/application.js"></script>
<link href="http://designmodo.github.io/Flat-UI/dist/css/flat-ui.min.css" rel="stylesheet"/>
<script src="http://designmodo.github.io/Flat-UI/dist/js/flat-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div class="content">
  <div class="row">
<div class="col-md-12 col-md-12 col-md-12 col-md-12">
   <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <label class="control-label" for="cest"> Estado:</label>
     <select name="Test" id="cest" class="select select-primary select-exemploa form-control" data-toggle="select">
          </select>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <label class="control-label" for="Ccid"> Cidade:</label>
          <select class="select select-primary select-exemploa form-control"  name="Tcid" id="Ccid" data-toggle="select">
          </select>
      
    </div>
 </div>
  </div></div>

Note: they have to stay the same div because otherwise the script who populate the selects don’t find the city after you chose the state.

HTML is not static code and your markup will be changed almost every time, so don’t create scripts that "browse" between the tags, for this there are the ids.

  • So, but I can not split into two columns, because otherwise the plugin does not populate the second select... here is a fiddle with the plugin, take a look...

  • So I’m using class because I use two sets of these selects. If it was just one, you could use it for idno problem, but with two it has to be by class, only then I can not use a div for each (what would be the ideal btw, even for responsiveness)... Later I think about using another type (of autocomplete), but for now it will have to be this one... Is there no way? Thanks.

  • 1

    @Gustavox you have jQuery, just use: http://jsfiddle.net/sgecadth/19/

  • 1

    In fact even your code is working correctly: http://jsfiddle.net/sgecadth/21/ only that you placed it inside the window.load and Jsfiddle was already doing it.

  • That’s it! I still took the #Cform, and I just left $('.classdivcolb') at the suggestion of the ID and was perfect. Thanks!

Browser other questions tagged html css html5 twitter-bootstrap flat-ui

You are not signed in. Login or sign up in order to post.