Head div with four sub div - javascript

Goodmorning developers,
I am new in frontend development. I'm stuck with the following problem:
I want to have a head div with 4 sub divs inside the head one. How can I do it with fitting the screen? (see sketch)
Kind regards

I think you need this please check:
See Fiddle Demo
.container {
border: 3px solid;
float: left;
width: 100%;
}
.custom_box {
float: left;
width: 100%;
}
.custom_box1 {
border: 3px solid;
float: left;
margin: 2%;
text-align: center;
width: 35%;
}
.custom_box2 {
border: 3px solid;
float: left;
margin: 2%;
text-align: center;
width: 55%;
}
<div class="container">
<div class="custom_box">
<div class="custom_box1">
<h1>1</h1>
</div>
<div class="custom_box2">
<h1>2</h1>
</div>
</div>
<div class="custom_box">
<div class="custom_box1">
<h1>1</h1>
</div>
<div class="custom_box2">
<h1>2</h1>
</div>
</div>
</div>

Here is the fiddle: https://jsfiddle.net/9Lum94me/
There are other ways as well with CSS floats, flexbox and table-cell which you can explore.
HTML:
<div class="container">
<div class="row">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
</div>
<div class="row">
<div class="column">Column 3</div>
<div class="column">Column 4</div>
</div>
</div>
CSS:
.container{
border: 1px solid gray;
}
.row{
padding: 10px;
}
.row .column{
display: inline-block;
min-width: 45%; min-height: 150px; border: 1px solid gray; margin: 0 4% 0 0;
}
EDIT:
You will have to manage the widths of the columns as per needs.

A bootstrap responsive example without any style...(Except bordering).
Fiddle example
.content{
border:2px solid green;
height:100px;
width:92%;
margin:20px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="border:1px solid blue;">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="row no-gutter-2">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="content">Header1</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="content">Header2</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="content">Header3</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="content">Header4</div>
</div>
</div>
</div>
</div>
To test the responsiveness, plz re-size the browser window.
Above example is responsive on small, medium and large scale.
Please run the snippet on full page.

Related

Avoid vertical scrollbar shift in container

In html, I have a panel with a fixed height which contains cards. It can contain one card or many cards. Hence, because the panel has a fixed height, it can be needed to have a scrollbar displayed in order to visualize all cards. This works properly with the property overflow: auto.
However, when the scrollbar is displayed, cards are shift. I would like to avoid that or at least hide this shift with a trick. I checked a lot of similar questions that suggests to use padding-left: calc(100vw - 100%); but it did not work since it is not the body scrollbar. The width of the card needs to be responsive according to the container's width.
Something that could work is to set the overflow: overlay and add a padding-right. However, this is not a standard and not compatible with firefox.
Here, you can find a reproduce example:
let flag = true;
const setHeight = () => {
if (flag) {
document.getElementById('container').style.setProperty('height', '100%');
} else {
document.getElementById('container').style.removeProperty('height');
}
flag = !flag;
};
document.getElementById('button').addEventListener('click', setHeight);
setHeight();
.panel-container {
height: 300px;
width: 510px;
padding: 8px 20px 0;
background-color: blue;
overflow: auto;
}
.card {
height: 86px;
width: 100%;
background-color: grey;
border-radius: 3px;
border: 1px solid red;
margin-bottom: 10px;
cursor: pointer;
}
.scrollbar::-webkit-scrollbar-track {
width: 14px;
}
.scrollbar::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 4px solid green;
}
.scrollbar::-webkit-scrollbar-corner {
background-color: transparent;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
<button id="button">With/Without overflow</button>
<div id="container" class="panel-container scrollbar">
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
</div>
In fact, it was quite simple. Just play with the margin and set the overflow to scroll.
let flag = true;
const setHeight = () => {
if (flag) {
document.getElementById('container').style.setProperty('height', '100%');
} else {
document.getElementById('container').style.removeProperty('height');
}
flag = !flag;
};
document.getElementById('button').addEventListener('click', setHeight);
setHeight();
.panel-container {
height: 300px;
width: 510px;
padding: 8px 12px 0 20px;
background-color: blue;
overflow: scroll;
}
.card {
height: 86px;
width: 100%;
background-color: grey;
border-radius: 3px;
border: 1px solid red;
margin-bottom: 10px;
cursor: pointer;
}
.scrollbar::-webkit-scrollbar-track {
width: 14px;
}
.scrollbar::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 4px solid green;
}
.scrollbar::-webkit-scrollbar-corner {
background-color: transparent;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
<button id="button">With/Without overflow</button>
<div id="container" class="panel-container scrollbar">
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
</div>

Make progress bars responsive

I have these progress bars which are suppose to work as ratings and they look good:
I have applied some CSS and I change their width with JavaScript by reading values from text files.
But are not responsive at all and whenever the window is resized:
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="second-part">
<div class="row">
<div class="side">
<div>5 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar11" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p11">150</div>
</div>
<div class="side">
<div>4 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar12" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p12">63</div>
</div>
<div class="side">
<div>3 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar13" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p13">15</div>
</div>
<div class="side">
<div>2 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar14" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p14">6</div>
</div>
<div class="side">
<div>1 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar15" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p15">20</div>
</div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
/* Three column layout */
.side {
float: left;
width: 15%;
margin-top:10px;
}
.middle {
margin-top:10px;
float: left;
width: 70%;
}
/* Place text to the right */
.right {
text-align: left;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The bar container */
.bar-container {
width: 90%;
background-color: #f1f1f1;
text-align: center;
color: white;
}
/* Responsive layout - make the columns stack on top of each other instead of next to each other */
#media (max-width: 400px) {
.side, .middle {
width: 100%;
}
.right {
display: none;
}
}
JavaScript to change progress bar width:
var par1 = 4;
for(var i = 10; i < 16; i++) {
$('.p' + (i+1)).text(table[0][par1]);
$('.bar' + (i+1)).css("width", table[0][par1]);
par1++;
}
How could I make it more responsive? Thank you in advance!
I recommend using css flexbox, so the items wrap instead of overlap when the page is resized. You could use media queries with this to adjust the size of the items and container so they don't overlap/wrap. This site has a good explanation of flexbox: A Complete Guide to Flexbox.

Thicker border lines on sticking divs

I am creating my own full calendar and I have a problem with a border.
In places where divs touch, border lines are thicker because each element has own border and obviously in this places the border is rendered twice.
Depending on month, the calendar has different layout, so hardcoding isn't a good idea.
I prepared example here:
.block {
border: 1px solid black;
width: 80px;
height: 80px;
float: left;
}
<div class="block">1 </div>
<div class="block">2 </div>
<div class="block">3 </div>
<div class="block">4 </div>
<div class="block">5 </div>
<div class="block">6 </div>
<div class="block">7 </div>
View on JSFIddle
And my question is:
Is there a SMART or tricky way to solve this problem?
I may use plain JavaScript or CSS, but not jQuery.
Use this
.container{
display: inline-block;
border-top: 1px solid black;
border-left: 1px solid black;
}
.block {
border-right: 1px solid black;
border-bottom: 1px solid black;
width: 80px;
height: 80px;
float:left;
}
Wrap all your divs inside a container div and do the above mentioned styling. This way elements will not have overlapping borders.
.container {
display: inline-block;
border-top: 1px solid black;
border-left: 1px solid black;
}
.block {
border-right: 1px solid black;
border-bottom: 1px solid black;
width: 30px;
height: 30px;
float: left;
}
<div class="container">
<div class="block">1 </div>
<div class="block">2 </div>
<div class="block">3 </div>
<div class="block">4 </div>
<div class="block">5 </div>
<div class="block">6 </div>
<div class="block">7 </div>
<div style="clear: both"> </div>
<div class="block">8 </div>
<div class="block">9 </div>
<div class="block">10 </div>
<div class="block">11 </div>
<div class="block">12 </div>
<div class="block">13 </div>
<div class="block">14 </div>
<div style="clear: both"> </div>
<div class="block">15 </div>
<div class="block">16 </div>
<div class="block">17 </div>
<div class="block">18 </div>
<div class="block">19 </div>
<div class="block">20 </div>
<div class="block">21 </div>
<div style="clear: both"> </div>
<div class="block">22 </div>
<div class="block">23 </div>
<div class="block">24 </div>
<div class="block">25 </div>
<div class="block">26 </div>
<div class="block">27 </div>
<div class="block">28 </div>
<div style="clear: both"> </div>
<div class="block">29 </div>
<div class="block">30 </div>
<div class="block">31 </div>
</div>
Here I have reduced the height for better visibility.
A quick fix is just add
margin-right: -1px;
margin-bottom: -1px;
to the .block class.
https://jsfiddle.net/w76o9kL4/20/
Remove border right for every block except the last one.
<div class="block">1 </div>
<div class="block">2 </div>
<div class="block">3 </div>
<div class="block">4 </div>
<div class="block">5 </div>
<div class="block">6 </div>
<div class="block last">7 </div>
<style>
.block {
border: 1px solid black;
border-right: none;
width: 80px;
height: 80px;
float:left;
}
.last {
border-right : 1px solid black;
}
</style>
Simple css3 selector using + you can target sibling elements. Take a look
.block + .block {border-left:0px;}
Hope this is what you were looking for. Happy to explain or help in a better solution if needed.
.block {
border: 1px solid black;
width: 40px;
height: 40px;
float: left;
}
.block + .block {border-left:0px;}
<div class="block">1 </div>
<div class="block">2 </div>
<div class="block">3 </div>
<div class="block">4 </div>
<div class="block">5 </div>
<div class="block">6 </div>
<div class="block">7 </div>

1px border between floated and unfloated divs

The goal is to create grid with indented rows where the last cell fills to right hand side of the page with a 1px border around each cell.
The problem in the attempt below is that the border of the last cell of a row extends the full page width which creates unwanted borders around an indent. This seems strange because the div contents are correctly aligned.
http://jsfiddle.net/woqpq508/1/
<style>
.table {
border-collapse:collapse;
}
.row {
}
.indent {
min-width: 20px;
float: left;
}
.cell {
border-style: solid;
border-width: 1px;
margin-left: -1px;
margin-bottom: -1px;
float: left;
}
.lastcell {
float: none;
}
</style>
<div class="table">
<div class="row">
<div class="cell">x</div>
<div class="cell">y</div>
<div class="cell">zzz</div>
<div class="cell lastcell" contenteditable="true">long text</div>
</div>
<div class="row">
<div class="indent"> </div>
<div class="cell">x</div>
<div class="cell">y</div>
<div class="cell">zzz</div>
<div class="cell lastcell" contenteditable="true">long text</div>
</div>
<div class="row">
<div class="cell">x</div>
<div class="cell">y</div>
<div class="cell">zzz</div>
<div class="cell lastcell" contenteditable="true">long text</div>
</div>
</div>
As said in the comment, you'd achieve what you want with display:table/table-cell.
.table {
border-collapse: collapse;
display: table;
width: 100%;
}
.row {
margin-bottom: -1px;
}
.indent {
min-width: 20px;
display: table-cell;
}
.cell {
border-style: solid;
border-width: 1px;
display: table-cell;
}
.lastcell {
width: 100%;
}
<div class="table">
<div class="row">
<div class="cell">x</div>
<div class="cell">y</div>
<div class="cell">zzz</div>
<div class="cell lastcell" contenteditable="true">long text</div>
</div>
<div class="row">
<div class="indent"> </div>
<div class="cell">x</div>
<div class="cell">y</div>
<div class="cell">zzz</div>
<div class="cell lastcell" contenteditable="true">long text</div>
</div>
<div class="row">
<div class="cell">x</div>
<div class="cell">y</div>
<div class="cell">zzz</div>
<div class="cell lastcell" contenteditable="true">long text</div>
</div>
</div>
Fiddle from your comment
You could always draw a border around the row and only give each cell (except the last one) a border-left:
.indent {
min-width: 20px;
float: left;
}
.cell {
border-right: 1px solid;
margin-left: -1px;
float: left;
}
.lastcell {
border: 0;
float: none;
}
.container > div {
border: 1px solid;
border-top: 0;
}
.container > div:first-child {
border-top: 1px solid;
}
<div class="container">
<div>
<div class="cell">x</div>
<div class="cell">y</div>
<div class="cell">zzz</div>
<div class="cell lastcell" contenteditable="true">long text</div>
</div>
<div>
<div class="indent"> </div>
<div class="cell">x</div>
<div class="cell">y</div>
<div class="cell">zzz</div>
<div class="cell lastcell" contenteditable="true">long text</div>
</div>
<div>
<div class="cell">x</div>
<div class="cell">y</div>
<div class="cell">zzz</div>
<div class="cell lastcell" contenteditable="true">long text</div>
</div>
</div>
When you removed the float from the last cell, you've turned it back into a block element, which catches 100% of it's container (- other floats in your case).
Remove the lastCell class, and add clear:both to .row
.row {
clear: both;
}
Anyhow, I must agree with the #Vucko comment - use a table or a css table instead.

Aligning boxes(divs) of equal size in html symmetrically according to their number

I want to make an HTML page that contains a box at the top and a certain number of boxes being dynamically generated using jquery, the number of boxes at the bottom of top box can be 4 at max.
I want to align these boxes dynamically and symmetrically in the html page. I am using angularjs's ng-repeat to generate boxes. I want the sizes of the boxes to remain same but arrange them symmetrically on the html page.
currently i am using angular js to dynamically create boxes and align them using col-md class of bootstrap. but this makes the size of boxes to change when the number of boxes change.
html code
<div id="header-wrapper" class="container vscrolling_container">
<div id="header" class="container vscrolling_container">
<div id="logo">
<h1 class="page-head-line" id="visionh"><a>Vision</a></h1>
<p id="visionp"><a rel="nofollow">{{visiontext}}</a></p>
</div>
</div>
</div>
<div class="row" id="missionstart">
<div ng-class="missioncount[missions.length]" ng-repeat="mission in missions" style="opacity: 0.9">
<div class="dashboard-div-wrapper" ng-class="bkclr[$index]">
<h1 id="{{mission.id}}" style="color: #000">{{mission.missionInfo}}</h1>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
</div>
<ul>
<li id="{{missioncontent.id}}" ng-repeat="missioncontent in mission.missionContent">
<p style="text-align: left">{{missioncontent.info}}</p>
</li>
</ul>
</div>
</div>
</div>
java script code
'use strict';
var mission_vision_mod = angular.module('myApp.mission_vision', ['ngRoute']);
mission_vision_mod.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/mission_vision', {
templateUrl: 'partials/mission_vision/mission_vision.html',
controller: 'mission_visionCtrl'
});
}]);
mission_vision_mod.controller('mission_visionCtrl', ['$scope','$http', function($scope, $http) {
$scope.visiontext = "Here is the content of vision";
$scope.bkclr = ['bk-clr-one','bk-clr-two','bk-clr-three','bk-clr-four'];
$scope.progressbar = ['progress-bar-warning','progress-bar-danger','progress-bar-success','progress-bar-primary'];
$scope.missioncount = ['col-md-0','col-md-12','col-md-6','col-md-4','col-md-3','col-md-2.5','col-md-2'];
$http.get('m_id.json').success(function(data){
$scope.missions = data;
$scope.len = data.length;
});
}]);
I have created a quick jsfiddle
HTML Content:
<div class="container">
<div class="header"></div>
<div class="content">
<div class="contentBox"></div>
<div class="contentBox"></div>
</div>
</div>
<br/><br/><br/>
<div class="container">
<div class="header"></div>
<div class="content">
<div class="contentBox"></div>
<div class="contentBox"></div>
<div class="contentBox"></div>
<div class="contentBox"></div>
</div>
</div>
Related CSS:
.container div {
height: 100px;
}
.header {
border: 1px solid black;
width: 75%;
margin: 5px auto;
}
.content {
text-align: center;
}
.contentBox {
border: 1px solid black;
width: 20%;
display: inline-block;
box-sizing: border-box;
}
Caution: I have used plain CSS for this demo.
Hope this helps you.
flexbox can do this
.wrap {
width: 80%;
margin: auto;
border: 1px solid black;
margin-bottom: 25px;
}
.top,
.item {
width: 100px;
height: 50px;
background: red;
}
.top {
display: inline-block;
}
.flex {
display: flex;
justify-content: space-around;
}
<div class="wrap">
<div class="flex">
<div class="top"></div>
</div>
<div class="flex">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
JSfiddle Demo

Categories