How can I set the height of an option?-CodePudding

I am new to front-end development and have been tasked to rework some old code and migrate to angular. Currently, I have a list of options but the box is larger than needed. How can I adjust the position/height to match the old layout?

current implementation:

Code:

<div>
 <div class="row">
 <div class="col-md-2">Match Type</div>
 <div class="col-md-4">
  <div>
    <select class="form-control" [(ngModel)]="singleRecordMatchBean.matchType">
      <option value="undefined" [disabled]="true" >---Select---</option>
      <option *ngFor="let object of defaultOptions.MATCHES" [ngValue]="object.code" 
      >{{object.desc}}</option> 
    </select>
  </div>
</div>
<div class="col-md-2" style="color: red; font-size: 0.93em;white-space: pre-wrap;">*Required</div>

desired outcome:

Thanks in advance!

CodePudding user response：

Design the option element by Height and width in css.

option{
      height: 10px;
      Width: 250px;
}

CodePudding user response：

Target the select element via css, (add another class to the html element and reference it in the CSS file) then set height: desiredvalue. Check if min-height is set to the element, if so, unset it.

Be aware that the form-control class is already applied, which is bootstrap style, that might interfere with your style. Inspector tools will be of help here.

CodePudding user response：

You can set the height and width of your object in the CSS file

#dropdown{
    width: 250px;
    height: 25px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        <div class="row">
        <div class="col-md-2">Match Type</div>
        <div class="col-md-4">
         <div>
           <select id="dropdown" class="form-control" [(ngModel)]="singleRecordMatchBean.matchType">
             <option value="undefined" [disabled]="true" >---Select---</option>
             <option *ngFor="let object of defaultOptions.MATCHES" [ngValue]="object.code" 
             >{{object.desc}}</option> 
           </select>
         </div>
       </div>
       <div class="col-md-2" style="color: red; font-size: 0.93em;white-space: pre-wrap;">*Required</div>
</body>
</html>