Below is the code I am using:
<select id="accessList" name="accessList" multiple="multiple" style="position:relative;left:5px;overflow-x:auto;width:200px">
<option value="36453" style="text-align:left;width:auto">TestGroupterminal121251221231321321321231321321231111111111111111111111111111111111111111111111111111111111111111111111111111111111111</option>
</select>When an option is selected, the complete value is not displayed.
Image below compares non-selected vs selected situation:
Unfortunately, it's not possible to achieve that (even though Roy's solution appears to be successful in Chrome and Edge).
But why?
Styling <select> elements has always been a challenge for browsers. This situation is just another example of that. To confirm, I tested your fiddle in various browsers (all up-to-date).
Here are the outcomes:
This is precisely why there are countless Javascript plugins available for styling select elements.
Make sure to have the display:inline-block attribute on the option element, it will cause the option to expand to full width when selected.
I hope this makes sense.
<select id="accessList" name="accessList" multiple="multiple" style="position:relative;left:5px;overflow-x:auto;width:300px">
<option value="36453" style="text-align:left;display:inline-block">TestGroupterminal121251221231321321321231321321231111111111111111111111111111111111111111111111111111111111111111111111111111111111111</option>
</select>I've encountered an issue with a web element I'm working on where the click function only triggers after the first click, rendering the initial click ineffective. Here's the code snippet in question: HTML: <div> <a href="#0" cla ...
I am encountering an issue where I consistently receive a 500 Internal Server Error message in the developer console for all CSS, image, and JS files: Failed to load resource: the server responded with a status of 500 (Internal Server Error) Despite doub ...
Typically, the parent element remains hidden by default. However, upon clicking a specific element, its child might gain a class called "selected". How can I check for this class and then display the entire list if it is present? <ul style="display: ...
Currently, I am trying to include the custom HTML5 attribute "data-metrics" in the span element within the ListItemText Material UI component. However, I am facing some difficulty achieving this as per the specifications outlined in the Component API Docum ...
Recently, I set out to implement an infinite scroll feature in Angular 2 using JavaScript code (even though it may seem a bit unusual to use JavaScript for this purpose, it's actually working perfectly). Initially, I was able to create an infinitely s ...
My task involves dynamically generating div elements with incremented class names. Each div contains a close button in the top right corner, and I need to hide a specific div when the close button is clicked. Example Code: var i=1; var newImageBoxdiv = $ ...
Encountering difficulties in achieving a visually pleasing document using knitr's export to pdf, I have resorted to converting the html file for my Markdown project to pdf through the wkhtmltopdf command line utility tool. A simplified Markdown docum ...
Hello there, I recently started delving into Node.js for the first time. My current project involves fetching data from MySQL and displaying it on my HTML page. However, when I try to access my website at http://localhost:3000/index.html, I encounter an er ...
I would like to fill my page horizontally with as many blocks as possible and center the result. My goal is to have a grid that can resize when the window size changes: wide window xxx small window xx x Is it possible to achieve this without using Java ...
While the window.performance object offers insights into the performance of the browser's last page load, such as DNS lookup times, I have not come across a similar feature for Ajax calls. The overarching issue I am aiming to address is the ability t ...
When data is copied from the clipboard and pasted into an html textarea, there is some interesting parsing that occurs to maintain the formatting, especially with newlines. For instance, suppose I have the following code on a page that I copy (highlightin ...
My goal is to create a pulsating effect using CSS box-shadow through jQuery. Despite my best efforts, the code I attempted failed to produce the desired smooth pulse effect with box-shadow. The code snippet I experimented with: <div class="one"> &l ...
I need to retrieve the value 7 from the HTML file <button id="buttonseven" onclick="buttonClick(7)">7</button> How can I capture this value using jQuery? $(document).ready(function(){ $('#buttonseven').click( ...
I'm in need of a select component similar to the one shown in https://i.sstatic.net/mo6NH.png The issue is that Material Angular doesn't have this specific component, so I opted to use the default HTML select inside my component. Everything was ...
Hello there, I need some assistance. Here's the scenario: I am working with a grid of six items. My goal is to have the first item in the grid become active by default. When the user hovers over any of the remaining five items, I want the active clas ...
In my grid view, I have a checkbox in the last column. I am trying to ensure that only one row can be selected at a time. <tr *ngFor="let permit of PermitDetails" (click)="GoByClick(permit)"> <td style="text-align: center">{{permit.TVA_BAT ...
I have developed a simple script for draggable elements, however, I am facing an issue. Whenever I move the mouse quickly, the element loses focus. Is there a way to improve the stability of the dragging functionality regardless of how fast I move the mou ...
Having just started learning HTML and CSS, I wanted to create a vertical navigation bar with sub-sub menus. After some research, I found a code snippet that I modified to suit my needs. Below is the updated code: #main-menu { background-color: #2E30 ...
Check out the JSFiddle for my page with the source code included: https://jsfiddle.net/g0kw1Le8/ Here is a snippet of the source code: <TITLE>Hallam FM - Best Variety of Hits</TITLE> <style> /* CSS styles go here */ /* End of CSS */ & ...
Have you had a chance to visit my website at ? I recently added a privacy alert in compliance with the new EU Regulation. However, I'm facing an issue where the alert is overlapping with some of my website components such as other DIVs and Revolution ...