How to position two selects within the same div?

Navigation
2

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

I've tried using CSS to create a class to apply to every select , but it did not work: 

select.left {
  text-align: left;
}

select.right {
  text-align: right;
}

I'm using the twitter-bootstrap + Flat-ui , then I've created the verifiable example below and FIDDLE with these libraries: 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="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><scriptsrc="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 in the same div because otherwise the script that populates the selects does not find the city after it has chosen the state. Here you have a fiddle with the plugin .

    
asked by anonymous 30.07.2015 / 02:54

1 answer

4

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

Do not put selects within labels .

Use the class form-control in selects . 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="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><scriptsrc="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 in the same div because otherwise the script that populates the selects does not find the city after it has chosen the state.

HTML is not a static code and its markup will change almost always, so do not create scripts to "navigate" between tags, so there are ids .

    
30.07.2015 / 03:04
What is the "array" option in app / config / session.php? Check if a value is present in an array