Possibility to apply custom styling

[nitimmerman]

Hi there,

First of all, thanks for creating and publishing this component!

I'm using this component via the ng2-tag-input but i'm having issues with the styling caused by a this padding rule in your style.scss of the menu-item .ng2-menu-item { font-family: "Roboto", "Helvetica Neue", Helvetica, Arial;

padding: 0.3em 1.25rem

the dropdown looks like this by now:

I'm not totally sure what is causing this awfull layout but if i remove the vertical padding (via the developer tools in the browser) the scrollbar disappears and it looks normal again.

Do you have any recommendations on how to prevent this issue? Or could you style the menu item via sccs variables so i can override them?

Many thanks

[Gbuomprisco]

Hi @nitimmerman,

Thanks for reporting this and sorry for the delayed response but Github is not notifying me for new issues. What browser/OS are you using? Unfortunately you cannot overwrite it as it it's encapsulated.

[nitimmerman]

Hi @Gbuomprisco, No problem, I'm using Google Chrome. Just investigated a bit better and found that the available space is just a little bit too small. please see the attached screenshot.

removing the height=48px; or removing the height or line-height rules also removes the scrollbar but then the text gets top/bottom aligned.

[srkela]

Hi @Gbuomprisco,

Same issue here, seem to have something with Bootstrap CSS. When I remove Bootstrap from project, layout is not broken any more.

[roanhawkeye]

Hi guys,

You can override any css class from src/styles.css file, if your using angular-cli , I just did in order to increase the max-width for the dropdown-button of class '.ng2-dropdown-button ' .

hope this could help you.

[sebastientromp]

Hey, I'm having the same issue. I've tried overloading the .ng2-dropdown-button class in my parent component, but it isn't picked (I suppose it's because of encapsulation).

@roanhawkeye did you do anything else to make this work?

Alternatively, @Gbuomprisco, is there a way to remove encapsulation from the component?

Thanks!

[gangsthub]

@sebastientromp you can use global styles.

@nitimmerman, as long as you solved the issue by yourself, is it ok to close it?

[nitimmerman]

@gangsthub Currently I'm not using this control anymore. mainly because the styling doesn't play well with the styling of the rest of the application. So OK to me to close this issue