Search jQuery

jQuery Forum

How to change select-option width?

in Using jQuery • 5 years ago

Hi all,

I have created a select option dropdown list. But when a text in the option is too long, the option box is longer then a select box ... I write here, because I think this is possible only with jquery ... thanks ...

here is an example
jsfiddle

it should put longer text to the new line ... but I dont know how

tnx for answers, indeed

Replies(8)

jakecigar

Re: How to change select-option width?

5 years ago

Selects don’t work that way. Not even with jQuery.

Many people recode their <select>s with a plugin like Select2 - The jQuery replacement for select boxes. And then they can change the CSS and maybe use a little jQuery to split a line.

JΛ̊KE

Takeshi

Re: How to change select-option width?

5 years ago

I found something like this ... what u say on it?

test

jakecigar

Re: Re: How to change select-option width?

5 years ago

It looks good. You should test in all the browsers you want to support. Including mobile devices.

JΛ̊KE

watusiware

Re: How to change select-option width?

5 years ago

I have never heard of SelectBoxIt. And it seems the last update from the author was 3 years ago, and most updates were 4-5 years ago, and so it might be ABANDONWARE.

I would suggest you use something POPULAR - like, e.g. Select2. Google is your friend. There are MANY plugins that make styled selects. Find one that is popular, currently-maintained, and produces the results you want.

Does SelectBoxIt accomplish what you want? Not sure what response you are looking for.

watusiware

Re: How to change select-option width?

5 years ago

I made some corrections to your Fiddle:

- You didn't load jQuery

- You loaded jQuery UI, which isn't needed, (and which itself requires jQuery, in any case)

- You need to use https: resources on jsFiddle

https://jsfiddle.net/z4fcnqjw/

But the plugin throws errors on the console. The GitHub repo for that plugin has a large number of open Issues, and it is apparent that nobody is maintaining the repo and fixing bugs.

Pick another plugin that works.

If you do intended to use jQuery UI, why not just use it's selectMenu widget?

https://jqueryui.com/selectmenu/

Takeshi

Re: How to change select-option width?

5 years ago

Hi,

I have just another way of how to do it. But ... you see ...
instead of useing select-option I maybe put option values to <div/> .... and with using jQuery do it like select-option ... what you say ... can it be like this?

jakecigar

Re: How to change select-option width?

5 years ago

It can be done. Anything can be done. It’s just strange to show the values instead of the texts. Why not just use the values as the text when you make the <select>?

JΛ̊KE

watusiware

Re: How to change select-option width?

5 years ago

All of the plugins for making nice selects put the text in <div> or <ul> or some other HTML markup, and then the plugin hides the actual <select>. You can then style the markup with CSS any way you'd like, if you are not happy with how the plugin styles it.

Just pick a plugin that:

- is popular

- is currently-maintained

- actually works

You picked an unpopular plugin that is not currently maintained, and doesn't seem to work correctly.

If you are using some UI framework - e.g. jQuery UI, Bootstrap, etc. etc. they all have a select widget built-in. Use it.

If you are not using a UI framework, why not try the plugin that Jake suggested?

https://select2.github.io/

Top Reply

Response title

Attachments

jQuery Forum

How to change select-option width?

Replies(8)

Re: How to change select-option width?

Re: How to change select-option width?

Re: Re: How to change select-option width?

Re: How to change select-option width?

Re: How to change select-option width?

Re: How to change select-option width?

Re: How to change select-option width?

Re: How to change select-option width?

Statistics

Tags

Actions