In ExtJS 4, what's the difference between componentCls, cls and bodyCls ?
ExtJS provide many options in styling the components. Each of these property have its place in implementing proper theming of your components.
cls: This is applied to the component's root element. Quoting from the docs:
An optional extra CSS class that will be added to this component's
Element. This can be useful for adding customized styles to the
component or any of its children using standard CSS rules.
By default, this is empty. If you need to style some child elements (by elements don't mean ExtJs components.. instead, they are HTML elements auto generated by the framework) of a component then, you can use this. For example, If you want to change background color of you's tab panel's inner area, you can do something like this:
.customCss x-box-inner {
background-color: yellow;
}
componentCls: This also gets applied to the component's root element. But, this property is meant to hold CSS styles for the component as a whole. Quoting from the docs:
CSS Class to be added to a components root level element to give
distinction to it via styling.
From result point of view, both cls and componentCls gets applied to the root element. But, the are used for different purposes.
bodyCls: This is available for Panels. You will not find this styling for a button because, there is no body. If you want to provide custom styles for your panel's body region.. you can do so by setting this property.
Related
I have a single-page vue 2 app made with the cli-tool. Most of my routes use Bootswatch (Bootstrap) styling. But one shouldn't at all. This is only a problem because the Bootstrap affects the body and html styles and generally messes with the other styling. The route shouldn't use Bootstrap gets affected even when I #import the Bootstrap in a scoped <style> only to the routes that should use it. This happends if I first visit the Bootsrap routes and then to the isolated one. How should I go about doing this so that one of my routes is completely isolated when it comes to styling? If it's impossible or very impractical, suggest other ways of doing this. If this weren't a single-page-app this would be easy. But I'd prefer it be one.
I succeeded in encapsulating bootstrap import within a class called 'bootstrap-inside' and assigning it to the #app (Index route for example) div that is supposed to be styled with Bootstrap.
.bootstrap-inside {
#import '~bootstrap/scss/bootstrap.scss';
}
From now on, if you want to use bootstrap, you just have to use .bootstrap-inside in your component/view/layout.
I would suggest creating a view layout for your no-bootstrap pages and set your route to extends that layout (i can give you the solution for this too if you want).
I can mention this answer of another thread about limiting the scope of bootstrap styling in case you go through unexpected bootstrap behavior.
The easiest solution I know for this is to manually reset every css property for a given selector.
You could add an id / class to the root element of your page, and explicitly reset all css properties for all its childs. It would override the default bootstrap styles, but not remplacing its classes though.
Here's a class that would reset every css property: reset css for a div #15901030
It's not super convenient but it should work!
I'm using the v-app-bar label for my header and I want the shadow of the element to be lighter since it looks too prominent. I'm unable to apply box-shadow attribute to the v-app-bar element.
should I do?
Method 1
You can use component prop called elevation. Look into the app bar docs into API section (https://vuetifyjs.com/en/components/app-bars/#api) and select PROPS tab you can see elevation prop.
Method 2
You can use builtin elevation classes. You can read more about them here: https://vuetifyjs.com/en/styles/elevation/
Method 3
Vuetify allows you to customize sass styles.
If you go here: https://vuetifyjs.com/en/components/app-bars/#api and select SASS tab you can see that they provide some variables which you can edit.
One of them is elevation which is responsible for box-shadow.
Of course to do so you need to have vuetify installed as a vue-cli plugin or in a we pack environment as you can read here: https://vuetifyjs.com/en/customization/sass-variables/
Method 4
You can apply css directly but not to the v-app-bar because it's only vuetify component name which then gets generated into HTML. You can inspect your page using e.g. chrome dev tools and see what structure app bar has and then apply css styles to the right element.
How to write a CSS Selector selecting elements NOT having a certain attribute?
I have 2 <div> nodes as follows:
First:
<div class="weEq5" style="will-change; width;">
<button class="_35EW6">
Second:
<div class="weEq5">
<button class="_35EW6">
I need to select the <div> (with the similar class) and each of them which have a similar descending <button> but without the style attribute.
XPath seems working fine as:
//div[#class and not (#style)]/button
I am looking for an equivalent CssSelector.
Trials:
div[class :not(style)]>button (doesn't works).
I have been through the following discussion but they seem to be discarding the class attribute as :not([class]) as in:
Can I write a CSS selector selecting elements NOT having a certain class?
Is it possible to define in CSS NOT to apply style if element have certain class? [duplicate]
I was looking in similar lines ending with :not(attribute).
I think more accurate CSS Selector is:
div[class]:not([style])>button
because the button element is a child of div element.
Hope it helps you!
That's the code you're looking for:
div:not([style]) button{
background-color: red;
}
Now let's break it down.
We have have four selectors in this example:
div and button - these select html elements. We can replace it for example with a class selector like .weEq5.
:not() - indicates that we want everything that does not qualify as the selector inside the brackets.
[style] - an attribute selector which is very powerful. We can place inside the not any other css selector like html tag names (button or div), class names or ids.
The combination of div:not([style]) means that we want all divs that do not have a style attribute. After which we have a space and a button means that we want all the buttons that are inside the above selector.
Adding a > before the button div:not([style]) > button will only select button elements which are direct children of the selected div. It will exclude from selection buttons that are deeper inside the div.
Normally, you would write :not([style]) to match an element that does not have a style attribute, as described here which emphasizes the use of both () and [] brackets, in that order.
But if this isn't working in Selenium WebDriver, and worse still if :not(style) works exactly like how I would expect :not([style]) to, then that's a bug with its CSS selector parser, since :not(style) actually means "not a style element" which makes div:not(style) redundant as an element can only either be a div or a style but not both at the same time. Unless you absolutely require a selector, I strongly recommend using the XPath locator strategy instead of relying on quirks like this with Selenium WebDriver's CSS selector engine that force you to write selectors that are both incorrect and don't work anywhere else that accepts a selector.
I do not understand how the situation developed in the first place, where the structure of the page necessitates the CSS rules to be aware of whether "style=..." exists in the document itself. Or even why style=... is being used.
The style attribute is old-school now, pre-CSS I believe. It also takes precedence over anything in the CSS. That attribute does not accept CSS class names. It accepts only native html style properties like "width","height","font" - old-school stuff - ultimately those are what your CSS resolves to, no matter how fancy or obfuscated it is through frameworks: font, width, left, top, float.. and so on.
By use of the class attribute (instead of style) in the document you get infinite control from which to write smart selectors in your CSS.
You can put 3 classes in the class attribute of your div for example, if you want, and have your selectors apply styling to it if 2 of the classes are present but not if all 3 are there. Tonnes of flexibility, no need to override or use "style=..." in the document at all.
I am opening an NgbModal passing a TemplateRef to create the dialog body, and passing in a custom class via the windowClass property of the NgbModalOptions object that I pass to the open() method. I define the class in a referenced styleUrl in the component and am serving the modal via an injectable service in the component. The modal is loading fine, and I can see the class name when I inspect the DOM, but the class appears to have no bearing on the modal. I would like to use it to customize the size of the modal (css is defined to affect the child div where the size is set), but I have also played with properties that I can see in the Styles tab of the Chrome dev tools, but cannot see it affecting anything. When I inspect in Firefox dev tools, I can find the CSS as an inline style sheet and it has a reference to the ngContent identifier assigned by Angular, so I am assuming that is does not affect the entire document, nor those parts added by ng-bootstrap that constitute the modal wrapper. Has anyone been able to make this work successfully? I am at my wit's end. I would even be happy if I could get an ElementRef of the modal-header dive, but since I am using a template (which is not fully loaded in the DOM at init time) I have not been able to. One of my requirements is that we do all DOM manipulation via Angular to maintain platform independence in the project ... so no jQuery. Any thoughts? And thanks in advance!!
I use windowClass and size attributes of NgbModalOptions to customize the modal. Sample code follows:
this.modalService.open(<your_template_ref_var>, {size: 'lg', windowClass: 'modal-adaptive-s1'});
Whereas
.modal-adaptive-s1 .modal-lg {width: 400px !important; max-width: 400px;}
I am trying to override the .Select-control css component in react-select.
I want to set a custom height (the default is 36px) so it will look more closely to my other input fields
I have tried to add my own className prop as suggested in the docs however it does not seem to work and just pushes everything down (which makes sense since it's the wrapper for the component)
Is it possible to override the component itself?
I just started working with react-select and ended up overriding the components to bring the elements in line but also had success with passing in my own classes.
.Select-control {
height: 32px
}
I noticed that some of the css selectors can be pretty specific so referencing the css file helped to make sure I overrode the included styles. If you're using ES6 syntax I think you need to import your css after importing the react-select css in order to override.
Hope that helps