I am using ng-multiselect-dropdown for multiselect in angular. I want to disable the borders and keep only bottom border of ng-multiselect-dropdown text-box and change the style of arrow mark also.
<ng-multiselect-dropdown [placeholder]="'Select Your Item'"
[settings]="dropdownSettings"
[data]="dropdownList"
formControlName="category"
(onSelect)="onItemSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelect)="onItemDeSelect($event)"
(onDeSelectAll)="onUnSelectAll()">
</ng-multiselect-dropdown>
I want to use these styles border-left:none, border-right:none,border-top:none to be implemented in textbox.
You could overwrite multiselect styles, by creating an overwrite style file or even creating a custom theme.
The component package has a themes folder in node_modules at ng-multiselet-dropdown\themes\ng-multiselect-dropdown.theme.scss
You could us it as guideline.
Related
Using react-bootstrap-typeahead is it possible to change the contents of the Clear button?
I need to include a FontAwesome icon and "CLEAR" text to match a design.
Looking at the [RBT] Custom Aux Components demo I can see the ClearButton component, but I can't see how to customize this. I tried changing the label prop but this had no effect:
<ClearButton onClick={onClear} label="CLEAR" />
Is it possible to add:
label text
a FontAwesome icon
to the Clear button?
You can't customize ClearButton itself, but you can follow the example you linked to and use your own clear/close button component:
<Typeahead ... >
{({ onClear, selected }) => (
<div className="rbt-aux">
{!!selected.length && <MyCloseButton onClick={onClear} />}
</div>
)}
</Typeahead>
Note that ClearButton isn't really anything special; it just encapsulates the markup and classnames for Bootstrap's Close Button into a component. Feel free to use your own button!
The reason why I need to insert styles from .ts file into less: I have a website and something like content manager panel where you can set the color of buttons for it.
Of course I can use this css variable in my html templates like:
[style.color]="colorVar"
but maybe there is exist some better solution?
you can use ::ng-deep to penetrate into some component and change the styles.
some-component-selector ::ng-deep selector-inside-of-that-some-component {
//write the sytles here
}
I'm using the following instance of a react component in a view:
<Jumbotron>
Lot's of important content
</Jumbotron>
I want an individual style (i.e. a different background image for this instance. So this doesn't work:
<Jumbotron className="individual">
Lot's of important content
</Jumbotron>
Wrapping the instance in a div also doesn't work. How can I do this with simple markup and CSS so that I can simply style the individual class in CSS? AFAIK properties won't help to customize instances...
You can either pass in the style attribute or you can pass through the className attribute in the same way
<Jumbotron className="background--black">
And have your component like this -
const Jumbotron = ({className}) => {
<div className={className}>
Here is the jumbotron
</div>
}
export default Jumbotron
And import a css file that has that class in, if you're using className. But I would probably recommend just using style attribute if it's a one off.
I´m trying to use the attribute appendTo in the component ContextMenu, but I want attach the behavior to one element, like a div.
on the element u want to append to add a hashtag #myHashTag
and on the prime element u want to append add:
[appendTo]="myHashTag" <- without the # sign
example:
<div class="recording-control-button" #stopbutton></div>
<p-confirmDialog [appendTo]="stopbutton"></p-confirmDialog>
I'm presuming you're using Angular 2?
Based on the information on the api for primeng context menu here:
PrimeNg context menu
You need to use a Angular 2 template variable, see here:
Angular 2 HTML variables
I try this and it works - [appendTo]="'body or template or any Id'"
For example:
<div #largeModal></div> - define anywhere in html, but in your project
Define this menu primeng in your html
<ng-template let-item="rowData" <p-menu #menu popup="popup" [model]="items"></p-menu> <button type="button" pButton icon="fa fa-list" label="Show" [appendTo]="'largeModal'" (click)="menu.toggle($event)"></button> </ng-template>
I'm using GWT for create a web-application; by default Google Web Toolkit append your style name.
For example the following code
Anchor myAnchor = new Anchor("Test");
create this HTML
< a href=".." class="**gwt-Anchor**">Test< /a>
Can i remove ALL gwt style name on ALL widget?
In example I want remove gwt-Anchor class, but I don't want run removeStyleName("gwt-Anchor")
Thanks
There's no easy way to do it, no. You have to explicitly removeStyleName(…) or more simply setStyleName("") on each widget.
setStylePrimaryName()
Anchor myAnchor = new Anchor("Test");
myAnchor.setStylePrimaryName("mystyle");
As per docs :
Sets the object's primary style name and updates all dependent style names.
If you don't want to remove the style then apply new style using setStyleName(""). So In your project style sheet file, Define gwt-Anchor style with empty brace which tag already exist in GWT style.
Thus you can inherit same style name with !important keyword in gwt project. it will apply project css. and it will remove all GWT style. so copy style name and paste in your project css. i.e.
style.css
.gwt-Anchor
{
//Any style you want to apply
}