The options in Bootstrap select are not visible because the select element is too large

I am encountering an issue with a populated bootstrap select tag. Initially, it looks like this:

https://i.sstatic.net/1PWOf.png

It is working perfectly fine, displaying all items for selection.

However, when I decrease the height of the select using CSS, it appears like this:

https://i.sstatic.net/9dhOu.png The options are being populated but hidden below, due to the addition of this CSS:

#selectOption {
    font-size: 12px;
    height: 20px;
}

Can someone please advise me on how to make the options visible within this reduced height?

Providing the complete code for the select option and controller:

Select option

<div class="col-sm-3">
    <fieldset class="form-group">
        <label id="fieldTitle">Appointment Type</label>
        <select id="selectOption" ng-model="frieghtSale.apptType" ng-
          options="type.code as type.value for type in appointmentTypes" 
          class="form-control input-sm" required data-error="Please select 
          appointment type">
          <option value="" disabled>Select Appointment Type</option>
        </select>
        <div class="help-block with-errors"> {{freightSale.apptType}} </div>
    </fieldset>
</div>

AngularJS Controller

$scope.populateAppointmentTypes = function() {
        $.ajax({
            url: someURL/common/dropdown?typ=ApptType',
            dataType: 'JSON',
            success: function(data) {
                $scope.appointmentTypes = data;
              }, error: function(error) {
                console.log( "Could not populate appointment types: " + error );
            }
        });
    }

Answer №1

It seems that the default padding on selects in Bootstrap is causing this issue.

The padding is pushing your text to the bottom, making it not visible.

To fix this, simply add the following CSS:

#selectOption {
   font-size: 12px;
   height: 20px;
   padding-top: 0;
   padding-bottom: 0;
}

This adjustment should solve the problem for you!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

By including "on click" as a trigger, child nodes in the (_hyperscript) can be activated

Currently, my goal is to design a menu that keeps track of whether the user has expanded or collapsed a menu item and its sub-menu items. The issue I'm facing is that the "_"on click"" event gets "attached" to all child elements. I have sco ...

Is there a way to install angular libraries manually and ensure all dependencies are included without relying on bower or npm?

Currently, I am facing an issue with importing data from an Excel spreadsheet into my Angular application. I came across a helpful guide to import them into UI-Grid using xlsx.js which seems like a good starting point for me. However, my challenge lies in ...

Enhancing Security with Twilio for Two-Factor Authentication in Ionic 2

Can a 2-factor authentication system be set up using Twilio and Ionic 2? I've searched for tutorials without success. If it's not possible, are there any alternative methods available? Any assistance would be greatly appreciated. Thank you in adv ...

How to Use jQuery to Iterate Through a JSON Array and Add to an HTML Container Element?

I'm currently embarking on a personal project and have a query relating to jQuery and its usage in looping through a JSON array. Here is the JSON array I am working with: var thumbDir = [ '"https://www.location.com/1.jpg"', '"https:// ...

The background image does not appear to be displaying correctly on GitHub pages

I've encountered an issue where my svgs are not displaying as background-image or background on GitHub pages, even though they work fine locally. I utilized sass as a preprocessor for css, in case that detail is helpful. If anyone has insights on how ...

Displaying data from an array using jQuery or JavaScript loop

I have a scenario where I have multiple links on a webpage that have been converted into an array using jQuery. The idea is that when a user clicks on a "load more" button, I want to create a <ul> element with 4 images inside it (or fewer if there ar ...

Accordion content in UI Bootstrap not displaying upon clicking

I am currently working on implementing an accordion element, but I'm encountering an issue where clicking on one of the headers does not expand the content as expected. In fact, in my application, I can see the content briefly transition in and then i ...

Is it advisable to store JSON data in data params instead of making an AJAX call?

Previously, I stored my component data within the element's data parameter. Should I continue doing this or switch to using an Ajax call to fetch the data? 1. Using data parameter: <a href="#" data-core="{JSON-data}" id="item-1"> <a href ...

The fixed position feature seems to be malfunctioning

I'm attempting to incorporate the persistent header feature demonstrated in this tutorial: http://css-tricks.com/persistent-headers/ Here's My Code: <div class="col-md-4 col-sm-4 col-xs-12 postRight persist-area"> <h2 class ...

AngularJS selectChosen does not have built-in support for translation

<select chosen options="myOptions" ng-model="StatCode" data-placeholder="{{'PleaseSelect' | translate}}" ng-options="item[0] as item[1] + ' / ' + item[0] for item in myOptions" required>< ...

Assigning websockets to a global variable may cause them to malfunction

I'm utilizing websockets in conjunction with JavaScript and HTML5. Here is the code snippet I am currently working with: <input type="text" onFocus="so = new Websocket('ws://localhost:1234');" onBlur="so.close();" onKeyUp="keyup();"> ...

Using PHP and mysqli to upload binary data to a database through a form

I'm facing an issue while attempting to upload an image into a database as a blob using PHP with the mysqli extension. When I try to insert just the image name using a query, everything works perfectly fine, and a new row with the name is successfully ...

ng-controller does not function properly when assigned a variable as its parameter

Every time I attempt to insert a variable into the ng-controller parameter, I receive the following error message: " Error: [ng:areq] Argument 'curController' is not a function, got string <div ng-include="templates[selected-1]" ng-cont ...

Issues with autoplay not functioning in Chrome browser with Youtube iframe source

I have added an iframe code to my simple HTML page. I would like the video to autoplay when the page loads. It works perfectly in Firefox, but in Chrome, the autoplay feature does not work. Here is my code: <iframe width="420" height="345" src="https:/ ...

Send a single piece of data using AJAX in Flask

I have a very basic HTML form containing only one <input type='text'> field for entering an email address. I am trying to send this value back to a Python script using AJAX, but I am having trouble receiving it on the other end. Is there a ...

Horizontal rule located within a table but spanning the entire width

I wrote the following code: <table> {item.awards.map((obj,i) => <tbody> <tr> <td>Name</td> <td>:</td> <td>{obj.title}</td> </tr> ...

Vows: proceed to the subsequent error handling process

Can you explain how to properly call the next error function using promise chaining? I initially believed that placing a return statement within the error function would automatically trigger the next error function. //This code is executed in a contr ...

AngularJS version 1.0.7 has a mysterious absence of the locationProvider

I am currently working on an AngularJS 1.0.7 web application. In my app.js file, I'm attempting to implement $locationProvider for htm5Mode functionality. However, upon running the code, I encounter an error stating that $locationProvider is undefine ...

Tips for stopping the navigator from adding content to an HTML input in an Angular application

I am facing an issue with two input fields in my Angular project. These fields are supposed to take values automatically from the browser, and I have tried using the HTML autocomplete option without success. Here is a snippet of my HTML code: <div clas ...

Is there a way to eliminate the shadow effect appearing on product photos in BIG CARTEL?

While using the Luna theme on my Big Cartel store, I noticed that the products are hard to see on mobile devices because of the box shadow effect. I found a solution on a Big Cartel help page recommending to add a specific code to the CSS, but when I tried ...