AngularJS: dynamic autocomplete field with scroll functionality

This is my HTML code:

<div class="form-group">
    <label class='control-label col-md-4' for='id_paymentCurrency'>{{'PAYMENT_CURRENCY' | translate}}</label>
    <div class='col-md-4'> 
        <div id="scrollable-dropdown-menu">
        <input type="text" class="form-control" data-trim-value="false" ng-trim="false" id ='id_paymentCurrency' ng-model="vm.data.paymentCurrency"  typeahead-append-to-body="true" required
        typeahead-editable="false"
        uib-typeahead="currency.code for currency in vm.getCurrencies($viewValue)"ng-disabled="disabled" />
    </div>   
  </div>  
</div>

Here is my CSS:

#scrollable-dropdown-menu .tt-menu {
   max-height: 150px;
   overflow-y: auto;
 }

Despite using AngularJS 1.x and the typeahead from angular-bootsrap, I am struggling to display the scrollbar.

You can access a demo of the issue here: http://fiddle.jshell.net/H7LA4/46/

cssangularjstypeahead.jsbootstrap-typeaheadtwitter-typeahead

Answer №1

Your current selector is causing the issue. Give this one a try:

#scrollable-dropdown-menu .dropdown-menu {
    max-height: 150px;
    overflow-y: auto;
}

You can verify that it works correctly by visiting this example

Answer №2

Everything seems to be in order. Take a look at the functional example provided below:

angular.module('myApp', ['ui.bootstrap']);

function TypeaheadCtrl($scope) {

    $scope.selected = undefined;
    $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', '49503', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
}

angular.module('myApp').controller('TypeaheadCtrl', TypeaheadCtrl);
#scrollable-dropdown-menu .dropdown-menu {
   max-height: 150px;
   overflow-y: auto;
 }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>

<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"  crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div ng-app="myApp">
    <div class='container-fluid' ng-controller="TypeaheadCtrl"> <pre>State: {{selected| json}}</pre>
    
        <div id="scrollable-dropdown-menu">
        <input class="input-large" type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8">
    </div>
    </div>
</div>

Answer №3

  #custom-scroll ul {
    max-height: 82px;
    overflow-y: auto;
 }

Implement this code for creating a scrollable list

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

The art of website creation: incorporating images into the background and using image tracing techniques

Trying to figure out where to find a solution for this. I had the idea of using a semi-transparent Photoshop design as a background and building on top of it, almost like tracing over it. This way, aligning things would be much easier. I remember Microsoft ...

htmlcssimagetrace

Does anyone know of a CSS/JavaScript framework that can be used to replicate the look and functionality of the iOS home

I'm wondering if there is a CSS/JavaScript framework that replicates the layout of an iOS home screen. I want to create a kiosk website with a grid layout similar to Android/iOS where apps can be displayed as icons. ...

javascripthtmlcssioshomescreen

ag-grid: Emphasize cells in a row when the value of a specific cell differs from the previous row's value

I am interested in implementing conditional formatting that compares each cell in a row to the cell in the previous row. If there is a difference, I would like the row to be highlighted. I am working with ag-grid in AngularJS TypeScript. Is it feasible to ...

angularjsag-grid

Click event doesn't trigger the 'else if' statement in jQuery

Having trouble with a button click issue. In the following code, when the button is clicked, it checks if the text on the button is "day". If so, it changes the background-color of the body to red and updates the button text to "night". I am struggling wit ...

javascriptjqueryhtmlcss

Pentagon Silhouette as Header Background

I am looking to add a unique pentagon shape to my page header background without editing the HTML. I am using SASS for styling purposes. Is there a way to achieve a design similar to this wireframe image of a pentagon with the middle point at the bottom, ...

htmlcsssass

Leveraging Flexbox and flexGrow in conjunction with Textfield

I am looking to use Flexbox to separate my components on the screen in a way that positions them correctly. I have 3 rows with textfields that need specific ratios related to the full width: row 1 : 2, 1, 1 row 2 : 1, 1 row 3 : 1, 1, 2 I attempted to ach ...

cssflexboxmaterial-ui

Is it possible to modify the color of a span element within a select dropdown?

Is there a way to change the color of a span to red within a select option in js fiddle? I am trying to modify the color of <span class="myError">This is a required field.</span> to red https://i.sstatic.net/nRF2c.png select{ color: green; ...

javascriptjqueryhtmlcss

Building a Nested/Tree Structure with an HTML Table Component in Angular.js

Exploring Tree Structure Expand and Collapse Options: The code is currently written using an HTML table. Tackling the implementation with ng-repeat is proving to be a challenge. Here is the data structure for each row: { "id": 1, "name": "Gro ...

angularjstreeview

Tips for automatically displaying user text based on its natural direction

Looking for a way to properly display user inputted text in Unicode based on its general direction, rather than defaulting to left-to-right. An issue arises when dealing with Arabic text as shown below, where the English word (4th) is split apart: اُر ...

csshtmlunicodebidi

What is the process for modifying two IDs simultaneously?

I'm struggling to include more than one ID in my CSS. I want the box border to have four different hover effects and three gradient buttons (e.g., play, pictures, etc.). Here is my HTML: <h2><a id="hover-1" href="">Hov ...

htmlcss

What is the best way to dynamically display CSS code from a PHP variable without needing to refresh the

I am working on a page that utilizes ajax and PHP for all functions. Within the tab content, users have the option to select colors using color pickers. Once a user saves their chosen colors, I store the new CSS code in the database. The CSS code is as ...

phpcssajax

The cascading style sheet does not have any effect on the layout of the tables within the

I am trying to apply a CSS style to give all tables on my HTML pages a 1px border width. However, for some reason, the borders are not showing up in my HTML files! What could be causing this issue? <!-- <style type="text/css"> --> body{backg ...

css

Struggling to get ng-cloak to function properly

I've encountered an issue with my custom directive where I am using {{}} to display values, but upon page reload, the {{}} placeholders are visible before the values are set. I attempted to resolve this by utilizing ng-cloak, but unfortunately, it did ...

angularjsngcloak

Icon alignment to wrapped text width has been successfully achieved with the implementation of Flexbox onto a single

I am facing an issue with text wrapping within a flexbox. I want the width of the flex item to always match the length of the wrapped text so that an icon placed next to the item stays adjacent to the text. However, due to text wrapping, there is a gap bet ...

htmlcssflexbox

The chosen date is not preserved within the select box

I have these specific items: $scope.items = [{"date":"2014-12-26T05:00:00.000Z","display":"6:00"}, {"date":"2014-12-26T05:15:00.000Z","display":"6:15"}, {"date":"2014-12-26T05:30:00.000Z","display":"6:30"}] When I use the following code: <select ...

htmlangularjsangularjs-ng-options

"Enhance your browsing experience with Chrome by automatically changing the background when

I am currently using Chrome with a CSS3 background. <h4 class="title-name clearfix"><a href="****************">Fairy Tail - LUCY</a> </h4> My issue is that when I hover my mouse over the title, the ba ...

htmlcss

Conflict arises between Angular $scope and the file input type

I have been attempting to convert a file into a byte array using AngularJS. The conversion process is successful and I am able to add the byte code and filename to an array ($scope.FileAttachments). However, there seems to be an issue with ng-repeat not wo ...

javascriptangularjs

Attempting to align a navigation block next to an SVG image

On my website, I envisioned a photoshopped image featuring a SVG picture of a book on the left and a "navigation block" on the right. The navigation block consists of links that redirect to other pages but it's not displaying properly. You can view th ...

htmlcss

header color scheme and dimensions

Hello, I've managed to get the menu working correctly on my website at www.g-evo.com/header.php. However, I'm now facing an issue with the size of the header. I'd like to shrink the grey area slightly so it aligns better with the logo, while ...

phpcssheader

Explore a JSON array within another JSON array

Here is a JSON format that I have: { "Project [id=1, dateDebut=2017-01-13, dateFin=2017-01-18, description=qsd, sponsor=qsd ]" : [ {"id":1,"title":"qsd ","description":"qsdqsd","dateFin":"2017-01-26"}, {"id":2,"title":"sss ","descriptio ...

javascriptangularjsjson