I have the simple table generated by js and I'd like to change some properties of columns and rows like background color, width statically. I can extend the row and col classes directly in CSS file or do it in html.
Example (CSS approach):
HTML:
<div class="table">
<div class="row">
<div class="col">
<div class="row">
<div class="foo"></div>
<div class="col"></div>
</div>
</div>
</div>
</div>
CSS:
...
.col, .foo {
display: table-row;
height: 20px; }
.foo { background: red; width: 100px; }
...
Example (html approach):
HTML:
<div class="table">
<div class="row">
<div class="col">
<div class="row">
<div class="col foo"></div>
<div class="col"></div>
</div>
</div>
</div>
</div>
CSS:
...
.col {
display: table-row;
height: 20px; }
.foo { background: red; width: 100px; }
...
In my opinion the second approach is more convenient for dynamically changing elements rather then static ones. However the first one obscures the structure of the html which can cause some problems with understanding the javascript. My question is which approach would be better in this case?
Related
This is some html and css that uses flexbox to position an element (colored in yellow). In a large breakpoint it appears in one place but in a small breakpoint it needs to be in a different part of the hierarchy. So it's not as simple as just repositioning its order but actually moving it to a different place.
How can I do this using just CSS and flexbox? If that's not possible then I could use CSS grid. Would prefer not to have to use javascript unless there's no other way.
.one {
background-color: lightgray;
}
.two {
background-color: red;
}
.three {
background-color: blue;
}
.element {
background-color: yellow;
}
<h1>large breakpoint</h1>
<div>
<div style="display:flex">
<div class="one">
<div>one</div>
</div>
<div class="element">
possible position 1
</div>
<div class="two">two</div>
<div class="three">three</div>
</div>
</div>
<h1>small breakpoint</h1>
<div>
<div style="display:flex">
<div class="one">
<div>one</div>
</div>
<div class="two">two</div>
<div class="three">three</div>
</div>
<div class="element">
possible position 2
</div>
</div>
Pretty sure you can achieve what you want with the order property. Here's an example where an element is in a different order than the order in which it was declared.
You can set the order property in each breakpoint to match your needs.
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.item {
border: 0.025em solid black;
padding: 1em;
}
#special-item {
order: 3;
width: 100%;
background-color: yellow;
}
<h1>Large breakpoint</h1>
<div class="container">
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
<div class="item">Four</div>
</div>
<h1>Small breakpoint</h1>
<div class="container">
<div class="item">One</div>
<div id="special-item" class="item">Two</div>
<div class="item">Three</div>
<div class="item">Four</div>
</div>
I created a Vuetify app managing some card items. Before adding the actions / buttons I check the User's permissions. If some permissions are missing these buttons will not be rendered. I created an example here
https://codepen.io/anon/pen/RmMRQb?editors=1010
As you can see the second div collapses because no children is rendered. This problem is not related to Vuetify, so I will reproduce it with default HTML / CSS example.
.container {
background: red;
}
.box {
display: inline-block;
height: 32px;
width: 32px;
margin: 5px;
background: blue;
}
.notRendered {
display: none;
}
<div id="app">
<h1>Div with visible elements</h1>
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<h1>Div with hidden elements</h1>
<div class="container">
<div class="box notRendered">
</div>
<div class="box notRendered">
</div>
<div class="box notRendered">
</div>
</div>
</div>
I don't want the div to collapse. I already found a solution here
JQuery: Prevent div from collapsing when element hides()
but would like to ask if there is a way to achieve it without using some hardcoded heights or selecting the element's height. I don't want to modify Vuetify's native elements, so maybe there is a trick when the action bar is empty (no children got rendered) and the bar would not collapse.
I have added a secondary class for the default/native container. I think this is the best/easiest approach.
.improved-container {
background: red;
min-height: 40px;
}
.box {
display: inline-block;
height: 32px;
width: 32px;
margin: 5px;
background: blue;
}
.notRendered {
display: none;
}
<div id="app">
<h1>Div with visible elements</h1>
<div class="container improved-container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<h1>Div with hidden elements</h1>
<div class="container improved-container">
<div class="box notRendered">
</div>
<div class="box notRendered">
</div>
<div class="box notRendered">
</div>
</div>
</div>
I am attempting to target a specific class which is the first class name inside a div. The attempt I have made looks like the following:
.container-fluid:first-child div.row {
padding-top: 200px;
}
The HTML for the CSS.
<div class="container-fluid">
<div class="row justify-content-md-center"> <<TRYING TO TARGET
<div class="col-3 text-center">
<div class="row">
<img src="/assets/images/fssLogo.png"/>
</div>
</div>
</div>
</div>
As you can see i want to target only the first row inside the container-fluid tag but the padding is also getting applied to the row inside the col-3 class.
Could somone point me in the right direction.
It should be
.container-fluid >.row:first-child {
padding-top: 200px;
}
.container-fluid > .row:first-child {
background-color: red;
padding-top: 200px;
}
.innerRow {
background-color: pink;
}
<div class="container-fluid">
<div class="row justify-content-md-center">
<div class="col-3 text-center">
<div class="row innerRow">
<img src="http://via.placeholder.com/350x150" />
</div>
</div>
</div>
</div>
Or
.container-fluid >.row {
padding-top: 200px;
}
.container-fluid > .row {
background-color: red;
padding-top: 200px;
}
.innerRow {
background-color: pink;
}
<div class="container-fluid">
<div class="row justify-content-md-center">
<div class="col-3 text-center">
<div class="row innerRow">
<img src="http://via.placeholder.com/350x150" />
</div>
</div>
</div>
</div>
But the 2nd snippet is more preferable, it is because you are targeting .row that is the direct child of container-fluid, unless you have another row that is also a direct child of container-fluid, you can use the 1st snippet to only target the first row child.
> is used to target the direct child of a parent, regardless if there is a class that has the same name lower in the hierarchy
.parent > .someClass {
color: blue;
}
<div class="parent">
<p class="someClass">TARGETED</p>
<div>
<p class="someClass">NOT TARGETED</p>
</div>
</div>
Remove > and both text will be blue
How to stick the columns together with bootstrap and css?
I would like to create something like this:
What I have created:
Here is my HTML & CSS markup:
<div class="container">
<div class="row">
<div class="col-md-4 ">
<div class="box1">
<h1>this is box 1 one</h1>
</div>
</div>
<div class="col-md-4 ">
<div class="box2">
<h1>this is box 1 one</h1>
</div>
</div>
<div class="col-md-4 ">
<div class="box3">
<h1>this is box 1 one</h1>
</div>
</div>
</div>
</div>
My css
.box1 {
background: red;
}
.box2{
background: green;
}
.box3 {
background: yellow;
}
Every single help would be appreciate!
There are many possibilities depending on what you are trying to achieve exactly.
If you want to remove the gap (called gutters) between ALL the columns of your design, you can customize your own bootstrap at http://getbootstrap.com/customize/#grid-system you'll see the variable "#grid-gutter-width" that needs to be set to 0.
If you want to have some contents that span outside the gutters, so they can touch adjascent elements, use a class to negate the gutter. Something like
.no-pad{
padding-left:0;
padding-right:0;
}
And add it to all columns you want without gutter.
If you want the background color to touch but still keep a nice sepperation of columns for your text, you can simply apply the background styles on the column itself.
The only way to achieve the result you are after is to remove the padding from Bootstraps column classes, like so:
.col-md-4 {
padding: 0;
}
However the above code will remove the padding from all col-md-4 column classes in your HTML. Best practise would be to add a unique class/ID and target the column that way, like so:
<div class="myClass">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 ">
<div class="box1">
<h1>this is box 1 one</h1>
</div>
</div>
<div class="col-md-4 ">
<div class="box2">
<h1>this is box 1 one</h1>
</div>
</div>
<div class="col-md-4 ">
<div class="box3">
<h1>this is box 1 one</h1>
</div>
</div>
</div>
</div>
</div>
.myClass .row .col-md-4 {
padding: 0;
}
This way you are only targeting specific code and not ALL the columns.
Bootstraps grid system adds "gutters" or padding to each column. Is is this that you want to overwrite. however if you were to simply apply padding:0px; to .col-md-4 you would remove padding from all instances of .col-md-4 which is unlikely.
The way around this would be to give a class to the "row" container which you can then target only instances of .col-md-4 within that class. In this example I have added the class boxes to the row. then in the css I use:
.boxes .col-md-4 {
padding-right: 0;
padding-left: 0;
}
this way, my padding changes are restricted to col-md-4 classes that are children of a boxes class.
I hope that helps.
Working example but using col-xs-4 as much smaller viewport:
.row {
background: #ccc;
}
.box {
height: 100px;
margin-bottom: 20px;
overflow: hidden;
}
.boxes .col-xs-4 {
padding-right: 0;
padding-left: 0;
}
.box1 {
background: red;
}
.box2 {
background: green;
}
.box3 {
background: yellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row boxes">
<div class="col-xs-4">
<div class="box box1">
<h1>this is box 1</h1>
</div>
</div>
<div class="col-xs-4 ">
<div class="box box2">
<h1>this is box 2</h1>
</div>
</div>
<div class="col-xs-4 ">
<div class="box box3">
<h1>this is box 3</h1>
</div>
</div>
Hello I want to stylize this structure HTML with CSS , need to create 3 row . 1.header 2.maincontent 3.footer ! and i need to add a scrollbar for all mainpage , just 1 scrollbar not 1 per each row...
Like is on structure of code I want the style for header , maincontent and footer. Waiting for help.
<div id="header">
<div id="headerLeft">
<div class="msgs">Mesazh</div>
<div class="points">Points</div>
</div>
<div id="headerRight">
<div class="hungry">Hungry: </div>Action:
</div>
<div id="maincontent">
<div class="output">LALALALALALALA</div>
</div>
<div id="footer">
<div id="footerleft">
<div class="onlinePlayer">Klevi</div>
</div>
<div id="footerCenter">
<div class="map">harta</div>
<div class="forum">forumi</div>
<div class="logout">logout</div>
</div>
<div id="footerRight">
<div class="details">details</div>
<div class="inventory">inventory</div>
<div class="support">support</div>
</div>
</div>
</div>
You have already asked about the scrollbar 2 other times today.
The basic way to create a layout is using floats to display divs next to each other. You put these divs in a container. You can make the columns fluid with a percentage or fixed.
The HTML for the header would look like
<div class="row">
<div class="two cols">a</div>
<div class="one cols">s</div>
</div>
First css is for the row or container of the div.
.row {
width: 100%;
max-width: 960px;
margin: 0 auto;
background: #fff;
}
The second css is the base code for each type of column.
.col, .cols {
margin-left: 4.40%;
float: left;
min-height: 1px;
position: relative;
}
Below controls the width for the different columns
.col:first-child, .cols:first-child {
margin-left: 0px;
}
.row .one.cols {
width: 30.4%;
}
.row .two.cols {
width: 65.2%;
}
.row .three.cols {
width: 99.99999999999999%;
}
The example below is based on foundation by ZURB
http://jsfiddle.net/vmbm55fo/