AngularJS / CSS - How to set the width of a select box to a value from $scope?

Question

I've got two select boxes. The first one is changing the entires of the second one. The second one always adjusts it's length to the longest of the actual entries. But it looks wuite ugly if the width always changes when i select another item of the first box.

Is it possible to set the width of the second box to a fixed value, calculated by the longest element of the whole (non-filtered) second box element list? In the scope I can calculate the number of characters of the longest element. Can I adjust this to the width somehow?

I already tried (for testing)

<select ... style="width:{{getMaxLength()}}px" > </select>

returning the number of characters by the method getMaxLength() in the scope. But it didn't change anything.

Did anyone already try this? Setting the size with ng-attr-size worked, but it's the height which does help me nothing.

I'd appreciate every hint or idea! jana

Addition:
My example did not work with the answers because I didn't give the a "name" property. Then the answer from Muhammad Reda worked fine and I'm sure most of the other ideas will work as well. I found out by very thoroughly comparing Muhammads plunker with my code. That was the only difference.

Sorry, I'm not used to fiddle so far. If there's time, i'll create one. — Jana
– Jana, Commented Nov 17, 2014 at 13:30

Muhammad Reda · Accepted Answer · 2014-11-17 13:35:18Z

2

You can use ngStyle

From documentation:

The ngStyle directive allows you to set CSS style on an HTML element conditionally.

Example:

<select ng-style="{'width': getMaxLength() + 'px'}"></select>

Plunker

edited Nov 17, 2014 at 13:35

answered Nov 17, 2014 at 13:00

Muhammad Reda

27.1k14 gold badges100 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jana Over a year ago

The sytax seems to be okay (wasn't marked as a misstake) but it has no effekt. Do I have to install some packages beneath angular main package or something?

Muhammad Reda Over a year ago

Try to print the value of the color inside getMaxLength() to the console.

Jana Over a year ago

The value which is calculated by getMaxlentgh() is 500 and it get's printed on the console as well as printed in the html UI when I put it there as plain text with {{getMaxLength()}}. So the method and the value are correct...

Jana Over a year ago

Now i tried a fixed String like "width: 500 px" as a scope variable, just like in your plunker. I can print it in the UI, but as ng-style it doesn't have any effect on my UI...

Muhammad Reda Over a year ago

Let us continue this discussion in chat.

|

Muhammad Reda · Accepted Answer · 2014-11-17 13:07:34Z

1

Use this ng-style="{'width': {{getMaxLength()}} + 'px'}" instead of style element

edited Nov 17, 2014 at 13:07

Muhammad Reda

27.1k14 gold badges100 silver badges107 bronze badges

answered Nov 17, 2014 at 12:59

firecast

1,0482 gold badges11 silver badges20 bronze badges

1 Comment

Jana Over a year ago

This syntax seems to be wrong... my editor marked it as a misstake 8and it knows angular), it also didn't help much, see also the answer of Muhammed Reda.

Kalhan · Accepted Answer · 2014-11-17 12:59:18Z

0

ng-style="customStyle" ..

and in your controller,

$scope.customStyle = {'width':$scope.getMaxLength()}

answered Nov 17, 2014 at 12:59

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

1 Comment

Jana Over a year ago

I used this and it seems to have no effect either :-( I use newest version of firefox...

Collectives™ on Stack Overflow

AngularJS / CSS - How to set the width of a select box to a value from $scope?

3 Answers 3

6 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related