CODEWITHSUNDEEP
htmlcss
Peabrain
Peabrain

Reputation: 589

Select Div Tag: Options Longer than screen! How to auto-wrap text?

I have the following html code:

<select name="questionSelectedID" style="width: auto; position: relative; text-overflow: ellipsis;">
       //for loop generating options
 </select>

The result I get using this CSS is:

Resulting select div

My options are very long and they are cut off by the width of my screen. I though the css for this tag (see code snippet) should work. What code can wrap the options so they stay within the size of the window?

Note: my tags do not have any css to them.

Upvotes: 1

Views: 170

Answers (3)

Peabrain
Peabrain

Reputation: 589

variation on Alex Yepes answer. What ended up working was using styling that referenced the select tag:

.container select {

}

Simply using the the container div does not affect the width of the select (but it does affect the rest of the content within the div).

Upvotes: 1

Alex Yepes
Alex Yepes

Reputation: 1195

A good place to start would be to learn the box model (https://www.w3schools.com/css/css_boxmodel.asp). You need to wrap your elements inside a parent element, give that element a class, then give that class the properties to define how wide your container will be. Here is a small example: html

<div class=”container”>
    <select>
        //for loop generating options
    </select>
</div>

Css

.container {
    width: 100%; //takes the whole width of the element from left to right
    display: block; //occupies the whole element
}

Everything inside your div will not go beyond the width specified in your css

Upvotes: 0

Becky
Becky

Reputation: 5585

Do something like this in your js

    let el = document.querySelectorAll('option')
    el.forEach(x => {
      if (x.textContent.length > 25) // change the 25 according to your need
        x.textContent = x.textContent.substring(0, 25) + '...';
    })

Upvotes: 0

Related Questions