html - How to center align the label horizontally with select (drop down) in a form? -


label not center aligned drop down box

label not center aligned drop down box

the label "user type" needs center aligned respect select (drop down box) next it.

i tried tricks , nothing worked. tried add line-height attribute suggested answer : how align label , select box vertically (middle)

i tried add display:inline-block suggested answer :

align labels in form next input

but nothing solved problem.

here necessary code snippet.

html : 

<div class="form-inline">                             <label for="admin-picker" class="label-admin">user type</label>                                 <select class="form-control" id="admin-picker" name="admin_privilege" required>                                     <option value="0">normal</option>                                     <option value="1">admin</option>                                 </select>                         </div>

css:

#user-management-form .form-control { margin-bottom: 15px; }

bootstrap.css:

.form-control {   display: block;   width: 100%;   height: 34px;   padding: 6px 12px;   font-size: 14px;   line-height: 1.42857143;   color: #555;   background-color: #fff;   background-image: none;   border: 1px solid #ccc;   border-radius: 4px;   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);           box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);   -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;           transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; }

you can update using following flex box code

label {  font-size: 12px;  margin:0 10px **15px** 0;  }  select {    height: 40px;  }  .form-inline {    display: flex;    align-items: center;    justify-content: flex-start;  }    .form-control {      display: inline-block;      width: auto;      vertical-align: middle;      height: 34px;      padding: 6px 12px;      font-size: 14px;      line-height: 1.42857143;      color: #555;      background-color: #fff;      background-image: none;      border: 1px solid #ccc;      border-radius: 4px;      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);      box-shadow: inset 0 1px 1px rgba(0,0,0,.075);      -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;      -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;      transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;  }
<div class="form-inline">      <label for="admin-picker" class="label-admin">user type</label>          <select class="form-control" id="admin-picker" name="admin_privilege" required>              <option value="0">normal</option>              <option value="1">admin</option>          </select>  </div>


Comments

Post a Comment

Popular posts from this blog

resizing Telegram inline keyboard -

telegram's inline keyboard great feature lots of different use cases. inline buttons added list of items this: inline_keyboard = [[inlinekeyboardbutton(text="button", callback_data="button"), inlinekeyboardbutton(text="reset",callback_data="reset")]] inline_keyboard_markup = inlinekeyboardmarkup(inline_keyboard) update.message.reply_text("hi", reply_markup=inline_keyboard_markup) the above code adds 2 buttons each half width of chat screen. i know the normal keyboard button there resize_keyboard parameter somehow can used. my question is there way resize inline buttons ? example make full width or quarter width. unfortunately, can't now. :( you can suggest @botsupport , might add feature next version.
Read more

javascript - How to bind ViewModel Store to View? -

i'm pretty new ext js , trying embed multiselect inside panel . the viewmodel has stores property can see here: ext.define('test.view.controls.search.searchfiltermodel', { extend: 'ext.app.viewmodel', alias: 'viewmodel.filter', data: { title: '' }, stores: { test: { fields: [ 'id', 'name' ], proxy: { type: 'ajax', url: 'api/test', reader: 'array' }, autoload: true } } }); i bind in view this: viewmodel: { type: 'filter' }, layout: 'fit', border: 1, plain: true, scrollable: 'y', layout: 'fit', bind: { title: '{title}', }, items: { xtype: 'multiselect', scrollable: false, allowblank: true, ddreorder: true, bind: { store: '{test}' }, valuefield: 'id', displayfield: 'name' } ...
Read more

c - Why does alarm() cause fgets() to stop waiting? -

i playing around signals in c. main function asks input using fgets(name, 30, stdin) , , sits there , waits. set alarm alarm(3) , , reassigned sigalrm call function myalarm calls system("say pay attention") . after alarm goes off, fgets() stops waiting input , main fn continues on. happens if change myalarm set variable , nothing it. void myalarm(int sig) { //system("say pay attention"); int x = 0; } int catch_signal(int sig, void (*handler)(int)) { // when signal comes in, "catch" , "handle it" in way want struct sigaction action; // create new sigaction action.sa_handler = handler; // set it's sa_handler attribute function specified in header sigemptyset(&action.sa_mask); // "turn signals in sa_mask off?" "set sa_mask contian no signals, i.e. nothing masked?" action.sa_flags = 0; // not sure, looks aren't using of available flags, whatever may return sigaction(sig, ...
Read more