I am trying to do basic CSS with rally components. Currently I am working on getting an xtype 'rallybutton' to be inline with an xtype 'rallyiterationcombobox'. I am using a CSS file that successfully updates / changes other pieces of the app whose class name I have set manually, but the preset classes on the rally components seem to not be editable with my css file. I am using Chrome's debugger to look up the class names on each of these components - the rally button has multiple class names depending on where in the html you look: x-btn or x-btn-inner, the rallyiterationcombobox has these: x-form-text, x-form-trigger-wrap, x-form-item-body, and a few others.
I'm trying to use a CSS function that looks like this:
.[buttonClass], .[comboboxClass] {
display: inline;
}
with different combinations of names for classes referring to the button and combobox. [When I put the class names in, I do delete the brackets]. Any help would be appreciated in showing where I'm going wrong!
It turns out that the two components I was using, rallyiterationcombobox and rallybutton, were placed into two different containers in my app. Ext does some magic behind the scenes trying to place each component in their own section of the page, so trying to put them inline with each other was causing problems. To fix the situation, we put both components into the same container and formatted from there. Inside each component definition we used the following code
cls: 'className'
to create a class named 'className' which can then be referred to within the css file. Inside the css file we used the code
.className1 {
float: left;
display: inline;
}
.className2 {
float: left;
display: inline;
margin-left: 10px;
}
to set each component in the same line [horizontally], with both components aligned on the left of the app and the component with 'className2' 10 pixels to the right of the component with 'className1'.
Related
Vaadin flow theming and styles confuse me. Is there a way to disable it and apply natural css. I know how to reference a css file inside vaadin, and use setClassName but I would prefer to use ordinary css style for components.
Thank you
You can override the default lumo styling by providing yours. For instance, to remove the background color from a ComboBox, I can target the input as follows in a CSS file named vaadin-combo-box.css:
[part="input-field"] {
background-color: var(--lumo-base-color);
max-width: fit-content;
}
To set the colors for a disabled button, you can target it as follows:
filename: vaadin-button.css
code:
:host([theme~='primary'][disabled]) {
background-color: red;
}
And you get the following:
To change the primary color or any other global styling, explore your styles.css file.
For a better understanding, take a look at this video https://vaadin.com/learn/training/v14-theming
Like with all other styling you need to check the states / attributes of the component while the specific state is active and check the DOM - only caveat would be that you need to add those style in the specific files like vaadin-button.css to be applied inside the shadow DOM.
I'm developing a small control which is directly embedded in a parent page (without iFrame).
My control is written using react-bootstrap, so the bootstrap4 css is also embedded along with my control.
While developing my app as standalone, everything was fine.
After embedding it however, it turns out that there are some "global" bootstrap styles, such as the so called "list-styles" that don't get applied only on HTML elements having bootstrap classes, but instead on any matching HTML tag.
This causes the parent page's layout to get scrambled once my control is loaded.
Examples for bootstrap classes that are applied globally and which cause problems for me are styles like these which can be found in the bootstrap4 default css:
dl, ol, ul {
margin-top: 0;
margin-bottom: 1rem;
}
or
label {
display: inline-block;
margin-bottom: .5rem;
}
This is very unfortunate for my use case. Is there a way for getting rid of any styles in bootstrap, which are not linked to any proper css bootstrap class? I don't want any styling of HTML tags that are not explicitly linked to a bootstrap class.
Thanks for your help.
I can think of three options, though I'm not sure they will do for you:
Paste Bootstrap's styles into a local file (instead of getting them from a CDN or something) and delete what you don't want (most of the unwanted styles should be at the top of the file)
Look for another, more minimal version of Bootstrap. I don't know if such versions/customizations exist but they very well might
Don't use Bootstrap. You can just as easily write your own css lines (personally I find that Bootstrap makes you lose control over your styling, but that's my opinion)
I have a really weird situation where my view is different depending on where I put the following CSS class. I only have one item that is connected to this class which is my md-progress-bar from Angular Materials 2. I want it to float underneath my tool bar which is fixed on the screen.
.floating-progress {
position: fixed;
top: 0px;
z-index: 1005;
}
When I put this inside app.component.css, I get the following result where the bar sits on the top of the tool bar.
However, when I change this css class to my global styles.css, I get a the actual result that I wanted
How come there is a different depending on where I put it?
Angular does style encapsulation for styles added components.
The components get attributes like _ng_context-xxx with unique xxx added.
The CSS selectors will be rewritten to match only these attributes, before the CSS is added to the DOM.
See also https://angular.io/docs/ts/latest/guide/component-styles.html
Say, I am using a <core-input> inside my web component, and I want to style the <input> element inside the <core-input>.
For that I would need to do
<style>
:host::shadow input {
background-color: green
}
</style>
Now, the selector is okay, but I don't want to define the style properties here, because I have a CSS file made by a designer guy, that looks like this:
.input-like-things {
background-color: green
}
On the other hand, the designer guy is not going to produce almost identical CSS files for each web component I use that has something looking like an input.
How do I correctly apply the ".input-like-things" class (or its contents) to the <input> field inside <core-input>?
I am not considering /deep/ as an option.
I created a custom component that can copy the contents of the ".input-like-things" class into the <style> tag, and that works, but only in Chrome. I could not get it to work in Firefox as long as data binding does not work inside <style> in ShadowDOM polyfill.
Help?
I'm new to Dojo and CSS, so maybe I'm missing something obvious here.
I have a page with several Dijit buttons that are created programmatically, and I want to make one of them bigger- leave the text alone and increase the space between the text and the edge of the button. I don't want to override the CSS for .dijiButtonNode to do so because there are other Dijit buttons the page that shouldn't be altered.
I tried adding this to the widget declaration:
style: { padding: "1em" }
and this:
class: "PaddedButton"
.PaddedButton
{
padding: 1em;
}
but since Dijit buttons are rendered as nested spans it padded the area around the button instead.
The best way to work with CSS is using one of the browser debugging tools (that you should already be using) like Firebug or the Chrome developer tools. You can find an element's DOM node easily with inspect_element and then directly edit its CSS styles until they do what you want. You can also see what CSS rules are active and what are being ignored or overwritten.
I have come up with a working example here:
http://jsfiddle.net/missingno/FrYdx/2/
The important part is the following CSS selector:
.paddedButton.dijitButton .dijitButtonNode {
padding: 1em;
}
This selects any node with class dijitButtonNode that descends from a node that has both of the paddedButton and dijitButton classes. I couldn't do just a .paddedButton .dijitButtonNode because then the rule would end up being cascaded by a more specific selector.