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


Tags: html,css,angularjs,html-select

Problem :

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



Solution :

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


    CSS Howto..

    How do I make a table show a vertical scroll bar without explicitly setting the height?

    How to make sure items are added to the end of a moving list?

    Css styling without !important - how to do this?

    How to make div width almost 100%

    CSS - how to dry up?

    How to have a different “placeholder style” and at the same time a different “text-input style” in Rails with CSS?

    views_slideshow controls modification Drupal 7

    How may I stack multiple html/css buttons vertically along the center of the page?

    How can I use symbol fonts like marvosym in the browser?

    how to properly override CSS in external file

    php css how to change name color based on membership?

    How to run CSS text animation in a sequence. (one line of text after another)

    How to change the CSS on the last clicked div

    How can one fix a CSS3 graident background when using a box for content?

    How to show div property that is in a class with javascript

    How to write page specific CSS in backbone js

    How to make div fill the rest of viewport with keeping of aspect ratio (CSS or jQuery)?

    how to pass jquery variable value into css property value?

    How to Make Auto Size Horizontal Line DIV using css?

    How to enable real time CSS editing in chrome?

    how to set a radio button state to checked with css?

    How to use Sass mixin transition for applying transition-delay only?

    How to put a picture on top of other without using Positioning, Divs or Backgrounds?

    How to check if style ID contains certain css selectors?

    How to get tr:nth-child which has css applied

    how to apply css rule to the previous and the next element in HTML?

    How to create this type of element using XHTML & CSS?

    How to get table to overflow within a flex div?

    how to bold words within a paragraph in HTML/CSS?

    How to make SVG clip-path work correctly in Google Chrome?