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 implement a MailChimp API form embed?

    How to uncover an image with css and jQuery

    JavaFX - Where is the css file for definition of StageStyle located or how can I change it?

    How to edit CSS styles in JavaScript?

    How do you create and run an html page directly from LocalStorage?

    How to toggle animate with css display:none

    How do I use CSS with simple form?

    How to read inline styling of an element?

    What is WebKit and how is it related to CSS?

    How to change css using jquery in a php loop

    Use CSS to show two div's with background image over a containing div

    How to make/render a font-awesome font “thin”? [duplicate]

    how to use {{$variable}} in css , Laravel 5.1 [closed]

    Creating a calendar control using CSS: How to auto layout events

    How to exclude particular class name in CSS selector?

    How to organize user's shares to easily add comments to that particular post?

    How to override group of css class?

    How do i move an image from left to right and right to left in javascript for infinite time?

    How to make double lines border in CSS, each line in different color, without using background image?

    how to add several td and tr in css

    CSS: How to position an to the middle of the parent element [closed]

    How to do the Height of html tag Body on 100% of browser window size?

    How do I use pseudo-selectors to change a “Home” button to an icon using just CSS?

    How to debug CSS with Firebug for an element that only appears when clicked?

    How to place 2 spans beside each other with full width with CSS

    WordPress TwentyTen menu: how to CSS-select sub-menus in a specific position?

    How to reduce CSS animation on mouse over?

    How do you change the modal link color in Foundation?

    How can I make sure that the footer will always be on the bottom of the last page when printing out?

    How to set css class for Rails date_select year select?