What is the best way to ensure the options/choices div reaches its ideal width?

Check out my StackBlitz project that I've set up

In the styles.css file, you'll notice that I defined a fixed width of 650px for the option dropdown div, which is currently working fine

@import '~bootstrap/dist/css/bootstrap.min.css';

.my_choices_inner {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  padding: 0;
  margin-top: -2px;
  min-height: 44px;
  overflow: hidden;
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
  word-break: break-word;
  width: 650px;
}

.choices {
  margin-bottom: 0;
}

However, I would prefer if the width could dynamically adjust based on the length of options in the dropdown

Setting the width to "100%" doesn't cause any overflow issues. I've also tried "fit-content" and "auto" without success

Is there a way to achieve this without the text wrapping and everything staying in one line?

javascriptcsstwitter-bootstrapbootstrap-4choices.js

Answer №1

After making some revisions to the code, please take a look at the link provided below:

https://stackblitz.com/edit/js-ab12cd?file=style.css,index.js,package.json

I have made adjustments to the CSS code in order to create a more dynamic select div.

In addition, I have included an extra dummy value option for testing purposes. Feel free to refresh the page and give it a try. Kindly review the example link above and inform me if you encounter any issues.

UPDATE: Here is the crucial part of the modifications made:

.choices__list--dropdown,
.choices__list[aria-expanded] {
  word-break: break-word;
  width: max-content;
}

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

Conceal a button using an AJAX POST request

I'm encountering an issue with my Ajax post where I am trying to disable the button used to submit data. I've reviewed my code and it seems accurate, but the button is not getting disabled. I attempted using $("#refreshButton").attr("disabled", t ...

javascriptajaxjquery

Make the div stretch across the entire width of the page, excluding the width of a fixed div located on the right side, without needing to set a margin-right property

I've been struggling to find a solution for my wiki development project. My challenge involves designing a page layout with a fixed-width sidebar on the right, while ensuring that content to the left of the sidebar adjusts its width accordingly. I wan ...

htmlcsswidthinline

Move the scss .map file to a separate directory within Intellij IDEA

I have a specific structure set up in my styles folder within the project directory. It includes three subfolders: css, scss, and css-maps. My goal is to automatically update a corresponding CSS file in the css folder and a .css.map file in the css-maps fo ...

cssintellij-ideasass

Customize your click event with conditional styling in React

When the onClick event is triggered, I am attempting to modify a class by calling my function. It appears that the function is successfully executed, however, the class does not update in the render output. Below is the code snippet: import React from &ap ...

javascriptcssreactjs

Is it possible for Cypress to execute test files that are imported from outside of the Cypress folder

Currently, I am developing an E2E test framework using Cypress and encountered an issue while trying to import spec files from locations outside the traditional Cypress directory structure (which includes directories for fixtures, integration, plugins, and ...

javascriptnpmimportnode-modulescypress

Move the modal dialog so it appears closer to the top of the page

I am facing a challenge with my jQuery modal dialog. While it is loading properly, I am restricted to using an older version of jQuery (1.12.4) and cannot upgrade it. My goal is to center the modal close to the top of the page, similar to how it is positio ...

javascripthtmljquerycss

Display content in a div after the page is fully loaded with either a placeholder or animated loading

Hello everyone, this is my first post on here. I am relatively new to PHP, so any help or advice would be greatly appreciated. ...

javascriptjqueryajax

Accessing a subcollection with DocumentSnapshot in Firebase using JS9

Just had a quick question. Is anyone familiar with how to achieve something similar using Firebase JavaScript v9? Essentially, I have a `userDoc` that is a DocumentSnapshot and I need to access a sub-collection with the document snapshot. Here's the c ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

Unable to utilize the three.js texture loader within a JavaScript worker environment

I'm currently experimenting with three.js to load textures. Here is the snippet from my main.js file: const worker = new Worker('../workers/worker.js', { type: 'module' }); And this is a simplified version of worker.js that ...

javascriptthree.jsweb-worker

The button fails to trigger the AJAX request

I've developed a form that includes a QR code generator. The QR code is generated as an SVG, and below the code is a download button that should trigger an AJAX call to my PHP script when clicked. However, the download button does not seem to initiate ...

javascriptphpjqueryajaxsymfony

Obtain facial rotation using Three.js

In my code, I am calculating the intersections of mouse clicks with Three.js as follows: myVector.set( (event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5); myVector.unproject(myApp.camera); myRay.se ...

javascriptthree.js

What is the correct way to import the THREE.js library into your project?

I recently added the three library to my project via npm. Within the node_modules directory, there is a folder named three. However, when I tried to import it using: import * as THREE from 'three'; I encountered the following error: ReferenceEr ...

javascriptnode.jsnpmthree.jsnode-modules

What is the best way to transfer the API Response Time from one Fetch function to a separate asynchronous function?

After successfully obtaining the API Response Time (duration) using the 'makeAPICall' function, I am now faced with the task of passing this duration variable value to another asynchronous function. Can anyone assist me in finding a solution to a ...

javascripttypescriptapifetch-apitestcafe

Is it possible for nextAll() to exclude a specific parent element and search only for children inside that parent?

Below is the structure of my html ajax form: <form name="vafForm" id="vafForm" method="GET" action="urlfor ajax"> <input type="hidden" value="0" id="vafProduct"> <select class="catSelect {prevLevelsIncluding: 'cat'} c ...

javascriptphpjqueryajaxselect

Migration processes encountering delays due to running nodes

When running migrations in Node, I am encountering a timeout error. The specific error message is: Error: Timeout of 2000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves. Here is the ...

javascriptnode.jsknex.js

Loading times for the Polymer Project are sluggish

The website design is very appealing. However, it seems to be loading quite slowly even on Google's servers. Is there a way to speed up the initial load time of the Polymer site? Additionally, there are numerous HTTP requests being made; is there a wa ...

javascripthtmlcsspolymerstyling

React hitting recursion limit due to excessive shouldComponentUpdate checks

I'm currently developing a real-time updating dashboard using React. The data for the dashboard components is fetched via an Ajax call and then passed to each component successfully. However, I encountered an issue with one specific component that re ...

javascriptajaxreactjs

How can JQuery be used to implement "scrolling" buttons and automatically update the main page with fresh data?

I am attempting to achieve the following: 1 - Use jQuery to update index.html with the content from output.html (only update when there are differences in data, and ideally only update the parts that have changed). 2 - Add two buttons in the header ...

javascriptjqueryhtmlcss

Tips for updating values in an Angular model and pushing it to an array with the specified index

I am currently facing an issue with my Angular Model as I attempt to add it to an array in order to generate repeated fields. The purpose of this array is to then be looped through in order to create HTML fields within a component. However, during the proc ...

javascriptarraysangularangularjs

Error with setting innerHTML property of a null nested div

This issue arises when the element is referenced before the DOM has completely loaded. To combat this, I have ensured that the necessary script runs only after the window has finished loading. Interestingly, if the getElementById() call is for a standalon ...

javascripthtml