Search
 
SCRIPT & CODE EXAMPLE
 

CSS

ng-multiselect-dropdown custom css

//Angular by default adds some _ngcontent-xx to your component CSS file
//so that it won't conflict with other components.
//To solve your problem you need to add below CSS in your global style.css file or
//another way to make your component as encapsulation: ViewEncapsulation.None meaning its CSS
//won't append default classes of Angular.

//Solution 1: Add in global stylesheet.
style.css
.multiselect-dropdown .dropdown-btn {
    display: inline-block;
    border: 1px solid #adadad;
    width: 100%;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.1;
    text-align: left;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border-radius: 4px;
}

//Solution 2 Make component ViewEncapsulation.None
component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  encapsulation: ViewEncapsulation.None // Add this line
})
export class AppComponent  {

}
Comment

ng-multiselect-dropdown custom css

// you can override css of any node module or library by :host and ::ng-deep.

:host ::ng-deep .multiselect-dropdown .dropdown-btn {
	display: inline-block;
	border: 1px solid #adadad;
	width: 100%;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.1;
	text-align: left;
	vertical-align: middle;
	cursor: pointer;
	background-image: none;
	border-radius: 4px;
}
Comment

PREVIOUS NEXT
Code Example
Css :: background with three line color css 
Css :: how to create polaroid effect in css 
Css :: highchart add font family 
Css :: using tinymce with tailwind css 
Css :: values play state animation css 
Css :: Loop Over Array of Objects and Combine them if they have similar keys 
Css :: wpa avoid reload with swipe 
Css :: sass immediate child 
Css :: css remove line from link 
Css :: scss loop 
Css :: css absolute in absolute 
Css :: how to make button appear on hover 
Css :: scss import another file 
Css :: hide scrollbar 
Css :: how to change what your cursor looks like 
Css :: scss extend from another css file 
Css :: css hover after 
Css :: Bootstrap open modal move page content 
Css :: animate a position css 
Css :: css hide after seconds 
Css :: animation in css 
Css :: target element pseudo-classes 
Css :: text in one line css 
Css :: css style link 
Css :: css: custom font and color 
Css :: apply style to only children not grandchildren 
Css :: css backdrop filter grayscale 
Css :: mathjax beautiful math in all browsers 
Css :: list-style-type flex 
Css :: inline element not take padding why? 
ADD CONTENT
Topic
Content
Source link
Name
7+2 =