I'm using the Gridster plugin, where columns width are defined like this:
[data-sizex="12"] { width: ... }
[data-sizex="11"] { width: ... }
[data-sizex="10"] { width: ... }
....
I have 2 questions about this;
What kind of CSS classes are these? I have never done/seen anything like this, especially in CSS.
If I want to select all the columns from 1-12, how do I use the code? Typically I'm using something like [class*=".."] this. I don't think so I can get a format like this for the above scenario.
1) These are CSS attribute selectors, to be specific these are Attribute presence and value selectors
2) If you want to select all the columns you don't have to use attribute selectors, just apply the CSS to the element. Well, for gridster plugin can replace .grid with .gs_w { }, .gs_w[data-sizex="12"]{ } and so on in the demo jsfiddle.
.grid{
/* Applies to all */
background: #808080;
color: #fff;
border: 1px solid #eee;
padding: 5px 10px;
}
.grid[data-sizex="12"]{
width: 720px;
}
.grid[data-sizex="11"]{
width: 710px;
}
.grid[data-sizex="10"]{
width: 700px;
}
.grid[data-sizex="9"]{
width: 690px;
}
.grid[data-sizex="8"]{
width: 680px;
}
.grid[data-sizex="7"]{
width: 670px;
}
.grid[data-sizex="6"]{
width: 660px;
}
.grid[data-sizex="5"]{
width: 650px;
}
.grid[data-sizex="4"]{
width: 640px;
}
.grid[data-sizex="3"]{
width: 630px;
}
.grid[data-sizex="2"]{
width: 620px;
}
.grid[data-sizex="1"]{
width: 610px;
}
Demo Here
Related
I have a sass/css class with an ampersand, this is used in conjunction with VueJS. What I was wondering is that the CSS attribute assigned on the ampersand is working but the root element itself isn't detected by the browser.
<style lang="scss" scoped>
.curved-input {
border-radius: 5px;
height: 50px;
margin-right: 1rem;
&__lg {
width: 300px;
}
&__sm {
width: 150px;
}
}
</style>
Here's the explanation, the browser seem to detect the width: 300px or width: 150px but not the border-radius, height, margin-right.
<input name="city" class="curved-input__lg" type="text" placeholder="Palau Ujong, Singapore"/>
The textbox width changed but other attributes are not read by the browser when you look at them on the browser tools. Am I missing something here?
My goal is not to code it as class="curved-input curved-input__lg but rather only use curved-input__lg or curved-input__sm while inheriting the parent attributes (curved-input).
You could use #extend to avoid adding additional classes to your markup or (some) duplicate code, if that is your goal.
.curved-input {
border-radius: 5px;
height: 50px;
margin-right: 1rem;
}
.curved-input {
&__lg {
#extend .curved-input;
width: 300px;
}
&__sm {
#extend .curved-input;
width: 150px;
}
}
Which would generate the following CSS
.curved-input,
.curved-input__sm,
.curved-input__lg {
border-radius: 5px;
height: 50px;
margin-right: 1rem;
}
.curved-input__lg {
width: 300px;
}
.curved-input__sm {
width: 150px;
}
This is because you have to declare the curved-input class as well. So your class attribute will look like class="curved-input curved-input__lg".
If you'd write out your CSS in full you'll get something like this:
.curved-input {
border-radius: 5px;
height: 50px;
margin-right: 1rem;
}
.curved-input__lg {
width: 300px;
}
.curved-input__sm {
width: 150px;
}
With this in mind you'll see that you have to add the class curved-input as well.
Well if you want to write it like that, try to change the first line to:
[class*="curved-input"]
I'm using Doxygen v1.8.13 on Windows.
I'm trying to optimize our HTML output. I would like to have the header with the navbar and search input stick on the top of the pages.
Using a custom css I managed to give the needed tags a position of fixed and all is working fine, except for the search results. That div (with an iframe) is falling behind my div.header.
When I move the div.header block inside the div.top block everything works as expected.
But I can't modify this in the header.html template, because the div.header block is not included.
How to solve this?
Here's my CSS, if needed:
/* Make the header fixed at the top */
#top {
position: fixed;
width: 100vw;
top: 0;
background: white;
}
.header {
position: fixed;
width: 100vw;
top: 137px;
}
.header > div.summary {
padding-right: 25px;
}
div.headertitle {
padding: 5px 5px 0 10px;
}
div.headertitle > .title {
margin: 0 2px;
}
div.contents {
margin-top: 180px;
}
#MSearchResultsWindow {
position: fixed;
border-radius: 3px;
padding-right: 2px;
}
#media(max-width:768px) {
.header {
position: fixed;
width: 100vw;
top: 277px;
}
div.contents {
margin-top: 318px;
}
}
I already read these similar questions:
Remove Doxygen prototype header
Provide custom/configurable HTML templates to Doxygen
But they don't provide what I need.
I finally got it working. Instead of using position: absolute I'm now using flex-box. I also needed to add a new div around all other divs.
This is my css code:
html,
body,
#page {
height: 100%; /* needed for proper layout */
}
body {
overflow: hidden;
}
#page {
display: flex;
flex-direction: column;
}
#top {
flex: 0 0 auto;
}
.header {
flex: 0 0 auto;
}
div.contents {
flex: 1 1 auto;
position: relative; /* need this to position inner content */
overflow-y: auto;
}
div.footer {
flex: 0 0 auto;
}
And this is the live website: http://www.mapwindow.org/documentation/mapwingis4.9/index.html
I need to set vars according to a class which are .withtable and .notable and the positioning of elements is different. See the image or check the code example:
body.withtable {
$logo_width: 130px;
$logo_height: 80px;
}
body.notable {
$logo_width: 200px;
$logo_height: 100px;
}
How to solve this thing? Any ideas?
You can't pass the variables that way. You might want to approach this the following way however:
.logo {
body.withtable & {
$logo_width: 130px;
$logo_height: 80px;
width: $logo_width;
height: $logo_height;
}
body.notable & {
$logo_width: 200px;
$logo_height: 100px;
width: $logo_width;
height: $logo_height;
}
}
This keeps the code readable and manageable as you keep your logo properties in one place. Placing the & character at the end checks if this is a parent instead of a child of .logo.
This compiles into:
body.withtable .logo {
width: 130px;
height: 80px; }
body.notable .logo {
width: 200px;
height: 100px; }
}
as I understand from here, I can't place my CSS selectors which contains "pseudo browsers selectors" (-moz-range-track, -webkit-slider-thumb, and so on) separated by comma, because if browser did not recognize one of the selectors then will ignore all the rules in curly brackets {}.
So when I try to compile my LESS rules:
input {
&[type=range]{
&::-moz-range-track,
&::-webkit-slider-runnable-track
{
width:100%;
height: 32px;
}
}
}
In the result I will see:
input[type=range]::-moz-range-track,
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 32px;
}
Which will not work because of reason I mentioned earlier.
So in LESS I have to do it like (it isn't of course LESS style):
input {
&[type=range]{
&::-moz-range-track
{
width:100%;
height: 32px;
}
&::-webkit-slider-runnable-track
{
width:100%;
height: 32px;
}
}
}
Which compiles to:
input[type=range]::-moz-range-track {
width: 100%;
height: 32px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 32px;
}
And works as expected.
And my question, is there any possible to do it looks nicely in LESS?
I have .aClass
.aClass {
width: 20px;
height: 20px;
}
In .anotherClass I would like to calculate a width value based on the value of the width attribute in .aClass.
.anotherClass {
width: .aClass.width
}
The above example does not work.
I couldn´t find anything in the less docs. Is there any way to do this?
Declare variable at the top of code
#width: 10px
Then,
.aClass {
width: #width;
height: 20px;
}
.anotherClass {
width: #width;
}