jQuery Autocomplete - struggling to pinpoint the exact location where the width of the suggestions div is being defined

I have successfully implemented jQuery Autocomplete, but I am facing an issue with adjusting the width. Currently, it is set to 268px in Firebug, however, I would like it to be 520px.

After checking the stylesheet, I couldn't locate where the width of 268px is being set. Even using !important to override 'autocomplete-suggestions' doesn't work.

Does anyone have any suggestions on how to change the width from 268px to 520px?

<div id="appendTo">
<div class="autocomplete-suggestions" style="position: absolute; width: 268px; max-height: 300px; z-index: 9999;">

Current CSS

.autocomplete-suggestions {
    background-color: #79BE28;
    border-radius: 7px;
    box-shadow: 0 4px 4px #CCCCCC;
    max-height: 650px !important;
    width: 520px !important;
}
.autocomplete-suggestions .autocomplete-suggestion {
    font-size: 12px;
    text-align: left;
    color: #fff;
    padding: 4px 15px;
    cursor: pointer;
}
.autocomplete-suggestions .autocomplete-suggestion:hover {
    font-weight: bold;
}
.autocomplete-suggestions .autocomplete-suggestion strong {
    text-decoration: underline;
}

.autocomplete-suggestion {
    z-index: -1 !important;
}
javascriptjquerycssstylesheetclient-side

Answer №1

One possible approach is to implement it in the following manner. (Referenced from Altering width of jquery-ui autocomplete widgets individually)

$('#input').autocomplete({  
   source: mysource,   
   open: function() { $('#autocomplete-suggestions').width(520) }  
});

Answer №2

In order to override the inline CSS, it cannot be done through a CSS stylesheet. Instead, you will need to modify the value using JavaScript. Make sure to change or delete the inline CSS value once it has been set by jQuery.

Test this method during the jQuery autocomplete event: open( event, ui )

$( ".autocomplete-suggestions" ).autocomplete({
  open: function( event, ui ) {
$('.autocomplete-suggestions .your-list-selector').css( 'width', '520px' );
}
});

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

Utilizing jQuery with variable assignment: A beginner's guide

Struggling to utilize a variable in jQuery? In the script snippet below, I set a variable "divname" with a value, but when using jQuery for fading out, it doesn't work as expected. What I really want is for the description to fade in when hovering ove ...

javascriptjquery

Navigating with Node.js: Understanding how to showcase the response data within a list structure

I am brand new to working with node.js and I'm looking to display the data I receive as a response on my webpage. Currently, I can see the output in my console. Is there a way to show this data on my actual page? GET Request: app.get('/bestell_ ...

javascriptmysqlnode.jsserver

Enhancing elements in Bootstrap Studio with borders

After exploring the interface of bootstrap-studio, it appears that there is no direct option to add a border to an element. However, this can still be achieved either through custom css code or by utilizing the predefined boostrap border classes. You may r ...

htmlcsstwitter-bootstrapfrontendbootstrap-studio

Sum text input in a table using jQuery

Whenever the add button is clicked in my code, a new row is generated in the table. I am looking to have each row update the subtotal value automatically when the quantity or price input fields are modified. HTML <table width="100%" border="0" > ...

jqueryhtml-table

Employ variables as a jQuery selector

let myLink = "#portfolio-link-" + data[i].pf_id; I am storing an ID in a variable. $("#pf-container-1").append(portfolio); console.log(myLink); $(myLink).append(function(){ $("<button class='btn btn-inverse' id='portfo ...

javascriptjqueryvariablesselector

The CSS overflow scroller trims the excess background color

Attempting to build a website, I encountered an issue with displaying a scroll bar. Despite using the CSS property overflow: auto, I faced another problem. Let me illustrate the issue through a simple example. I have an outer div with the style overflow: ...

htmlcssangular

Choosing multiple images by clicking on their alternative text with jQuery

I am currently working on a project that involves clicking on a thumbnail to enlarge the image and display its name (alt) below it. I have made progress, but there seems to be an issue where only one image is displayed no matter which thumbnail I click on. ...

javascriptjqueryhtml

Executing a function in Node-Express with a database connection at the beginning of the application

I am relatively new to Node.js and currently working on a Node.js - Express solution as a back-end for an AngularJS web application. My goal is to send an email when the MSSQL database query returns specific information. I have successfully implemented thi ...

javascriptnode.jsexpresstedious

Exploring Node's Configuration File Reading Process

Trying my best to provide all the details for my question. Being a newbie to NodeJS, I appreciate your kind guidance :D In the process of developing an application in Node, focusing on enabling users to view stats regarding their Plex Media Libraries. The ...

javascriptnode.jsexpress

Tips for displaying the Material UI Menu component on the left side instead of the default right side

Recently, I created a dropdown component using Material UI's Menu component. However, the default behavior of the menu is to open towards the right side. I actually need it to open towards the left instead. I attempted to modify its styling, and whil ...

javascriptreactjsmaterial-ui

Creating a multi-dimensional array in JavaScript with two different sizes

I'm struggling to find the best way to create a multi-dimensional array with varying sizes dynamically. Our user interface requires a pattern where there are rows of 4 items followed by rows of 3 items. This pattern should continue until all contents ...

javascriptarraysmultidimensional-array

What are the methods for incorporating reflection into three.js?

While working on a WebGL project using Three.js, I am aiming to incorporate a reflective cube surface that mimics the appearance of a mobile phone display. The surface should be able to reflect light while maintaining a black color scheme. ...

javascriptwebglthree.js

JavaScript and TypeScript: Best practice for maintaining an Error's origin

Coming from a Java developer background, I am relatively new to JavaScript/TypeScript. Is there a standard approach for handling and preserving the cause of an Error in JavaScript/TypeScript? I aim to obtain a comprehensive stack trace when wrapping an E ...

javascripttypescripterror-handlingstack-trace

Can a single volume control be used to manage the audio of multiple sources at once?

I am currently working on a project for my personal interactive video website. I am trying to figure out how to create one volume control that can adjust the audio for multiple tracks at once. Can anyone help me with this? So far, I have successfully crea ...

javascripthtmlaudiovolume

Finding the Middle Point of a Circle Using CEP/JavaScript

Using a specific set of calculations, I am able to create a circle in this manner: var yMinCir = height - 1515.80/2.667+8.5; var yMaxCir = height - 1545.80/2.667+8.5; var myCircle = page.ovals.add({geometricBounds:[yMinCir, 1312.63/2.667+8.5, yMaxCir, 1342 ...

javascriptadobe-indesignextendscriptadobe-extension

Tips for maintaining the hash fragment of a URL when setting up Single Sign-On (SSO) with Shibboleth

I successfully integrated Single Sign-On (SSO) on a single-page application using the Shibboleth Service Provider. However, I encountered an issue where when a user tries to access a bookmarked URL with a hash value, the hash part of the URL is lost after ...

jquerysingle-sign-onsingle-page-applicationsamlshibboleth

"Bower fetches and installs specific versions of packages from the repository

I'm currently using npm 3.3.6 and bower 1.6.8 on Windows 10. Whenever I attempt to install a package like jquery or framework7, it ends up downloading and installing an archived version of the package. Here's an example: > bower install jquer ...

javascriptnode.jsnpmbower

What's preventing me from tapping on hyperlinks on my mobile device?

I'm currently working on a website (saulesinterjerai.lt) and everything seems to be functioning properly, except for the fact that on mobile devices, the links aren't clickable and instead navigates to other layers. How can I disable this behavio ...

javascriptcssclicktouch-event

Ways to eliminate redundant older React components within a different library

Having trouble with material-ui in my React project as I encounter this error. Error: Invalid hook call. Ensure hooks are only called inside the body of a function component. Check for: Possible mismatch of React and renderer versions (i.e., React DOM) ...

javascriptreactjsmaterial-ui

Strange anomalies arising in frontend Apollo and GraphQL integration

Currently, I am working with nuxt.js and apollo. One issue I am facing is that when I click a button, it sends a request to the graphql server. The strange part is that the first time I click the button, everything works as expected. However, when I clic ...

javascriptvue.jsgraphqlnuxt.jsapollo