I am currently developing a user interface using Angular 4, Angular Materials and PrimeNG components.
The latest component I am battling with is the MultiSelect Component from PrimeNG:
https://www.primefaces.org/primeng/#/multiselect
I am simply just trying to make the component's width fit 100% of the parent component.
Is there a specific process I need to follow to edit CSS classes for this component? The documentation says to use "Style" for inline - does this mean:
<p-multiSelect [options]="cars" [(ngModel)]="selectedCars" [defaultLabel]="defaultLabel" style="width: 100%;"></p-multiSelect>
Because this did not work.
It also says to use "styleClass" as a property to add a styling CSS class. How do you use this?
Lastly, they provide a list of the CSS classes the PrimeNG component uses on the website (e.g. ui-multiselect). When I attempt to modify 'ui-multiselect' by declaring it within the Angular components CSS, it still doesn't work.
Any ideas? What am I doing wrong?
For inline PrimeNG styling, use something like this:
[style]="{'width': '100%'}"
To use styleClass simply add:
styleClass="example-css-class"
This way, for example, you can style multi select input field with many different style classes, eg. Bootstrap's form-control.
When you operate with PrimeNG ui's, be sure to put them into components .css. If you use global styles.css, you'll have to override the PrimeNG files in .angular-cli.json. You can do it by editing styles array like this:
"../node_modules/primeng/resources/primeng.min.css",
"../node_modules/primeng/resources/themes/omega/theme.css",
"styles.css"
When the styles.css are put after the primeng resources, it is loaded after the primeng's, which will override the styles.
Related
I am currently writing code for an Angular project that changes color dynamically based on the user selecting a theme. When a theme is selected it grabs from an api the hex code for the desired color to theme the app in, which for this I want to apply the theme color to all text. Currently I can apply it individually to each p tag through ngStyle by typing it as
<p [ngStyle]="{'color': api.color}"> , though I want to be able to apply it to all instance of the p tag without repeating it for each of them.
You can add Angular Global CSS file to apply global style. Here are the references:
Angular Global CSS styles
angular-cli how to add global styles?
This question already has answers here:
How to make React CSS import component-scoped?
(6 answers)
Closed 1 year ago.
I have a react component and there are multiple(one.css,two.css,three.css) files defined inside css folder .In APP.js(load1.jsx , load2.jsx,load3.jsx) we are having all the js files configured .
one.css is applied to load1.jsx and two.css is applied to load2.jsx and three.css is applied to load3.jxs
but the styles of one.css is overridden by three.css in load1.jxs .
how this can be fixed in the react js.
This is because your 3 stylesheets are applied on your site, which is a single-page application. It is the same as if you imported 3 stylesheets in an html file.
An efficient and clean way for separating your styles would be to use component specific class names. For example, in a component named MyButton, you would use a prefix on all of your class names, like this: myButton-wrapper, myButton-content, myButton-label, etc. A style for a label from one component would never override the one from another component: they would be called myButton-label and myTextField-label for example.
Another solution would be MaterialUI's style lib. In each component, you create a style and apply it to the component. This style will be specific to the component and won't be shared with other components.
Also, if you want some styles to be applied globally, such as a CSS reset or generic styles, you can use a global stylesheet and use it on the root of your application: in App.js.
I'm using react-multiselect-checkboxes in my project.
The problem is with changing it's styling, the css classes in inspect mode have these values: .css-1r4vtzz and .css-48ayfv.
If I'm adding them in css file and override a property with !important it seems to work.
But If I add another class to that element, for example in my React app:
className="new-css-rule css-1r4vtzz" - it doesn't take into acoount the new class, even if the styling is with !important. It doesn't even show the class's name in inspect mode.
Is there a way to add that new css class and use its styling?
According to the documentation
Like props, styles supported by react-select are passed directly into
the underlying Select component. Some of the defaults have been
tweaked for the multiselect, but you can override them like normal
There are several methods of overriding the styling. They can be found here.
I would like to add a custom style or CSS to my Angular website elements without accessing the styles on the server or in another word how can I prevent the automatic access from global classes.
For example
<p>Something</p>
for the whole project the common CSS has been used. How can I prevent in order to use custom CSS. I am using it in Angular by having div with inner HTML styles.
I've found that my ng-class is overwritten when used inside an ng-repeat by the Foundation framework that I'm using. The code is relatively simple:
<tr ng-repeat="goal in goals" ng-class="goal.difficulty">
I can see the class being applied in chrome dev tools, but it is overwritten by the tables.scss styles of
tables tr:nth-of-type(even)
I have my CSS after the foundation one, so I'm somewhat at a loss as to how this happens.
Edit:
Since people don't believe it's being overwritten here is an image (you can also check out the project from Github)
http://imgur.com/BtQjInF
https://github.com/OrganicCat/goal-tracker
Try putting !important at the end of your class style definitions so that they override foundation.
That is not a solution, but it indicates that your styling is clashing with zurb. The correct answer then would be to remove the default table styling from zurb using sass, in particular:
// These control the background color for the table and even rows
$table-bg: $white;
$table-even-row-bg: $snow;
http://foundation.zurb.com/docs/components/tables.html
I do not believe the class is not being applied to the element (unless you post up some rendered html showing otherwise).