search

formly-js / angular-formly-templates-lumx

LumX Templates for Angular-Formly
https://af-lumx.herokuapp.com/
MIT License
35 stars 13 forks source link

A way to override the way lx-select & multiple choices are displayed? #21

Open zaffranad opened 8 years ago

zaffranad commented 8 years ago

Hi,

When using lx-select with multiple choices selected, the value are displayed as expected in the header part of the control.

The problem is, when the size of the control is limited and a lot of values are selected, those values are displayed and wrapped to be listed in "column style". As a result, we have many values listed as a column and I would like to know if there is a way to override this behavior using CSS.

I tried to play with CSS classes lx-select__selected and cie, unsuccessfully.

Any help will be kind!

ShMcK commented 8 years ago

The first place to look would be at the lumx sass directory, it's a lot easier to understand than the css output.

Another thing you could do is generate your own custom templates. You can wrap the elements with whatever css classes you need. This is a lot easier than it sounds.

  1. git clone https://github.com/formly-js/angular-formly-templates-lumx.git
  2. Create a new custom-select.html file based on lx-select.
  3. Add your fields and schema to index.js
  4. npm install
  5. run webpack to compile your new templates to dist/
zaffranad commented 8 years ago

Many Thanks for your answer,

I'm not doing it now, but sure this will help me when I will!