I have an issue. I'm trying to make bootstrap grid system with 4 rows, but the problem some rows are overlapped. I don't know from where comes this problem.
this fiddle shows my issue
html, body{
width: 100% !important;
height: 100% !important;
padding:0;
position: relative;
}
#header-sec{
position: absolute;
/*top: 0;*/
width: 100%;
background-color: green;
height : 15%;
min-height: 30px;
}
#footer-sec{
position: absolute;
bottom: 0;
width: 100%;
background-color: black;
height : 5%;
}
#data-viewer{
height : 60%;
}
#zone-geog{
height : 20%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div id="header-sec" class="row">
<div class="col-sm-12">header</div>
</div>
<div id="zone-geog" class="row">
<div class="col-sm-12">
zone geog
</div>
</div>
<div id="data-viewer" class="row bg-primary">
<div class="col-sm-9">map</div>
<div class="col-sm-3">idica evolu</div>
</div>
<div id="footer-sec" class="row">
<div class="col-sm-12">footer</div>
</div>
</div>
</body>
if you have any ideas please help me solve this issue.
You need to remove position: absolute
html, body{
width: 100% !important;
height: 100% !important;
padding:0;
position: relative;
}
#header-sec{
width: 100%;
background-color: green !important;
height : 15%;
min-height: 30px;
}
#footer-sec{
position: absolute;
bottom: 0;
width: 100%;
background-color: black;
height : 5%;
}
#data-viewer{
height : 60%;
}
#zone-geog{
height : 20%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div id="header-sec" class="row">
<div class="col-sm-12">header</div>
</div>
<div id="zone-geog" class="row">
<div class="col-sm-12">
zone geog
</div>
</div>
<div id="data-viewer" class="row bg-primary">
<div class="col-sm-9">map</div>
<div class="col-sm-3">idica evolu</div>
</div>
<div id="footer-sec" class="row">
<div class="col-sm-12">footer</div>
</div>
</div>
</body>
Related
I have a webpage that I'm trying to design but I'm stuck with persistant whitespace on the right side of the page. I have tried resetting the browser defaults but this has no effect on the page.
I have also tried to make sure that the parent elements all have a declared size but this too has had no impact.
Webpage:
html,
body {
height: 100vh;
width: 100vw;
overflow: hidden;
}
.navbar {
height: 5%;
background-color: #181818;
}
.siteContainer {
color: #ffffff;
width: 100%;
height: 100%;
margin: 0;
}
.siteBody {
height: 100%;
}
.searchArea {
background-color: #181818;
}
.resultArea {
background-color: #121212;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container siteContainer">
<div class="row navbar">
<div class="col col-2 ">
Logo
</div>
<div class="col col-10 ">
Navbar
</div>
</div>
<div class="row siteBody">
<div class="col col-2 searchArea">
Search and CRUD
</div>
<div class="col col-10 resultArea">
Results
</div>
</div>
</div>
Youre using bootstraps container class which has fixed max widths (see https://getbootstrap.com/docs/5.1/layout/containers/).
What you want it container-fluid which fills 100% of the page.
html,
body {
height: 100vh;
width: 100vw;
overflow: hidden;
}
.navbar {
height: 5%;
background-color: #181818;
}
.siteContainer {
color: #ffffff;
width: 100%;
height: 100%;
margin: 0;
}
.siteBody {
height: 100%;
}
.searchArea {
background-color: #181818;
}
.resultArea {
background-color: #121212;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-fluid siteContainer">
<div class="row navbar">
<div class="col col-2 ">
Logo
</div>
<div class="col col-10 ">
Navbar
</div>
</div>
<div class="row siteBody">
<div class="col col-2 searchArea">
Search and CRUD
</div>
<div class="col col-10 resultArea">
Results
</div>
</div>
</div>
<div id="container">
<div class="table-responsive bordered fill">
<div class="row fill-row">
<div class="w-50" id="image_1"></div>
<div class="w-50" id="image_1"></div>
</div>
<div class="row fill-row">
<div class="w-50" id="image_1"></div>
<div class="w-50" id="image_1"></div>
</div>
</div>
</div>
https://jsfiddle.net/4b36yozr/
How I can remove the white vertical bar at the right of container despite it's set to be full width. I need to have 4 blocks that cover all the screen without that white space at right.
Give margin as 0px to the class fill-row and you get it with no space at the right corner.
<!DOCTYPE html>
<html>
<head>
<title>Efficienza Energia S.p.a.</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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">
<style>
#container {
width: 100%;
height: 100%;
min-height: 100%;
min-width: 100%;
display: block;
}
html,
body {
height: 100%;
width: 100%;
}
.fill {
min-height: 100%;
max-width: 100%;
height: 100%;
width: 100%;
}
.fill-row {
min-height: 50%;
max-width: 100%;
height: 50%;
width: 100%;
/*margin-here*/
margin:0px;
}
#image_1 {
background-image: url("https://www.crockerriverside.org/sites/main/files/imagecache/pod/main-images/camera_lense_0.jpeg");
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: auto;
}
</style>
</head>
<body>
<div id="container">
<div class="table-responsive bordered fill">
<div class="row fill-row">
<div class="w-50" id="image_1">
</div>
<div class="w-50" id="image_1">
</div>
</div>
<div class="row fill-row">
<div class="w-50" id="image_1">
</div>
<div class="w-50" id="image_1">
</div>
</div>
</div>
</div>
</body>
</html>
I have commented in the code where the margin has to be set to zero.
Remove margin style from class row/fill-row.
Adding the style below should remove the white space on the right
.fill-row {
margin: 0;
}
What seems to be happening was that the .row class was adding the following styles:
margin-right: -15px;
margin-left: -15px;
Just use container-fluid and remove the padding from the columns, and also don't forget to set <body> height and width to 100vh and 100%, respectively. Like so:
<body>
<div class="full">
<div class="container-fluid half">
<div class="row h-100">
<div class="col-6 nopadding">
<div id="image_1"></div>
</div>
<div class="col-6 nopadding">
<div id="image_1"></div>
</div>
</div>
</div>
<div class="container-fluid half">
<div class="row h-100">
<div class="col-6 nopadding">
<div id="image_1"></div>
</div>
<div class="col-6 nopadding">
<div id="image_1"></div>
</div>
</div>
</div>
</div>
</body>
And the css:
body {
width: 100%;
height: 100vh;
}
.full {
height: 100%;
width: 100%;
}
.half {
height: 50vh;
}
.nopadding {
padding: 0;
}
#image_1{
background-image:url("https://www.crockerriverside.org/sites/main/files/imagecache/pod/main-images/camera_lense_0.jpeg");
width:100%;
height:100%;
background-repeat:no-repeat;
background-size:auto;
}
I am trying to make a layout where #txt-bar and #main-content-area will overlap on #image. ( #txt-bar is overlapping on #image with following CSS ) but to achieve overlapping of #main-content-area on #image if I use top:-60px at #main-content-area then it will leave a gap between #main-content-area and #footer. I don't know how to solve this issue. Please help me.
/* CSS */
body {
position: absolute;
}
#top-bar {
background-color: black;
color: white;
}
#txt-bar {
height: 40px;
background-color: pink;
position: relative;
z-index: 4;
}
#link-bar {
background-color: red;
height: 40px;
z-index: 4;
}
#image {
position: relative;
z-index: 3;
}
.line {
width: 100%;
position: relative;
border-bottom: 4px solid black;
}
#main-content-area {
position: relative;
background-color: red;
top: -60px;
z-index: 4;
}
#footer {
background-color: green;
position: relative;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6" id="txt-bar">
<h1>Greetings</h1>
</div>
<div class="col-sm-6" id="link-bar">
<h1>Link bar </h1>
</div>
</div>
<div class="row">
<div class="col-sm-12" id="image">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300" class="img-responsive" />
</div>
</div>
<div class="line"></div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-8" id="main-content-area">
<h1>Main content area </h1>
</div>
<div class="col-sm-2">
</div>
</div>
<div class="row" id="footer">
<div class="col-sm-12">
<h1>Footer Element </h1>
</div>
</div>
</div>
Wrap all divs (#txt-bar #main-content-area and #image) in a parent div with position:relative then use position:absolute for #main-content-area and #txt-bar, this will solve your issues.
.wrap{position:relative;max-width:300px;}
#txt-bar {
height: 40px;
background-color: pink;
position: absolute;
top:10px;
width:100%;
}
#main-content-area {
position: absolute;
bottom:10px;
width:100%;
background-color: red;
}
<div class=wrap>
<div id=txt-bar>txt-bar</div>
<div id=image><img src=https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300></div>
<div id=main-content-area>main-content-area</div>
</div>
More Info
I have a row of divs that I am trying to build a gallery row with.
Despite using align: auto; on the images, They still seem to align to the left.
I was wondering if I am missing something.
here is my fiddle: http://jsfiddle.net/82nrw19x/
here is my code:
CSS:
.galleryRow{
}
.galleryIconOuter{
background-color: gray;
width: 20%;
height: 70px;
border-radius: 5px;
}
#wrapper {
min-width:100%;
min-height:100%;
border: 4px gainsboro solid;
margin: 0auto;
position: relative;
}
#im {
margin: 0 auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("https://s31.postimg.org/x8rd1797f/product1.png");
background-repeat: no-repeat;
background-size: contain;
}
HTML:
<section id="products" class="about">
<div class="container">
<div class="info col-lg-12 text-center">
<h2>Products</h2>
<div class="galleryRow w3-row">
<div class="galleryIconOuter w3-col">
<div id="wrapper">
<div id="im">
</div>
</div>
</div>
<div class="galleryIconOuter w3-col">
<div id="wrapper">
<div id="im">
</div>
</div>
</div>
<div class="galleryIconOuter w3-col">
<div id="wrapper">
<div id="im">
</div>
</div>
</div>
<div class="galleryIconOuter w3-col">
<div id="wrapper">
<div id="im">
</div>
</div>
</div>
<div class="galleryIconOuter w3-col">
<div id="wrapper">
<div id="im">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
any help or advice is appreciated.
Thank you in advance.
You are including the img as backgrounds, then you just need to set
background-position to center:
Try this:
#im {
margin: 0 auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("https://s31.postimg.org/x8rd1797f/product1.png");
background-repeat: no-repeat;
background-size: contain;
/* ADD THIS LINE*/
background-position:center;
}
Or the shorthand:
background: url("https://s31.postimg.org/x8rd1797f/product1.png") no-repeat center/contain;
Updated Fiddle
Do you mean like this?
.galleryRow{
position: relative;
width: 80%;
left: 10%;
right: 10%;
}
Is that what you mean by wanting them to "align to middle?"
I'm currently working on a chat project with Bootstrap and I have issues positioning my divs. Here's my pattern:
<div class="container">
<div class="row"> <!-- #header -->
<h1>Header stuff</h1>
</div>
<div class="row"> <!-- #main -->
<div class="col-sm-9">
<ul>Chat messages</ul> <!-- #chatbox -->
</div>
<div class="col-sm-3">
<ul>Users list</ul> <!-- #users -->
</div>
</div>
<div class="row"> <!-- #input -->
<form>Input zone</form>
</div>
</div>
Basically what I want is to fit these 3 row sections into the browser's height, so that the input zone is always at the bottom of the screen and the page is not scrollable, but I want both the #chatbox and the #users to be scrollable so that they fit in the #main.
Here is what I've done so far:
html, body {
height: 100%;
margin: 0;
}
body > .container {
height: 100%; /* Fit the container into the window */
}
.row#main > div {
max-height: 100%; /* This doesn't */
overflow: auto; /* work :( */
}
.row#input { /* Stick the input zone at the bottom */
position: absolute;
bottom: 0px;
width: 100%;
margin-bottom: 0px;
}
But when I extend the #chatbox or the #users, I don't get a good result :(
Anyone's got an idea? I'd like a full-CSS solution if possible :3
Thanks ^^
I've made a little demo for you to resolve this issue. Its pure CSS and suitable for any responsive layout.
You need to use the absolute position cleverly.
demo http://jsfiddle.net/h87p14tx/2/
HTML
<div class="row header"> <!-- #header -->
<h1>Header stuff</h1>
</div>
<div class="row main"> <!-- #main -->
<div class="col-sm-9 chatbox"> <!-- #chatbox -->
<ul>Chat messages</ul>
</div>
<div class="col-sm-3 users"> <!-- #users -->
<ul>Users list</ul>
</div>
</div>
<div class="row input"> <!-- #input -->
<form>Input zone</form>
</div>
CSS
.header, .input {
width: 100%; position: absolute;
background: red;
}
.header {
top: 0;
height: 70px;
}
.input {
bottom: 0;
height: 50px;
}
.main {
width: 100%; position: absolute; top: 70px; bottom: 50px;
background: green;
overflow: auto;
}
.chatbox, .users{
height: 100%;
}
.main .chatbox{
width: 70%;
float: left;
background: blue;
}
.main .users{
width: 30%;
float: right;
background: yellow;
}
Assuming you are essentially creating a header/body/footer layout, this should do the job:
html,
body {
min-height: 100%;
padding:0;
margin:0;
}
#main {
position: absolute;
padding: 100px 0;
top:0;
bottom:0;
left:0;
right:0;
background-color: red;
}
#header {
margin-top:-100px;
height:100px;
background-color: blue;
}
#body {
min-height: 100%
}
#footer {
height: 100px;
margin-bottom: -100px;
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div id="main" class="container">
<div id="header" class="row"> <!-- #header -->
<h1>Header stuff</h1>
</div>
<div id="body" class="row"> <!-- #main -->
<div class="col-sm-9">
<ul>Chat messages</ul> <!-- #chatbox -->
</div>
<div class="col-sm-3">
<ul>Users list</ul> <!-- #users -->
</div>
</div>
<div id="footer" class="row"> <!-- #input -->
<form>Input zone</form>
</div>
</div>