0

Is there a way to make bootstrap-ui components appear inline, like so: enter image description here

I have tried various things but I can't get them all to align. Here is the Plunkr

  <div class="col-md-6">
    <p class="input-group">
      <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
      <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
      </span>
       <div uib-timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></div>
    </p>
  </div>

UPDATE:

Have tried changing the uib-timepicker tag from div to span, but that breaks the datepicker component: https://plnkr.co/edit/CjBzCthVyoQAVooi5oR7?p=preview

UPDATE2: To calrify, this question is about this library: https://angular-ui.github.io/bootstrap/

UPDATE3: Updated the plunkr provided in the accepted answer with relative units: https://plnkr.co/edit/TaoVJZwCjh1uLyz3huk9?p=preview

tonysepia
  • 3,340
  • 3
  • 27
  • 45

1 Answers1

1
  • Change the last div tag to span tag.
  • Add two new CSS classes:
    • .buttonClass{ vertical-align:top; }
    • .timeClass table:first-child { top:-35px; position:relative; }
  • Add button class to span which holds the button,
  • Add time class to span that holds time picker.
Milan Živković
  • 106
  • 8
  • Thank you, but it appears to break the datepicker component: https://plnkr.co/edit/CjBzCthVyoQAVooi5oR7?p=preview – tonysepia May 29 '18 at 12:28
  • That is just CSS style thing, I have updated the answer. https://plnkr.co/edit/Zb32Ica32DHUKH6dVVOe?p=preview – Milan Živković May 29 '18 at 14:47
  • Thank you, but still doesn't work. I have updated the Plunkr with your recommendations and the result is the same. Can you modify the Plunkr so that it gives the correct result please? – tonysepia May 29 '18 at 14:54
  • Did you try plunker which I provided, it should work? You probably forgot the first step. – Milan Živković May 29 '18 at 14:55
  • What you did wrong is applied timeClass with the dot, please remove the dot in that span where you are applying this class: ( – Milan Živković May 29 '18 at 15:00
  • Sorry, it's not the dot: https://imgur.com/a/eVUkeET Would you be so kind and create a working Plunkr if it works for you? Thank you – tonysepia May 29 '18 at 16:02
  • You were right, it wasn't just the dot, it didn't work in Firefox, timeClass needs to be changed a little and then it works: https://plnkr.co/edit/eeYQVupQDopATsUluwx6?p=preview – Milan Živković May 30 '18 at 07:23
  • Thank you! I have forked the plunk to use the relative units instead of the absolute ones – tonysepia May 30 '18 at 09:41