How can I stop Html.ListBoxFor from truncating the overflow text of the selected item?

I am facing an issue with a list of phone accessories where the combination of material number and name is too long, causing it to exceed the width of the listbox (Html.ListBoxFor).

My solution was to add horizontal scroll to the list by using the overflow property. Initially, I tried implementing this within the element itself in Chrome, but then decided to add it directly in the code.

@Html.ListBoxFor(model => model.myId, MyModel, new { @id = "my-id :)", @class = "form-control input-md", @size = 9, @style="overflow: auto;"})

The horizontal scroll worked perfectly as planned, until I selected an item. The selected item was cut off at the edge of the original listbox.

You can view the problem in action on this fiddle: https://jsfiddle.net/yf0cgm9x/. When long names are selected, they get truncated.

Has anyone encountered a similar issue before?

c#htmlcssasp.net-mvc-4

Answer №1

Experience this:
    <div>
<div style="width:200px; padding-right:10px;border: 3px solid #73AD21;">

<select class="form-control input-md" id="available-accessories-box" multiple="multiple" name="SelectedAccessoryId" size="9" style="width:200px; overflow:scroll; display: block;">
<optgroup label="Headset">
<option style="overflow:wrap;" value="1">[11111111]aaaa</option>
<option style="overflow:wrap;" value="48">[22222]TOOOOOOO LOOOOONNNNNGGGGG1</option>
<option style="overflow:wrap;" value="50">[333333333]TOOOO LOOONGGGGG3</option>
<option style="overflow:wrap;" value="208">[444444]Hheadset5</option>
<option style="overflow:wrap;" value="226">[5555555]real headset by MSI</option></optgroup>
<span class="field-validation-valid" data-valmsg-for="SelectedAccessoryId" data-valmsg-replace="true"></span>

</div>

</div>

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

Steps for assigning innerHTML values to elements within a cloned div

Currently, I am setting up a search form and I require dynamically created divs to display the search results. The approach I am taking involves: Creating the necessary HTML elements. Cloning the structure for each result and updating the content of ...

javascriptjqueryhtml

methods to locate the parent element of an element with selenium

<button class="wpO6b ZQScA" type="button"> <div class="QBdPU "> <svg aria-label="New Message" class="_8-yf5 " fill="#262626" height="24" viewBox="0 0 44 44" widt ...

pythonhtmlseleniumselenium-webdrivernested

Updating the video tag's source attribute using JSON information

I am in the process of creating a unique video player using HTML and Javascript that will sequentially play a set of videos until all 6 have been displayed. The URLs for these videos are stored within an array that is mapped in a .json file named clips.jso ...

javascripthtmlajaxjsonhtml5-video

JavaScript has the ability to manipulate the width of an element by using methods to both retrieve

I have a unique situation where I need to dynamically adjust the width of a ul list element based on the text content inside it. Specifically, I want the width of the ul list to be equal to the width of the first list item, which can change frequently. My ...

javascripthtmlcss

Opting for <button> over <a>

I am currently working with ReactJS in conjunction with a Bootstrap Nav Bar. Bootstrap utilizes an <a> tag for the navigation buttons. I am aiming to have the buttons scroll down to a different component on the page without resorting to using an href ...

javascripthtmlcssreactjsbootstrap-4

store user settings in local storage

After writing some code with a link that toggles text visibility upon click, I now want to incorporate saving this state in web storage so that it persists upon page reload. As a beginner in JavaScript and HTML, this task has proven challenging for me. Th ...

javascriptjqueryhtmllocal-storage

Capturing all subdomains dynamically using simple HTML/jQuery techniques

Currently, I am working on revamping an older web page with a monolithic structure. In my code, I have implemented a switch statement that evaluates the URL's pathname and then executes various functions to display or hide elements on the page. switc ...

javascriptjqueryhtmlroutesweb-frontend

What is the process for converting an Excel file into a 2D array during deserialization

Currently, I'm working with an Excel spreadsheet in which all the fields are strings. My goal is to extract and de-serialize all the data from this file into a 2D array or matrix. Does anyone have any suggestions on how I can begin this process? ...

c#arraysexceldeserialization

The burden of a CSS or jQuery file

Having trouble finding the right keyword to search for the answer to my question on Google, I've decided to ask it here instead. If I only use a portion of the classes or IDs from Bootstrap CSS or any other framework in my HTML file, will all the CSS ...

cssperformance

Add the AJAX response to a div element when the submit button is pressed

Working on a WordPress project involving an AJAX call, I need to return the result of a row to a div with the ID #hero. The challenge is that since the result is inside a for loop and each row has its own hero div, I want the result to be returned to the c ...

phpjqueryhtmlajaxwordpress

Encountering a problem in vue.js: "The instance is referencing 'step1_category' which is not defined as a property or method during render"

I encountered an error that says, "Property or method 'step1_category' is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializin ...

htmlvue.js

Determine the current connection status of a user within a C#/.NET application

I am currently developing an application that enables users to create a profile ... Due to security concerns, I aim to prevent multiple logins from the same user. Essentially, if a user is logged in from one device, they should not be able to login from a ...

c#mysql.net

jQuery for creating single-page websites with horizontal scrolling navigation

I'm attempting to implement a horizontal scrolling section on my webpage. Although this is a basic function that I have successfully executed multiple times in the past, I seem to be overlooking something rather obvious. There seems to be an issue w ...

javascriptjqueryhtmlcss

What is the best way to interact with parent elements inside an iframe?

I'm working on a fresh image uploader where I aim to place the file input in an iframe and display the uploaded images on the parent page. How can I achieve access to the parent elements from within the iframe? Any examples would be greatly appreciate ...

.netasp.netjavascripthtmlajax

Modify the onerror function of the image tag within the onerror function

Here is a way to display images using the img tag: If 1.jpg exists, show 1.jpg. If not, check for 2.jpg and display it if it exists. If neither 1.jpg nor 2.jpg exist, display 3.jpg. <img src="1.jpg" onerror="this.src='2.jpg'; this.oner ...

javascriptjqueryhtml

Display a Datagrid table featuring numerous column headers across multiple pages using asp.net

Unable to provide more details on the title, please refer to the links below. Using DataGrid (not GridView) in ASP.net with VB code. Current display in my datagrid: view picture1 here, I want it to be like this view picture2 here The goal is to split my ...

cssasp.netvb.netgoogle-chromedatagrid

Tips for connecting a Vuetify v-menu to its parent element within a list that can be scrolled

Within the project I am working on, there exists a scrollable inventory of items. Each item possesses a menu that is triggered open when the respective activator button is hovered over. By default, v-menu components are connected to the v-app element, ser ...

htmlvue.jsvuetify.js

What is the best way to design a polygon-shaped responsive div?

I've been attempting to design a unique layout with a pentagon-shaped div, however, I'm encountering some challenges. Despite using SVG for the shape, it does not display correctly in Firefox. Additionally, I need the div to be responsive and sca ...

htmlcsssvgresponsive

Creating a reusable method in C# to add data to an MS Access table

A function has been created to insert three items into a MS Access table using C#: public static void addDataToTable(string connectionString, string tableName, string[] columns, string[] values) { var connection = new OleDbConnectio ...

c#sqlms-access

Modify the color of the active button within the Bootstrap Links and Buttons element

Greetings! I am currently utilizing Bootstrap's Links and buttons My objective is to modify the color of the active button highlighting, which is set to white by default, to a different color: <div class="container"> <div class="row"> ...

htmlcsstwitter-bootstrap