Show floated div with percentage width and different pattern - javascript

I am not very good with CSS, so I am posting my problem here hoping for a solution:
What I need is following:
I need an HTML row/div/line that shows a date and after the date it shows a bar which will be a percentage of the remaining screen width.
Like so:
2015-11-17 ---------------------(50%)
2015-11-18 ------------------------------------------- (80%)
2015-11-19 ==================================================== (100%)
If you will please consider in the dashes as a proper bar (like 10px height for e.g.). You might notice that 50% and 80% have ---- while 100% has ====.
This is because for any percentage less than 100 I want the bar to be a mixed color like blue and white combo. For the 100% it will be a solid blue color bar.
I am trying to achieve this using HTML/CSS only, but I find my expertise to be lacking.
So far, I have following HTML/CSS:
<div style="padding-top: 10px;padding-bottom:10px; width:100%">
<div style='float:left'><strong>Date </strong>{{Today.date}}</div>
<div style='float:left;background-color:red;width:100%'></div>
</div>
The above code does not even show the second div with red background :(
Any pointers in helping me solve this is very much appreciated!

Flexbox could help here depending on your browser support requirements.
.wrap {
width: 80%;
margin: 1rem auto;
font-size: 24px;
display: flex;
align-items: center;
border: 1px solid grey;
}
.date {
padding: 0 1em;
}
.bar {
height: 10px;
background: #f00;
}
.bar-50 {
flex: .5;
}
.bar-80 {
flex: .8;
}
.bar-100 {
flex: 1;
}
<div class="wrap">
<div class="date">2015-11-17</div>
<div class="bar bar-50"></div>
</div>
<div class="wrap">
<div class="date">2015-11-18</div>
<div class="bar bar-80"></div>
</div>
<div class="wrap">
<div class="date">2015-11-19</div>
<div class="bar bar-100"></div>
</div>
Sneaky version with pseudo-element instead of extra HTML
.bar {
width: 80%;
margin: 1rem auto;
font-size: 24px;
display: flex;
align-items: center;
border: 1px solid grey;
}
.date {
padding: 0 1em;
}
.bar::after {
content: '';
height: 10px;
background: #f00;
}
.bar-50:after {
flex: .5;
}
.bar-80:after {
flex: .8;
}
.bar-100:after {
flex: 1;
}
<div class="bar bar-50">
<div class="date">2015-11-17</div>
</div>
<div class="bar bar-80">
<div class="date">2015-11-18</div>
</div>
<div class="bar bar-100">
<div class="date">2015-11-19</div>
</div>
Perhaps more semantically, use a progress element and a label.
Progess Element # MDN
div {
margin: 10px;
}
<div>
<label for="alpha">2015-11-17</label>
<progress id="alpha" value="50" max="100">50 %</progress>
</div>
<div>
<label for="beta">2015-11-18</label>
<progress id="beta" value="70" max="100">70 %</progress>
</div>
<div>
<label for="gamma">2015-11-19</label>
<progress id="gamma" value="100" max="100">70 %</progress>
</div>

You can try this
<div style="padding-top: 10px;padding-bottom:10px; width:100%;position: relative;">
<div style="float: left;width: 50%;display: inline-block;"><strong>Date </strong>{{Today.date}}</div>
<div style="float:left;width: 50%;height: 10px;display: inline-block;">
<div class="progress" style="background-color:red;width: 100%;height: 100%;">
</div></div>
</div>

Related

How to Let Float Items Split the Blank Area in Average?

Please run this demo:
.app {
background:pink;
width: 90vw;
overflow: hidden;
}
.app__item {
background: lightblue;
width: 200px;
float :left;
margin:5px;
height: 40px;
}
.app__item:last-child {
float: right;
}
.app__item--size2 {
height: 90px;
}
<div class="app">
<div class="app__item app__item--size2">1</div>
<div class="app__item">2</div>
<div class="app__item">3</div>
<div class="app__item">4</div>
<div class="app__item">5</div>
<div class="app__item">6</div>
<div class="app__item">7</div>
<div class="app__item">8</div>
<div class="app__item">9</div>
<div class="app__item">10</div>
<div class="app__item">
<button>search</button>
</div>
</div>
Please notice the red color text which is what I want:
How to Let Float Items Split the Blank Area in Average?
This gif point out what I want and also the reason why I am using float layout.
If using flex, the result would be
.app {
background:pink;
width: 80vw;
display: flex;
flex-flow: row wrap;
}
.app__item,
.app__item_wrapper {
margin:5px;
width: 200px;
flex: 0 0 auto;
}
.app__item {
background: lightblue;
height: 40px;
}
.app__item_wrapper {
display: flex;
flex-flow: column;
justify-content: space-between;
}
.app__item--size2 {
height: 90px;
}
.app__item--inner {
margin:0;
flex: 0 0 auto;
}
<div class="app">
<div class="app__item app__item--size2">1</div>
<div class=" app__item_wrapper app__item--size2">
<div class="app__item app__item--inner">2</div>
<div class="app__item app__item--inner">3</div>
</div>
<div class=" app__item_wrapper app__item--size2">
<div class="app__item app__item--inner">4</div>
<div class="app__item app__item--inner">5</div>
</div>
<div class="app__item">6</div>
<div class="app__item">7</div>
<div class="app__item">8</div>
<div class="app__item">
<button>search</button>
</div>
</div>
And the con is that it won't work well when viewport is changing. See this:
and this is the con:
If I understand correctly, you're wanting the cells to the right of "cell 1" to stretch-to-fill the reaming horizontal space of the enclosing div (with pink background).
You could use CSS Grid to achieve this as shown below:
.app {
background:pink;
width: 90vw;
padding:5px;
display:grid;
/* Cause first column with to be 200px, remaining two columns
to scale to fit remaining width */
grid-template-columns: 200px repeat(2, 1fr);
/* Set spacing between cells */
grid-gap:10px;
}
.app__item {
background: lightblue;
width: 100%;
height: 40px;
}
.app__item--size2 {
/* Cause top left cell to occupy two rows */
grid-row: 1 / 3;
height:100%;
}
<div class="app">
<div class="app__item app__item--size2">1</div>
<div class="app__item">2</div>
<div class="app__item">3</div>
<div class="app__item">4</div>
<div class="app__item">5</div>
<div class="app__item">6</div>
<div class="app__item">7</div>
<div class="app__item">8</div>
<div class="app__item">9</div>
<div class="app__item">10</div>
<div class="app__item">
<button>search</button>
</div>
</div>
Thank #Dacre Denny for giving me inspiration. Finally, I got it.
.app {
background:pink;
width: 90vw;
padding:5px;
display:grid;
grid-template-columns: repeat(auto-fit,200px);
justify-content:space-evenly;
grid-gap: 5px;
}
.app__item {
background: lightblue;
width: 200px;
height: 40px;
}
.app__item--size2 {
/* Cause top left cell to occupy two rows */
grid-row: 1 / 3;
height:100%;
}
.app__item:last-child {
grid-column-end: -1
}
<div class="app">
<div class="app__item app__item--size2">1</div>
<div class="app__item">2</div>
<div class="app__item">3</div>
<div class="app__item">4</div>
<div class="app__item">5</div>
<div class="app__item">6</div>
<div class="app__item">7</div>
<div class="app__item">8</div>
<div class="app__item">9</div>
<div class="app__item">10</div>
<div class="app__item">
<button>search</button>
</div>
</div>
See this gif when viewport is changing.

How to create 2 divs with equal height without bootstrap or jquery

I am trying to write a code is CSS and normal javascript but it won't work. Here is my code (HTML and CSS).
.wrapper{
height: 100%;
margin: 1.5rem 0 0 0;
display: flex;
}
.first{
vertical-align: top;
display: inline-block;
margin-right: 2rem;
flex: 1;
}
.second{
vertical-align:top;
display: inline-block;
flex: 1;
}
<div class="wrapper">
<div class="first">
<div class="times">
<div><h1>TIMES</h1><br></div>
<div class="space">
<h2>TIMES</h2>
<p>GESLOTEN</p>
</div>
<div class="space">
<h2>Dinsdag - Zaterdag</h2>
<p>09:30 UUR - 18:00 UUR</p>
</div>
</div>
</div>
<div class="second">
<div class="welcome">
<div><h1>WELKOM</h1></div>
<div><p>TEKST</p></div>
</div>
</div>
</div>
I have tried everything, at least I think I have.
The problem is that I can't fix this in CSS but I tried Java.
Still no success. Can someone please explain why I can't get it the same height.
It's a school project and I need to make a website from scratch.
Here is my full website source code: https://codepen.io/crosso_7/pen/VERrvQ
Both first and second divs are actually the same height - I just copied your snippet and applied a border around each div to see the issue and both divs are equal.
.wrapper{
height: 100%;
margin: 1.5rem 0 0 0;
display: flex;
}
.first{
vertical-align: top;
display: inline-block;
margin-right: 2rem;
flex: 1;
border: solid 1px blue;
}
.second{
vertical-align:top;
display: inline-block;
flex: 1;
border: solid 1px red;
}
<div class="wrapper">
<div class="first">
<div class="times">
<div><h1>TIMES</h1><br></div>
<div class="space">
<h2>TIMES</h2>
<p>GESLOTEN</p>
</div>
<div class="space">
<h2>Dinsdag - Zaterdag</h2>
<p>09:30 UUR - 18:00 UUR</p>
</div>
</div>
</div>
<div class="second">
<div class="welcome">
<div><h1>WELKOM</h1></div>
<div><p>TEKST</p></div>
</div>
</div>
</div>
You can do it using flexbox. Something like this code snippet.
.wrapper {
display: flex;
justify-content: space-between;
}
.wrapper div {
background: #000;
color: #fff;
flex: 1;
margin: 10px;
justify-content: center;
}
<div class='wrapper'>
<div>
<h1>1</h1>
<h2>asasasa</h2>
</div>
<div>2</div>
</div>
Is the first div the one thats higher? It's probably created by the padding from first div content vs seconds less content.
May have to set first and second div with a px or % height which are the same to make it equal.
Try using the code below in your .first and .second divs
flex: 1;
display: flex;

JavaScript changes up my CSS

I have some div boxes in my html and they are formatted the way I want.
Whenever I use JavaScript to change the value of one of the boxes it changes the formatting.
Why is that? And how do I prevent it from doing that?
document.getElementById("0").innerHTML = 20;
body {
background-color: red;
width: 1000px;
margin: 10px;
}
#top {
display: block;
width: 200px;
height: 100px;
}
#bottom {
display: block;
width: 200px;
height: 100px;
}
.box {
height: 94px;
width: 96px;
border: 1px solid white;
display: inline-block;
}
<div id="board">
<div class="row" id="top">
<div class="box" id="0"></div>
<div class="box" id="1"></div>
</div>
<div class="row" id="bottom">
<div class="box" id="2"></div>
<div class="box" id="3"></div>
</div>
</div>
Here is my JSFiddle:
https://jsfiddle.net/pb4759jh68/arbsws5u/
In my fiddle I have my JavaScript statement active, you can comment it out to see what it does to my formatting.
Thanks!!!
It's actually not the JS, but due to the content being added. They align at first because there's no content, but once you add in content, it tries to line up the text with the bottom of the next block. You can avoid this by setting:
vertical-align:top;
to the box class.

Set Columns to be Equal Height with Bootstrap.

This is how my webpage is currently looking:
And what I want is for the height of box 1 to be equal to be the height of box 3, if there was more text to be added to box 1 or 3 etc (and the same for boxes 2 and 4, at the same time).
I also want the length of which ever side is shorter, to be extended so that it is the same length of the longer side, resulting in both sides (green box and 4 boxes combined) having the same height.
More basically: Boxes 1, 2, 3 and 4 all have the same height. The 4 boxes and green box both extend downwards if necessary to the same height, so that the green box's height is roughly double the height of one smaller box.
This is my code currently:
<div class="container">
<div class="row">
<div class="col-xs-6" id="big-box">
<div class="big-box" style="/*INSERT STYLE EFFECTS HERE*/" id="big-box"> /*INSERT BIG PARAGRAPH HERE*/
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6">
<div class="mini-box" id="firstBox">1</div>
</div>
<div class="col-xs-6">
<div class="mini-box" id="secondBox">2</div>
</div>
<div class="col-xs-6">
<div class="mini-box" id="thirdBox">3</div>
</div>
<div class="col-xs-6">
<div class="mini-box" id="fourthBox">4</div>
</div>
</div>
</div>
</div>
</div>
With some basic CSS to change the looks of the text and background colour etc.
I have tried playoing around with Javascript, Bootstrap, and CSS properties to try and make this possible, but so far nothing has worked. Any help?
Thanks in advance
I personally don't like the bootstrap class names but that is beside the point. So I think you need to change the CSS:
.row {
position: relative; // set bounds for mini-box absolute.
}
.mini-box {
position: absolute;
top: 0px;
bottom: 0px;
}
I'm not a big fan of bootstrap so i have a alternative,
flexbox. the parent has a height: 200px; were every child in that wil align too but i couldn't fix it with a second child with in the row. so i fixed it with height: 95px; because of the 10px margin
.parent {
align-items: flex;
display: flex;
height: 200px;
}
row {} .child1 {
background-color: green;
color: #fff;
width: 300px;
margin: 0 10px;
}
.child2 {
background-color: grey;
color: #fff;
margin: 0 10px 10px;
height: 95px;
}
.child3 {
background-color: red;
color: #fff;
margin: 0 10px;
height: 95px;
}
.child4 {
background-color: pink;
color: #fff;
margin: 0 10px 10px;
height: 95px;
}
.child5 {
background-color: black;
color: #fff;
margin: 0 10px;
height: 95px;
}
<div class="parent">
<div class="child1">text big</div>
<div class="row">
<div class="child2">text 1</div>
<div class="child3">text 2</div>
</div>
<div class="row">
<div class="child4">text 3</div>
<div class="child5">text 4</div>
</div>
</div>
css tricks for more info over flexbox

How to make Responsive Text [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have an example Calendar Days
.month-days-wrapper {
display: inline-block;
}
.day-wrapper {
float: left;
}
.day-header {
font-weight: 400;
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 26px;
}
.day-weekday {
background-color: #ededee;
}
.day-weekend {
background-color: #e3e3e3;
}
.day-body {
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 50px;
}
.end-ellipsis {
margin-left: 3px;
color: #ffffff;
vertical-align: middle;
text-align: left;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
<div class="month-days-wrapper">
<div class="day-wrapper">
<div class="day-header day-weekday">We</div>
<div class="day-body">
<div class="day-body-day">25</div>
<div style="z-index: 1; position: relative; left: 21px; top: 5px; width: 174px; height: 20px; background-color: green; border-radius: 5px" onmouseout="hidePopup();" onmousemove="showPopup(event, this, 'Owner', 'Booking', '0', '0');">
<div class="end-ellipsis">Tom Jones - $4,000</div>
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Th</div>
<div class="day-body">
<div class="day-body-day">26</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Fr</div>
<div class="day-body">
<div class="day-body-day">27</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Sa</div>
<div class="day-body">
<div class="day-body-day">28</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Su</div>
<div class="day-body">
<div class="day-body-day">29</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Mo</div>
<div class="day-body">
<div class="day-body-day">30</div>
</div>
</div>
</div>
Squeeze the Result horizontally and you will see the days are responsive.
(Totally ignore the green line please as that will be taken care of by server side coding.)
The challenge is to make the text “Tom Jones – $4,000” responsive also.
Can this be done via CSS and maybe JS as well?
Edit
Please have a look at this image as it will hopefully explain what I am getting at clearly.
More Detailed Image http://d29u7d0naxols0.cloudfront.net/TextFlowsWithDays.jpg
More edit.
Background: This is a monthly line calendar for a booking app whose days move to the second row, third row, etc when its container is narrowed. This works perfectly well.
12 months-at-a-time are shown on the web page.
When a property is booked the calendar needs to show the Name and $Amount starting ON THE FIRST DAY of the booking.
When the calendar is narrowed and a day goes to the following row the text must track the day as shown in the image above.
Boundary Conditions
A booking may be one night or 100s of nights.
If a short booking and all text cannot be fitted in then finish it with ellipsis.
The text must flow across month boundaries. eg booking starts on Nov 30 so text must flow to Dec 1 etc
If anyone can do this then I will pay an agreed amount otherwise I will go to Freelancer.com. (I am offering the $s here as people have made an effort already and should be rewarded if they can "bring home the goods".)
Cheers
You do not need js, you can use scalable values for your text on font-size
vh is the percentage of the height
font-size:2vh
vw is the percentage of the width
font-size:2vw
vmin is the percentage of the shorter one (useful for mobile)
font-size:2vmin
vmax is the percentage of the longer one
font-size:2vmax
Its hard to get a feel for exactly what you're going for here, but here are a couple of thoughts.
In your original code, the green background booking info is part of the div for the day on which it starts. As long as you do things this way, it will never scale properly when you adjust the screen size.
With that in mind, here is a modified code which moves the booking info to the end of the date container, which will keep it there as you resize the page.
</head>
<body>
<div class="month-days-wrapper">
<div class="day-wrapper">
<div class="day-header day-weekday">We
</div>
<div class="day-body">
<div class="day-body-day">25
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Th
</div>
<div class="day-body">
<div class="day-body-day">26
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Fr
</div>
<div class="day-body">
<div class="day-body-day">27
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Sa
</div>
<div class="day-body">
<div class="day-body-day">28
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Su
</div>
<div class="day-body">
<div class="day-body-day">29
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Mo
</div>
<div class="day-body">
<div class="day-body-day">30
</div>
</div>
</div>
<div class='text-container' onmouseout="hidePopup();" onmousemove="showPopup(event, this, 'Owner', 'Booking', '0', '0');">
<div class="end-ellipsis">Tom Jones - $4,000
</div>
</div>
</div>
</div>
</body>
</html>
.month-days-wrapper {
display: inline-block;
position: relative;
}
.day-wrapper {
float: left;
}
and the CSS:
.day-header {
font-weight: 400;
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 26px;
}
.day-weekday {
background-color: #ededee;
}
.day-weekend {
background-color: #e3e3e3;
}
.day-body {
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 50px;
}
.end-ellipsis {
margin-left: 3px;
color: #ffffff;
vertical-align: middle;
text-align: left;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.text-container {
z-index: 10;
position: absolute;
left: 21px;
bottom: 5px;
width: 174px;
height: 20px;
left: 50%;
margin-left: -87px;
background-color: green;
border-radius: 5px;
}
However, as a related point, is this is part of a larger application (looks like it might be related to some kind of booking system), you might want to consider dynamically setting the background colors of the date divs rather than putting this overlay on them. It will be much less finicky. Just a thought.
Good luck, and welcome to Stack Overflow!
A little tricky, but I think this is what you need JSfiddle
Splitted the word in multiple containers and gave them display:inline-block
Maybe you cold try a trick with line-height, then use an extra span container (or child div itself), position:absolute and word-wrap/word-break :
.end-ellipsis class is removed.
remove test width from .month-days-wrapper to test on resize or play with http://codepen.io/anon/pen/dYBypL .
.month-days-wrapper {
display: inline-block;
width: 160px;
position: relative;
}
.day-wrapper {
float: left;
}
.day-header {
font-weight: 400;
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 26px;
}
.day-weekday {
background-color: #ededee;
}
.day-weekend {
background-color: #e3e3e3;
}
.day-body {
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 50px;
}
.end-ellipsis {
margin-left: 3px;
color: #ffffff;
vertical-align: middle;
text-align: left;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.brlines {
z-index: 1;
position: absolute;
max-width: 100%;
text-align: left;
margin-top: -1.6em;
text-indent: 1em;
word-wrap: break-word;
word-break: break-all
}
.brlines span {
display: inline;
word-wrap: break-word;
word-break: break-all;
line-height: 5em;
background-color: green;
border-radius: 5px;
padding: 0 1em;
}
<div class="month-days-wrapper">
<div class="day-wrapper">
<div class="day-header day-weekday">We</div>
<div class="day-body">
<div class="day-body-day">25</div>
<div class="brlines">
<div onmouseout="hidePopup();" onmousemove="showPopup(event, this, 'Owner', 'Booking', '0', '0');"><span>Tom Jones - $4,000</span>
</div>
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Th</div>
<div class="day-body">
<div class="day-body-day">26</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Fr</div>
<div class="day-body">
<div class="day-body-day">27</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Sa</div>
<div class="day-body">
<div class="day-body-day">28</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Su</div>
<div class="day-body">
<div class="day-body-day">29</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Mo</div>
<div class="day-body">
<div class="day-body-day">30</div>
</div>
</div>
</div>

Categories

Resources