Twitter Bootstrap Question posted in

Twitter bootstrap – Align divs side by side with no empty black spaces

I have following HTML. I am using Twitter Bootstrap and AngularJS.

<div class="item item-custom-first">
    <select class="form-control"style="display:inline; float:right" ng-model="requestdata.units.length"  ng-options="value.id as value.label group by value.group for value in lengthUnits" ng-change="validateLength()">
        <option value="" selected hidden />
    </select>
</div>
<div class="item item-input item-stacked-label item-custom-second">
    <span class="positive"  ng-bind-html="translatedData.lengthField"></span>
    <div class="number number" >
    <input  class="form-control" type="number" name="length" placeholder="Value"
           ng-model="requestdata.beltSystem.length"
           ng-required="true" ng-blur="validateLength()">
        </div>
</div>

Since, that HTML is part of partial being used by lots of different pages, I cannot rearrange them.

I have following css.

.item-custom-first select{
    width: inherit !important;
}
.item-custom-second div{
    display: inline-flex !important;
   width: auto !important;
}

With this I am able to display those elements as enter image description here

However, I need input field to be aligned side by side with equal gap between input field and units drop-down as following.
enter image description here

Is there anyway, I can do that with CSS? I will be providing more info if needed. Thanks in advance.

UPDATE…
I want that text input to fill in all empty space if possible.

Tags:

2

Answers


  1. 0

    Add font-size: 0px; to the parent.

    #example {
  width: auto;
  background: red;
}
#example:first-child {
  font-size: 0px; /* Add to 'connect' divs (as seen in the first example)! */
}

#example div {
  display: inline-block;
  background: yellow;
  font-size: 14px;
}
    <div id="example">
  <div>Input div</div>
  <div>Drop down div</div>
</div>

<div id="example">
  <div>Input div</div>
  <div>Drop down div</div>
</div>
    Login or Signup to reply.
  2. 0

    You can add pull-right like this <div class="item item-input item-stacked-label item-custom-second pull-right"> then add a margin-right to separate them all equally.

    see fiddle: https://jsfiddle.net/smh6bsrq/1/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search