change width of @Html.DropDownListFor dynamically based on the length of text

Asked Feb 15 '19 at 11:40

Active Feb 15 '19 at 11:52

Viewed 153 times

We all know that this works.

 @Html.DropDownListFor(m => m.SelectedProvisionalAward, Model.PreviousProvisionalAwardDecisions, new { style = "width: 250px;" })

But how do we make the something like this

   @{var width = @Model.PreviousProvisionalAwardDecisions.FirstOrDefault().Text.Length; }
   @Html.DropDownListFor(m => m.SelectedProvisionalAward, Model.PreviousProvisionalAwardDecisions, new { style = "width:"+ @width + "px;" })

What I want to achieve is width of the dropdown list extended to fill the full text displayed inside it. The obvious problem with this is that the length variable for a text with 42 symbols will output 42 but the width required to display that will be probably around 260px. Please assume that all items in the select list have the same length.

edited Feb 15 '19 at 11:52

asked Feb 15 '19 at 11:40

UncleDaveIsWatching

What if first option will contain 10 symbols and second - 100500 symbols? – yolo sora Feb 15 '19 at 11:47
good point but in my case they are all the same length. dont ask me why its a legacy system – UncleDaveIsWatching Feb 15 '19 at 11:49
How about resizing it dynamically through client-side code? Personally I will check length of the value in ` – Tetsuya Yamamoto Feb 16 '19 at 00:14
@TetsuyaYamamoto can you provide some codepen prove of concept please ? – UncleDaveIsWatching Feb 18 '19 at 11:49

change width of @Html.DropDownListFor dynamically based on the length of text

0 Answers0