select field height in bootstrap form

user_7783389 0
Viewed 8609

size of the select field is affecting by a bootstrap file as shown in the screenshot and i'm unable to find out how to solve this problem. 

    <form>
       <div class="form-group">
       <label for="name" class="labstyle">Enter Your Name</label>
       <input type="text" class="form-control" name="name" size="20" 
        maxlength="40" placeholder="Enter You Name" required autofocus>
       </div>
           <div class="form-group">
        <label for="sell" class="labstyle">Chose Your Wish:</label>
       <select class="form-control" id="sell">
       <option value="0" hidden="hidden" disabled="" selected="">Chose Your 
        Wish</option>
       <option value="morning">Good Morning</option>
        <option value="night">Good Night</option>
     </select>
      </div>  
      <div class="form-group">
         <label for="message" class="labstyle">Message</label>
         <textarea class="form-control"  name="message" rows="3" cols="40" 
    placeholder="Optional" maxlength="92"></textarea>
      </div>
      <button type="submit" class="btn" id="btncustom">Create</button>
     </form>

Screenshot

twitter-bootstrap css
5 Answers

Adding the following will calculate correctly the height in this situation.

select.form-control:not([size]):not([multiple]) {
  height: auto!important;
}
user_42993530

include this in abc.component.ts

styles: [`
:host /deep/ select.form-control:not([size]):not([multiple]) {
  height: auto!important;
  padding: 0.375rem 0.75rem;
}`]
user_78007390

Ok, inside your custom select.form-control class, try to decrease the line-height property for something like that:

line-height: 1.0;

or maybe a small value.

user_17036960

Add this class in your custom style sheet (css file).

.form-control{
    height:30px;
    line-height:30px;
    padding:6px;
    }
user_71867390

include this on your css it will fix the problem

#sell.form-control{
height: 46px important!;
}
user_62729990
Related