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

Cannot render <Image> inside <Section> component

As a beginner in React, I am attempting to create an app following a tutorial. In my component, I utilized the figure tag but it's not showing up when inspecting element in Chrome. Here are the code snippets: The tutorial includes a div tag as a chil ...

javascripthtmlcssreactjs

Generate the URL based on the JSON feed

Can someone help me figure out what I'm doing wrong here? I'm attempting to create the image URL using the flickr.photos.search method now (I need to show images close to the visitor's geolocation), it was working with groups_pool.gne befor ...

javascriptjqueryjsongetjsonflickr

Recursively toggle child elements using JQuery

My knowledge of JQuery is limited, so here's the issue I'm facing. Below is an example of the HTML structure: <ul class="first-class"> <li class="second-class"> <a href="#_"> <i class="fa fa-plus"></i& ...

javascriptjquerytogglechildrensubdirectory

Node.Js Web Scraping: How to Extract Data from JavaScript-Rendered Pages Using Request

I am looking to extract specific content from Google search results that is only visible in browsers, potentially due to Javascript being enabled. Specifically, I am interested in scraping the Knowledge Graph "People also search for" information. Currentl ...

javascriptjquerynode.jsnode-request

Acquiring JSON data through the use of jquery and php

Below is the HTML code I am working with: <div id="myDiv"> <p class="readMore"></p> <p class="readMore"></p> <p class="readMore"></p> </div> This is the jQuery function I am using: UPDATE <script> ...

phpjqueryajax

Steps for obtaining the current state array post re-ordering column in Angular datatables

I am facing an interesting scenario where I can successfully retrieve the current state of an array of columns using pure JS + jQuery, but unfortunately, the same approach does not seem to work in Angular 12! Despite going through the documentation for Ang ...

javascriptjqueryangulardatatables

Ensuring the Line Breaks in CSS and JavaScript to Easily Modify the Style

Is there a way to determine when a line will break so I can apply different styles? The design team needs 3 buttons in a grid (3 columns) with specific sizes. They want buttons with content that breaks onto the next line to have a border-radius of 13px, w ...

javascriptcssreactjs

The transformation of a class-based component into a functional one is proving to be ineffective

I am attempting to transform my class-based component into a functional one, but I am struggling with passing two parameters in one onClick function without relying on set state. Additionally, I want to avoid creating multiple extra functions as it would i ...

javascriptreactjs

The Strophe.muc plugin and backbone improper binding of callbacks

Following the initial group message, I'm experiencing an issue with the strophe.muc plugin not responding to subsequent messages. Although I receive the first presence, message, and roster from the room, any additional messages and presence stanzas do ...

javascriptbackbone.jsstrophe

Combining broken down values within a loop

Take a look at this image, then review the code I've provided: function addNumbers() { var inputList = document.getElementById("listInput").value.split(" "); for(i = 0; i <= inputList.length; i+=1) { document.getElementById("resul ...

javascripthtml

When the menu active item is clicked, the header will automatically scroll to the top

I've implemented a sticky header using CSS and JavaScript along with a mega menu. However, I've encountered an issue where when scrolling to the bottom and clicking on the "more" link in the dropdown, the page scrolls back to the top. This is the ...

javascriptcss

Perform a postback within a jQuery UI dialog box

Despite many solutions being available from various Stack Overflow users, none seem to be effective for me. In aspx <asp:Button ID="btnConfirm" ClientIDMode="Static" runat="server" Text="Confirm" OnClick="btnConfirm_Click"/> <script type="text/ ...

jqueryasp.netjquery-ui-dialog

Preventing users from inputting the symbols "+" or "-" in a React JS input field

Essentially, the input field should only accept values between 1 and 999 Input Field : <input type="number" value={value} onChange={this.props.onViltMaxUserChange} min="0" max="999" /> onChange : onViltMaxUserChange = _.throttle(e = ...

javascriptreactjsinputnumbers

Ways to smoothly conclude a loading animation in real-time

I have a unique challenge of creating a loading animation using Adobe After Effects instead of CSS. The main goal is to develop an animation that continuously loops, but when the loading process stops, it ends with a distinct finishing touch. For instance, ...

javascriptloopsanimationloadingafter-effects

Effective HTML element placement with CSS styling

My HTML code includes a form containing a table. Take a look: This is the Code I'm Using: <html> <head></head> <body> <form onsubmit="" id="form1" action="" method="post" name="form1" style="position: rela ...

htmlcssweb-applicationsxhtml

Sharing data with external domains and retrieving HTML output using JavaScript

When a browser sends a POST request and expects an HTML page result from JavaScript, problems arise if there is no Access-Control-Allow-Origin in the server response. Unfortunately, changing anything on the server side is not an option. If a human clicks ...

javascriptjqueryhtmlasp.netajax

using the newquestion variable later in the function

In the Vue.js code snippet below, there is a variable named newQuestion that is passed to the function getAnswer like this: this.getAnswer(newQuestion). Further down in the methods section, particularly at this line getAnswer: _.debounce(, I would like to ...

javascriptvue.js

Using Vue.js to dynamically populate all dropdown menus with a v-for loop

Getting started with vue.js, I have a task where I need to loop through user data and display it in bootstrap cols. The number of cols grows based on the number of registered users. Each col contains user data along with a select element. These select ele ...

javascripthtmlvue.js

Using the axios response to assign data object in VueJS

When making an API call, I am receiving an expected error. While I am able to log the error message in the console, I am encountering issues trying to set a vuejs data variable with the response. Can anyone point out what I might be doing incorrectly? ...

javascriptvue.jsvuejs2axios

Guide to retrieving a byte array from a server using JavaScript and converting it into a downloadable PDF

I am attempting to convert a byte array received from the server and download it as a pdf. The download functionality is working, but unfortunately, the file appears to be corrupt. My approach involves using JavaScript and vue.js. Function responsible fo ...

javascriptc#vue.js