CODEWITHSUNDEEP
csstwitter-bootstrap
Manish Kumar
Manish Kumar

Reputation: 79

select field height in bootstrap form

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

Upvotes: 3

Views: 11065

Answers (5)

Arif Mohmand
Arif Mohmand

Reputation: 11

include this in abc.component.ts

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

Upvotes: 1

mmsilviu
mmsilviu

Reputation: 1451

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

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

Upvotes: 5

Kiran Bhattarai
Kiran Bhattarai

Reputation: 175

include this on your css it will fix the problem

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

Upvotes: 0

Muhammad Bilal
Muhammad Bilal

Reputation: 3008

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

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

Upvotes: 0

Pablo Darde
Pablo Darde

Reputation: 6402

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.

Upvotes: 0

Related Questions