Good Morning,
I'm working with blueprint css framework. My problem is that I can't set height: 100% of a container that is inside in an external container. (container is intended as container blueprint css class). I want that my internal container is height as external container.
class container is defined as:
.container { display: block; }
Set height: 100% doesn't work. but I can't change this property becouse it is part of blueprint css framework.
Is there a workaround?
Can you help me, please?
Is your internal container set as display:block ? You can't set height on inline elements in the way you are describing.
I would inspect the html using Firebug and see what the computed style value for the display setting is for your internal container.
Related
I have an Ionic Vue3 app. I'd like to change the background color of the whole page. I'm new to Ionic but I believe the way this has to be done (due to the use of Web Components/Shadow DOM) is to modify the --ion-background-color CSS custom property rather than trying to set the value of the normal CSS property, so this works:
.ion-page {
--ion-background-color: red;
}
...but this doesn't:
.ion-page {
background-color: red;
}
Fine, so I do the former, but the problem now is that all elements within the page (everything inside the <ion-page></ion-page> element which use that same custom property value now inherit the same background color.
Does anyone know how to scope the change of background colour of the ion-page element such that it doesn't cascade through descendent elements? Thanks :)
The solution here was to use local CSS custom property --background rather than the global property --ion-background-color. So the following works:
.ion-page {
--background: red;
}
I didn't previously realise there were different sets of CSS variables for different scopes.
I want to change the sidebar width in docusaurus, I am only allowed to change the width of sidebar in a particular page.Can anyone suggest me a solution
In version ~2.0.0 you can create your own CSS files (/src/css/custom.css) by defining it in the docusaurus.config.js. There you can set your override styles. When inspecting the page, there's Docusaurus sets the variable for --doc-sidebar-width: 300px; I was able to override that variable with an !important:
:root {
--doc-sidebar-width: 250px !important;
}
I have a new template LandingPage3Template.
layoutSlots: {
LandingPage3Template: {
pageFold: 'Section2B',
slots: [
'Section2A',
'Section2B',
'Section2C',
'Section1',
'Section3',
'Section4',
'Section5'
],
}
}
I just wanted to give styles for the slots. Can someone help me to write a custom CSS style to align it properly?
I am using the below-mentioned code but it is not working.
%cx-page-layout {
// my code here
width: 10%;
}
thanks for asking at our SO channel.
The CMS page template name (i.e. "LandingPage3Template") and slots positions (i.e. "Section2A") are mapped to CSS classes in the Spartacus DOM. This means, that you can use pure CSS rules to create the layout.
Page slot position names are not necessarily unique cross all pages (i.e. "Section2A" might also be used in other page templates). But since page slots are nested inside the page template, you can create css rules for page slots that are used inside a given page template.
The following CSS rule shows how you can create a rule for "Section2A" inside "LandingPage3Template".
.LandingPage3Template .Section2A {
width: 10%;
}
While this is valid css and scss syntax, in scss it would look like:
.LandingPage3Template {
.Section2A {
width: 10%;
}
}
Please note that the percentage before a selector (i.e. %cx-page-layout) refers to a so-called placeholder selector. This is used in Spartacus for optional CSS, so that only when the placeholder selectors are used, the CSS ends up in the final CSS. You can read more about the CSS setup in Spartacus at https://sap.github.io/spartacus-docs/css-architecture/.
Some Ext JS container exposes CSS variables without any mixin. For example, fieldcontainer. In my custom theme I want to style two fieldcontainers differently using the available CSS variables for fieldcontainer.
I know it can be done by applying CSS. Is there a way to achieve it by setting the CSS variables?
For example,
.my-class-one {
$form-label-font-color: #FFFFFF
}
.my-class-two {
$form-label-font-color: #000000
}
Is it possible? If possible, where do I put this code?
You could do something like that:
Define a style in the sass/src/ folder:
.my-class-one .x-form-item-label{
color: $my-class-one-label-color;
}
.my-class-two .x-form-item-label{
color: $my-class-two-label-color;
}
...and initialize the variables in the sass/var/ like this:
$my-class-one-label-color: #FFFFFF;
$my-class-two-label-color: #000000;
You should put your scss variables in the sass/var/ folder and your styles in the sass/src/ folder.. And in these two folders keep the same structure as in your app folder. so if you write a style for your view in app/view/Home.js so place your style in the sass/src/view/Home.scss file.
Useful link: http://docs.sencha.com/extjs/4.2.1/#!/guide/theming
Above approach should work though i personally avoid adding style to internal class names.
Another approach could be defining a new UI for your container.
Have a look at:
Creating Custom Component UIs section in theming guide.
I've made simple application with dojo.
I took the exact same combo tree (cbtree) and put it once inside accordion and once first on page.
I don't understand why inside the accordion I get different cbTree (it looks really bad)
Here is online example of the problem :
http://77.235.53.170/cbTree/cbTree.htm
The problem is at your main.css, you have
#leftCol img {
width: 100%;
}
Which overwrites
.dijitFolderOpened, .dijitIconFolderOpen, .dijitIconError {
background-image: url("../../icons/images/commonIconsObjActEnabled.png");
width: 16px;
height: 16px;
}
You need resolve this in main.css by either removing your style, or changing it to a more specific rule; i.e. instead of #leftCol img, use #leftCol .yourClass.