Any tip on how to set conditional style of angular bootstrap directive accordion-heading without doing changes in original .js? Adding ng-style or ng-class does not have any effect.
NOTE: I want to avoid setting styling on the div within accordion-heading.
I solved my case by setting ng-class on accordion-group directive, which applied conditional styling for each heading.
I also realized that angular bootstrap templates can be customized easily. Follow these links:
https://github.com/angular-ui/bootstrap#customize-templates
Can you override specific templates in AngularUI Bootstrap?
http://codepen.io/p0123n/pen/lvzbx
Related
When using ng add #angular/material to add Material support to an Angular project there is a prompt Set up global Angular Material typography styles?
What does this even mean? The documentation states the prompt appears, but does not describe what it actually means.
By default, Angular Material doesn’t apply global CSS. Meaning that a standard element (eg. <h1>) will not have Angular materials' styles applied to it.
So, when configured this way, in order to apply Angular material styles to a broad section of your HTML, you can use the mat-typography class
<h1>This header doesn't have Angular Material styling</h1>
<section class="mat-typography">
<h1>This header does have Angular Material styling</h1>
</section>
If you set up global typography styles; then the first <h1> will already be styled.
When I changed the css style in the internal css component using angular2 material design, all components changed to the same style.
Ex:
When I used this line in internal css component, all components implemented the same style.
::ng-deep .ng-star-inserted > td:nth-child(1) { color:#3f51b5 }
How I can fix this problem ?
Thanks
what do you mean with 'internal css component'? You mean the css file of a particular component or the styles.css file that applies to all components? If you want the css rule to apply to only one component then you should put it in the css file that comes with that component, not in styles.css. To prevent your problem from happening please do the following:
In the css file of the particular component add !important after the color css style rule and remove ::ng-deep.
.ng-star-inserted > td:nth-child(1) { color:#3f51b5 !important}
I have a habit of putting custom css that is app specific in the inline head <style> tags of index.html. This way I can adapt SAP defined classes differently across apps.
Is there a way to reference the brand color (and any other defined color) from the UI Theme that is used from within the inline CSS?
Have you tried the css class "sapBrandColor" or "sapUshellShellBrand"? However, according to the docs you should use "sapThemeBrand-asColor".
Here is the right documentation:
CSS Classes for Theme Parameters
List of Supported CSS Classes
I'm building a ctusom element with DART, and styling it without using seperate css file, using the ..style as below:
innerInput = new InputElement()
..style.color= '#FF8F66'
..style.fontFamily='openSansItalic';
I want to use "pseudo-element" styling, like styling the 'placeholder', 'before', 'after' ,... is there a way to do it using dart, or I've to use separate css file, thanks
Seems these can only be read using code innerInput.getComputedStyle(':after').content but not changed but you can create stylesheet rules by code (like the one built from CSS) How to create CSS keyframe rule in Dart
How does Vaadin use CSS that was written purely for HTML elements (e.g. styling and layout of body, h1, etc elements) and use that exact CSS style in Vaadin?
Does one need to make changes on the CSS to map to corresponding Vaadin elements, or can one use that CSS as is?
You can use the CSS as is, but you'll (naturally) have to tell Vaadin which CSS classes to use by calling
myComponent.setStyleName("myStyleClass");
or
myComponent.addStyleName("myStyleClass");
The difference between the two is that setStyleName replaces all existing styles with the provided one and addStyleName doesn't replace anything but adds the provided style for the component.
You can also modify your CSS to override default Vaadin styles, for example
.v-panel .v-panel-content {
background: yellow;
}
would change every Panel's background color to yellow.
I recommend that you create a new theme which is based on an existing Vaadin theme. Here's how to:
Create a directory in the VAADIN/themes/ directory (eg. VAADIN/themes/myTheme).
Create styles.css in your theme directory.
Add #import "../runo/styles.css"; to the beginning of your styles.css (you can replace runo by any other existing theme).
Call setTheme(myTheme); in your Vaadin application class.
If you want to apply application-wide styles, override the Vaadin component CSS definitions in your styles.css. If you don't know the names of the CSS classes, you can use firebug and check the HTML elements' classes.
If you want to create a component-specific style, define it in styles.css and call setStyleName or addStyleName methods.
See the CSS entry in the Book of Vaadin here.
As far as I can tell from looking at the demos, Vaadin just generates HTML, so yes.
Does one need to make changes on the CSS to map to corresponding Vaadin elements, or can one use that CSS as is?
You can use your own CSS styles (just as it is) and it can use for either individual components (as said by "miq*" earlier) or entire page. `
Here is a link for more info:
https://vaadin.com/book/-/page/themes.css.html