How can make this display as horizontal current is vertical, something that left to right not top to bottom.
I tried display:flex but only the extra-text class get display:flex no the outside div.
.main-text:hover + .extra-text{
display:block;
}
.extra-text{
background-color: #FFFFFF;
margin-top: 10px;
width: 70%;
border: 2px solid #000000;
padding: 12px;
font-size: 10px;
display: none;
}
<div style="padding:12px;width:15%; border:2px solid purple; border-radius:8px;">
<div class="main-text">Abcd,</div>
<div class="extra-text"> test 1 test 2 test 3</div>
</div>
<div style="padding:12px;width:15%; border:2px solid purple; border-radius:8px;">
<div class="main-text">Abcd,</div>
<div class="extra-text"> test 1 test 2 test 3</div>
</div>
<div style="padding:12px;width:15%; border:2px solid purple; border-radius:8px;">
<div class="main-text">Abcd,</div>
<div class="extra-text"> test 1 test 2 test 3</div>
</div>
<div style="padding:12px;width:15%; border:2px solid purple; border-radius:8px;">
<div class="main-text">Abcd,</div>
<div class="extra-text"> test 1 test 2 test 3</div>
</div>
There are multiple ways of going about this but the easiest with your current example would be to wrap your existing code with a div with width = 100% and display: flex.
.main-text:hover + .extra-text{
display:block;
}
.extra-text{
background-color: #FFFFFF;
margin-top: 10px;
width: 70%;
border: 2px solid #000000;
padding: 12px;
font-size: 10px;
display: none;
}
<div style="width: 100%; display: flex;">
<div style="padding:12px;width:15%; border:2px solid purple; border-radius:8px;">
<div class="main-text">Abcd,</div>
<div class="extra-text"> test 1 test 2 test 3</div>
</div>
<div style="padding:12px;width:15%; border:2px solid purple; border-radius:8px;">
<div class="main-text">Abcd,</div>
<div class="extra-text"> test 1 test 2 test 3</div>
</div>
<div style="padding:12px;width:15%; border:2px solid purple; border-radius:8px;">
<div class="main-text">Abcd,</div>
<div class="extra-text"> test 1 test 2 test 3</div>
</div>
<div style="padding:12px;width:15%; border:2px solid purple; border-radius:8px;">
<div class="main-text">Abcd,</div>
<div class="extra-text"> test 1 test 2 test 3</div>
</div>
</div>
display: flex is used on parent node, controll his children's display, with flex-direction: column make children show in cloumn.
Related
I am building a css table using display: table that needs to satisfy two requirements
Bottom half of each row is custom content that spans full width of table
Visible margin between rows
I've tried messing with colspan and border spacing but haven't been able to make it work
Closest is using border-spacing and an additional table row, but I can't make the border-spacing only apply to every other row, and can't make my custom row full width of the table
<div class="table">
<div class="tr">
<div class="td">aaaa 1</div>
<div class="td">aaaa 2</div>
<div class="td">aaaa 3</div>
<div class="td">aaaa 4</div>
</div>
<div class="tr extra-info">
extra row of info
</div>
</div>
.tr {
display: table-row;
box-shadow: 0px 5px 12px red;
background-color: $white;
}
.td {
display: table-cell;
padding: 20px;
}
.extra-info {
display: table-cell;
height: 40px;
}
See https://codepen.io/joshuaohana/pen/VwzWbZp for non working example
I'd like to make the "extra row of info" in the codepen here
full width
connected to its row above so there's no margin or red border behind
How can I set this up with colspan or border-spacing or some other?
I am inserting another answer because I am unable to create a fiddle or codepen. So in this snippet, you can see that the margin is showing through the background, I suppose this is what you mean by that. I added another div, just above the table row, and included the extra-info in that div, and named it row1 and row 2 for each row and its extra-info. Now the key here is the display property "table-row-group" that allows us to cover row data and extra info in a div otherwise the width of the row is messed up. As for the spacing between the header and the rows+extra-info is concerned I "think" the best way is to use br below every div where you want to insert space.
.main{
margin: 20px;
border-collapse: separate;
}
.table {
display: table;
margin: auto;
width: 100%;
table-layout: auto;
}
.th {
display: table-row;
cursor: pointer;
}
.tr{
display: table-row;
cursor: pointer;
outline: 1px solid red;
}
.td {
display: table-cell;
text-align: left;
padding: 20px;
}
div .th {
outline: 2px solid black;
box-shadow: 0px 5px 12px black;
}
.extra-info{
display: table-row;
outline: 1px solid black;
height: 35px;
width: 100%;
}
.style{
color: black;
}
#row1{
display: table-row-group;
box-shadow: 0px 5px 12px black;
border-spacing: 0em 3rem;
}
#row2{
display: table-row-group;
box-shadow: 0px 5px 12px black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="hw1.css">
</head>
<body>
<div class="main">
<div class="table">
<div class="th">
<div class="td">Heading 1</div>
<div class="td">Heading 2</div>
<div class="td">Heading 3</div>
<div class="td">Heading 4</div>
</div>
<br>
<div id="row1">
<div class="tr row">
<div class="td">aaaa 1</div>
<div class="td">aaaa 2</div>
<div class="td">aaaa 3</div>
<div class="td">aaaa 4</div>
</div>
<div class="tr extra-info">
extra row of info
</div>
</div>
<br>
<div id="row2">
<div class="tr row">
<div class="td">bbbb 1</div>
<div class="td">bbbb 2</div>
<div class="td">bbbb 3</div>
<div class="td">bbbb 4</div>
</div>
<div class="tr extra-info">
extra row of info
</div>
</div>
</div>
</body>
</html>
When you declare the width of the table the spacing between the table data is automatically calculated. You can make a div main to give it a box-shadow property. I have given a solid 1px black border to rows, if you want to give a border for columns you have to write the outline: 1px solid black in .td.
.main{
margin: 20px;
box-shadow: 0px 5px 12px red;
border-collapse: separate;
}
.table {
display: table;
margin: auto;
width: 100%;
table-layout: auto;
}
.th {
display: table-row;
cursor: pointer;
}
.tr{
display: table-row;
cursor: pointer;
outline: 1px solid red;
}
.td {
display: table-cell;
text-align: left;
padding: 20px;
}
div .th {
outline: 2px solid black;
}
.extra-info{
display: table-row;
outline: 1px solid black;
height: 35px;
width: 100%;
}
.style{
color: black;
}
.tr{
}
<div class="main">
<div class="table">
<div class="th">
<div class="td">Heading 1</div>
<div class="td">Heading 2</div>
<div class="td">Heading 3</div>
<div class="td">Heading 4</div>
</div>
<br>
<div class="tr">
<div class="td">aaaa 1</div>
<div class="td">aaaa 2</div>
<div class="td">aaaa 3</div>
<div class="td">aaaa 4</div>
</div>
<div class="tr extra-info">
extra row of info
</div>
<br>
<div class="tr">
<div class="td">bbbb 1</div>
<div class="td">bbbb 2</div>
<div class="td">bbbb 3</div>
<div class="td">bbbb 4</div>
</div>
<div class="tr extra-info">
extra row of info
</div>
</div>
</div>
How can I make bootstrap 4.5 one column height change bigger so that there would be no gaps in the grid? See the picture below (test 2 and test 4 columns should be with no gap and ONLY test 1 should be higher, other the same height).
Start position is that all the columns are equal height. I might use jquery to expand the "test 1" column.
Relevant code here:
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-lg-6" style="height: 400px; background: #eee; border: 1px solid #333;">
test 1
</div>
<div class="col-lg-6" style="height: 200px; background: #eee; border: 1px solid #333;">
test 2
</div>
<div class="col-lg-6" style="height: 200px; background: #eee; border: 1px solid #333;">
test 3
</div>
<div class="col-lg-6" style="height: 200px; background: #eee; border: 1px solid #333;">
test 4
</div>
</div>
</div>
</div>
</div>
You could just use min-height: 200px; instead of just setting the height.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-lg-6" style="height: 400px; background: #eee; border: 1px solid #333;">
test 1
</div>
<div class="col-lg-6" style="min-height: 200px; background: #eee; border: 1px solid #333;">
test 2
</div>
<div class="col-lg-6" style="height: 200px; background: #eee; border: 1px solid #333;">
test 3
</div>
<div class="col-lg-6" style="height: 200px; background: #eee; border: 1px solid #333;">
test 4
</div>
</div>
</div>
</div>
</div>
I can get it working with two flex columns but then the order does not work in phone layout (it will be 1,3,...). See the images:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="container">
<div class="row">
<div style="col-lg-6 d-flex flex-column">
<div class="" style="height: 400px; width: 300px; background: #eee; border: 1px solid #333;">
test 1
</div>
<div class="" style="height: 200px; width: 300px; background: #eee; border: 1px solid #333;">
test 3
</div>
</div>
<div style="col-lg-6 d-flex flex-column">
<div class="" style="height: 200px; width: 300px; background: #eee; border: 1px solid #333;">
test 2
</div>
<div class="" style="height: 200px; width: 300px; background: #eee; border: 1px solid #333;">
test 4 sigh
</div>
</div>
</div>
</div>
And actually this is possible by making my own float columns. They seem to work without gaps (float left always fills the space correctly).
so I get some problem with the horizontal scroll, I read a lot about the fixed-width items inside the scroll containers but what about next thing:
how to write styles that will be automatically set the width of non-fixed-width items like (item with classes weeks and date)
.container {
display: flex;
flex-direction: column;
flex: 1;
overflow-x: auto;
margin: 0 1rem;
border: 1px solid grey;
}
.container__columns {
display: flex;
flex: auto;
}
.container__rows {
display: flex;
flex: 1;
flex-direction: column;
}
.col {
flex: 0 0 250px;
max-width: 250px;
padding: 1rem 4rem;
background: lightgoldenrodyellow;
color: #000;
border-left: 1px solid grey;
border-right: 1px solid grey;
}
.weeks,
.date {
padding-left: 1rem;
}
.weeks {
background: lightgrey;
border-top: 1px solid grey;
border-bottom: 1px solid grey;
}
.date {
background: lightgrey;
border-bottom: 1px solid grey;
}
<div class="container">
<div class="container__columns">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="col">9</div>
</div>
<div class="container__rows">
<div class="weeks">
Week 1
</div>
<div class="date">
Augest 23, 1998, 24 - hours
</div>
<div class="container__columns">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="col">9</div>
</div>
</div>
</div>
I expect the next thing: the CSS which will be set items with classes date and weeks to full width.
consider inline-flex; for the inner container and remove flex for the main container as it's not really needed in your case.
.container {
overflow-x: auto;
margin: 0 1rem;
border: 1px solid grey;
}
.container__columns {
display: inline-flex;
}
.container__rows {
display: inline-flex;
flex-direction: column;
}
.col {
width:250px;
padding: 1rem 4rem;
background: lightgoldenrodyellow;
color: #000;
border-left: 1px solid grey;
border-right: 1px solid grey;
}
.weeks,
.date {
padding-left: 1rem;
}
.weeks {
background: lightgrey;
border-top: 1px solid grey;
border-bottom: 1px solid grey;
}
.date {
background: lightgrey;
border-bottom: 1px solid grey;
}
<div class="container">
<div class="container__columns">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="col">9</div>
</div>
<div class="container__rows">
<div class="weeks">
Week 1
</div>
<div class="date">
Augest 23, 1998, 24 - hours
</div>
<div class="container__columns">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="col">9</div>
</div>
</div>
</div>
I'm new to ASP.Net CSS.
Can anyone tell me how can I align my box with its description up(color_box) and down(description).
This is my current issue image.
My CSS image
My Html Code Below:
<div class="container-box">
<div class="box blue">
<div class="text blue">Blue</div>
</div>
<div class="box black">
<div class="text black">Black</div>
</div>
<div class="box green">
<div class="text green">Green</div>
</div>
</div>
My CSS Code Below:
.container-box{
border: 1px solid black;
background-color: lightblue;
padding-top: 40px;
padding-right: 50px;
padding-bottom: 350px;
padding-left: 80px;
}
.box{
float: left;
width: 20px;
height: 100px;
margin: 10px;
margin-left:0.01%;
border: 80px solid rgba(0, 0, 0, .2);
}
.blue{
background:blue;
}
.black{
background:black;
}
.green{
background:green;
}
.text{
float: left;
width: 320px;
padding: 10px;
border: 5px solid dotted;
margin:100px;
margin-right:100%;
color:white;
}
<div class="container-box">
<div class="box blue">
<div class="text blue">Blue</div>
</div>
<div class="box black">
<div class="text black">Black</div>
</div>
<div class="box green">
<div class="text green">Green</div>
</div>
</div>
Correct me or please provide me some solution for my doubt.
Thank you.
I have a page with 6 <div> tags and Have no access to Html of this page.So I try to create a table with css For these fields.
Please See the attached Picture:
The Html codes is like this for every 4 fields:
My HTML Codes are like following in my site :
<div class="group">
<h3>
<span>title-group</span>
</h3>
<div class="field-1">
<div class="field-label">field-1</div>
<div class="field-items">
<div class="field-item even">11111111</div>
<div class="field-item odd">2222222222222222</div>
<div class="field-item even">333333333333</div>
</div>
</div>
<div class="field-2">
<div class="field-label">field-2</div>
<div class="field-items">
<div class="field-item even">1111111111111111111111111</div>
<div class="field-item odd">22222222222222222222</div>
<div class="field-item even">333333333333333333333333333333333</div>
</div>
</div>
<div class="field-3">
<div class="field-label">field-3</div>
<div class="field-items">
<div class="field-item even">11111111111111111111111111111111111111111111</div>
<div class="field-item odd">222222222222222222222222222222222</div>
<div class="field-item even">3333333333333333333333333333333</div>
</div>
</div>
<div class="field-4">
<div class="field-label">field-4</div>
<div class="field-items">
<div class="field-item even">
<span class="file">fiele</div>
<span class="file">fiele</div>
</div>
</div>
</div>
I Use css For float these tags and create a table , but every cell have different height for content,I want to have equal height for cells (field-item) . I Can add height:100px; but if content of A cell be more that 100px my table will destroy.I want to set height of two fields on the right and left side equal with two fields on middle of table.beacause content of these two middle fields are different wit differrent height.
My CSS thats used:
.field {
display: table;
}
.field-items {
display: table-row;
}
.field-item {
display: table-cell;
padding: 15px 5px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
.field-item:first-child {
border-left: 1px solid #000;
}
.field:first-child .field-item,
.field-items + .field-items .field-item {
border-top: 1px solid #000;
}
New picture after css addition:
Please Help me.
If you want to use a table, why do you not use the table tag instead of div?
But if you want to use div you can change the CSS to let it "be" a table
.field-1 {
display: table;
}
.field-items {
display: table-row;
}
.field-item {
display: table-cell;
padding: 15px 5px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
.field-item:first-child {
border-left: 1px solid #000;
}
.field-items:first-child .field-item {
border-top: 1px solid #000;
}
<div class="field-1">
<div class="field-items">
<div class="field-item">test</div>
<div class="field-item">testestsetse stsetset sets<br/> sdfsdf<br/> sdifgs</div>
<div class="field-item">testestsetse stsetset sets<br/> sdfsdf</div>
</div>
</div>
Update with 3 rows and columns
.field {
display: table;
}
.field-items {
display: table-row;
}
.field-item {
display: table-cell;
padding: 15px 5px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
.field-item:first-child {
border-left: 1px solid #000;
}
.field:first-child .field-item,
.field-items + .field-items .field-item {
border-top: 1px solid #000;
}
<div class="field">
<div class="field-items">
<div class="field-item">test</div>
<div class="field-item">testestsetse stsetset sets<br/> sdfsdf<br/> sdifgs</div>
<div class="field-item">testestsetse stsetset sets<br/> sdfsdf</div>
</div>
</div>
<div class="field">
<div class="field-items">
<div class="field-item">test</div>
<div class="field-item">testestsetse stsetset sets<br/> sdfsdf<br/> sdifgs</div>
<div class="field-item">testestsetse stsetset sets<br/> sdfsdf</div>
</div>
</div>
<div class="field">
<div class="field-items">
<div class="field-item">test</div>
<div class="field-item">testestsetse stsetset sets<br/> sdfsdf<br/> sdifgs</div>
<div class="field-item">testestsetse stsetset sets<br/> sdfsdf</div>
</div>
</div>