I am trying to build a simple webpage using Bootstrap and D3, but I do not know how to get rid of all the whitespace at the bottom. I would like to get rid of it.
I have tried setting the min-height of the body and html to 100%, but it hasn't done anything. My code is here: https://github.com/eelegiap/thesis-code/tree/main/search
body {
padding-left: 3vh;
padding-top: 3vh;
padding-bottom: 20px;
}
#searchCol {
padding-left: 6vh
}
form {
width: 25%
}
#results {
padding-right: 10vh;
}
#resultsContainer {
max-height: 30%;
overflow-y: auto
}
.result {
padding-left: 4vh;
}
.poemResult {
cursor: pointer;
border-radius: 10px;
padding-left: 10px;
padding-top: 5px;
}
#poemContainer {
max-height: 30%;
overflow-y: auto;
}
#poemMeta {
padding-top: 10vh;
padding-left: 15vh;
padding-bottom: 5vh
}
#poemTxt {
padding-left: 15vh;
padding-bottom: 10vh;
}
.input-group {
max-width: 75%;
padding-bottom: 5vh
}
/* Tooltip text */
.titleTooltip .tooltiptext {
visibility: hidden;
position: absolute;
text-align: left;
width: fit-content;
height: fit-content;
padding: 2px;
padding-right: 15px;
font: 12px sans-serif;
background: #e5ffff;
border: 1px solid gray;
border-radius: 8px;
pointer-events: none;
z-index: 1;
}
.titleTooltip:hover .tooltiptext {
visibility: visible;
}
.token mark {
display: contents;
}
input,
.dropdown-toggle {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.searchBar {
min-height: 50px
}
#search {
background-color: lightsteelblue;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
<!-- MDB -->
<link rel="stylesheet" href="mdb5/css/mdb.min.css" />
<body>
<div class="container">
<br>
<div class="row">
<h2>Contemporary Russian Internet Poetry</h2>
</div>
<div class="row">
<div class="col-sm-6">
<div class="row" id="poemContainer">
<div id="poemMeta"></div>
<div id="poemTxt"></div>
</div>
</div>
<div class="col-sm-6" id="searchCol">
<div class="row">
<div class="input-group">
<div class="form-outline flex-fill searchBar">
<input type="search" id="form1" class="form-control form-control-lg" />
<label class="form-label" for="form1">Search by keyword(s)</label>
</div>
<button type="button" id='search' class="btn searchBar">
<i class="fas fa-search"></i>
</button>
</div>
</div>
<div class="row" id="resultsContainer">
<div id="results"></div>
</div>
</div>
</div>
</div>
</body>
<!-- MDB -->
<script type="text/javascript" src="mdb5/js/mdb.min.js"></script>
<!-- embedding JS libraries -->
<!-- d3 -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<!-- own js files -->
<script src="js/main.js"></script>
<script src="js/text.js"></script>
<script src="js/searchResults.js"></script>
You are using padding-bottom: 20px; in your body. It created the bottom padding or some spaces in the down side of your websites.
You have to remove it.
To be honest, idk why this works, but I changed the max-height variables to pixel heights instead, and this fixed the trailing whitespace problem.
Related
im not good with mdl lite but i want to create an mdl card that looks exactly as it is on the image below how do i do that?
after reading on documentation this is what i came up with. but it doesn't look good.
body {
padding: 0px;
}
.header {
color: #666;
}
.container {
margin: 0 auto;
width: auto;
}
.demo-card-wide>.mdl-card__title {
color: #fff;
height: 60px;
background: black
}
.demo-card-wide.mdl-card {
width: 350px;
}
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css" rel="stylesheet" />
<body>
<div class="container">
<div class="mdl-cell mdl-cell--6-col mdl-card mdl-shadow--2dp demo-card-wide">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Account</h2>
</div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--6-col mdl-card__supporting-text">
<h4> $600</h4>
<p>Remaing Amount</p>
</div>
<div class="mdl-cell mdl-cell--6-col mdl-card__supporting-text">
<h4> $600</h4>
<p>Remaing Amount</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
]1]1
The use of mdl-grid within mdl-card makes sense, but won't give you much flexibility (e.g. the position of the separator/divider). I propose a solution with flex instead.
For the right aligned menu button I have used the mdl-card__menu from the card component. The rest, I leave it to you ;) Bare in mind the example you give does not use the default Roboto font.
#import url('https://fonts.googleapis.com/css?family=Roboto');
body {
padding: 0px;
}
.header {
color: #666;
}
.container {
margin: 0 auto;
width: auto;
}
.demo-card-wide>.mdl-card__title {
color: #fff;
/* height: 50px; */
background: black
}
.demo-card-wide.mdl-card {
width: 350px;
}
/* Additional css below */
.mdl-card {
min-height: 0;
}
.mdl-card__menu {
color: white;
}
/* .mdl-card__title {
padding: 12px 32px;
align-items: center;
} */
/* .mdl-card__title-text {
font-size: 20px !important;
font-weight: 400;
} */
.card-content {
display: flex;
justify-content: space-around;
align-items: center;
}
.card-cell {
text-align: center;
}
.card-cell h4 {
margin: 8px 0;
font-weight: 400;
}
.card-divider {
display: block;
height: 50px;
width: 1px;
background-color: rgba(0, 0, 0, 0.3);
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet"/>
<div class="container">
<div class="mdl-cell mdl-cell--6-col mdl-card mdl-shadow--2dp demo-card-wide">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Account</h2>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">more_vert</i>
</button>
</div>
<div class="mdl-card__supporting-text card-content">
<div class="card-cell">
<h4> $600</h4>
<p>Remaing Amount</p>
</div>
<span class="card-divider"></span>
<div class="card-cell">
<h4> $600</h4>
<p>Remaing Amount</p>
</div>
</div>
</div>
</div>
Scenario: I need a container with relative positioning, which has 2 absolute positioned children. On clicking the container both children will be transitioned on transform property, one being moved to the left and one being moved to the right, both outside the window, so I need somehow to set overflow: hidden on the parent, in order not to show the transitioned elements outside of parent container.
The thing is parent does not have a height set because of the absolute children, and when I use overflow-x: hidden on it, nothing is showed anymore.
Is it possible to set an overflow so that when children gets transformed to left/right no scrollbar will be showed? I do not want to set overflow on the body element. I'm looking for CSS-only solutions, if there are any.
Also setting a fixed height for parent is not a solution to my problem, please take that into consideration.
Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<title>FullScreen-Split | Experimental</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="box-container">
<div class="box clearfix">
<div class="half-left">
<div class="split">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
</div>
<div class="half-right">
<div class="split">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
And here is my SASS code
.box {
width: 100%;
position: relative;
&.active {
.half-left {
transform: translateX(-150%);
}
.half-right {
transform: translateX(150%);
}
}
.half-left,
.half-right {
width: 50%;
padding: 25px 0;
transition: 2s transform ease-out;
background-color: #3a3a3a;
position: absolute;
overflow: hidden;
color: #fff;
}
.half-left {
top: 0;
left: 0;
> .split {
width: 200%;
}
}
.half-right {
top: 0;
left: 50%;
> .split {
margin-left: -50%;
}
}
.split {
width: 100%;
height: 100%;
}
.details {
text-align: center;
> i.fa {
font-size: 62px;
margin-bottom: 40px;
}
> h3 {
font-size: 32px;
font-weight: bold;
}
}
}
.clearfix {
clear: both;
&::before,
&::after {
content: '';
display: table;
clear: both;
}
}
html and body elements are set to width: 100% and `height: 100%;
I suggest to not use position: absolute or float, as neither is meant for general layout.
They both take their element out flow (in somewhat different ways though), and make it more difficult to create a responsive page.
You could simplify the code a little and use display: inline-block, like this
.box {
width: 100%;
}
.box .half {
display: inline-block;
width: 50%;
padding: 25px 0;
transition: 2s transform ease-out;
background-color: #3a3a3a;
overflow: hidden;
color: #fff;
}
.box .details {
text-align: center;
}
.box .details > i.fa {
font-size: 62px;
margin-bottom: 40px;
}
.box .details > h3 {
font-size: 32px;
font-weight: bold;
}
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="box-container">
<div class="box">
<div class="half">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div><!-- this comment remove the white space between the inline-block elements
--><div class="half">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.js"></script>
Or use flexbox, which today is the recommended way to do layout
.box {
width: 100%;
display: flex;
}
.box .half {
width: 50%;
padding: 25px 0;
transition: 2s transform ease-out;
background-color: #3a3a3a;
overflow: hidden;
color: #fff;
}
.box .details {
text-align: center;
}
.box .details > i.fa {
font-size: 62px;
margin-bottom: 40px;
}
.box .details > h3 {
font-size: 32px;
font-weight: bold;
}
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="box-container">
<div class="box">
<div class="half">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
<div class="half">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.js"></script>
Inside of positioning half-left and half-right as absolute, you could just float them both left and add overflow: hidden to the parent container.
.half-left, half-right {
float: left;
}
.box {
position: relaitve;
overflow: hidden;
}
Then when you add active to the parent container, the two children should transform as you intended.
Here's a Codepen to demonstrate : - https://codepen.io/aphextwix/pen/KmmgXJ
I have a div that surrounds a bootstrap form.
When I define a background-color to that div the background-color is not seen in the form.
ADD: I added the three major divs before the wrapper_form - div so that you get the full picture. Before the first major div there starts the body tag.
This is my code:
.wrapper {
min-height: 100%;
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0;
display: inline-block;
}
.main-wrapper {
height: 100%;
overflow-y: auto;
padding: 50px 0 0px 0;
}
.content {
position: fixed;
top: 50px;
bottom: 36px;
left: 0;
right: 0;
padding: 0 15px;
overflow:auto;
}
.wrapper_form {
background-color: yellow;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="main-wrapper">
<div class="content">
<div class="wrapper_form">
<div class="form-group form-inline">
<div class="col-md-4">
<label class="control-label">Input:</label>
</div>
<div class="col-md-8">
<input type="text" class="form-control" name="myInput" id="myInput" value="" />
</div>
</div>
</div>
</div><!-- /.content-->
</div><!-- /.main-wrapper -->
</div><!-- /.wrapper -->
.wrapper_form {background-color: yellow !important;}
Your inside elements are floated - try toggling the float property on the columns and you'll see the styling takes.
If you float the wrapper element it'll take the yellow background.
.form-group:after,.form-group:before{
clear:both;
content:'';
display:table;
}
.wrapper_form {
background-color: yellow !important;
}
Try this
I have a bootstrap layout with two columns. On screens higher then 1000px content block is not stretch to the footer. I need it to expand vertically depending on the height of the user's browser window.
I've tried height:100%, min-height:100%; etc.
See my code below.
<div id="wrapContent" class="wrapContent">
<div class="container">
<div class="row">
<header>
HEADER
</header>
</div>
</div>
<div class="container">
<div class="row">
<div id="content" class="content clearfix">
<div class="col-xs-12">
<div class="flex-container">
<div class="col-xs-8 leftBlock">
LEFT BLOCK
</div>
<div class="col-xs-4 rightBlock">
RIGHT BLOCK
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<footer>
FOOTER
</footer>
</div>
</div>
html,body {
height: 100%;
min-height: 100%;
font-size: 1.2em;
}
.wrapContent {
overflow: visible !important;
height: auto !important;
min-height: 100%;
margin: 0 auto -71px;
padding-bottom: 70px;
background: #323742;
}
.container {
width: 1170px !important;
margin: 0 auto;
}
header {
overflow: visible;
height: 189px;
background: #222;
color: #fff;
}
.content {
min-height: 516px;
}
.flex-container {
min-height: 516px;
overflow: hidden;
margin-right: -15px;
margin-left: -15px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
.leftBlock {
background: #fff;
}
.rightBlock {
background: #ccc;
}
footer {
background: #222;
height: 71px;
color: #fff;
}
.div{
height: 100vh;
}
Add these lines to whatever container you want to stretch and it should work. I have tried it already :)
In your case:
.leftBlock, .rightBlock{
height: 100vh;
}
try this code, I think this is what you want.I wrote a full code for you.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.Header{
background-color: gray;
color: white;
height: 189px;
font-size: 25px;
}
.Bone{
background-color: orange;
color: white;
height: 400px;
color: white;
}
.Btwo{
background-color: red;
color: white;
height: 400px;
color: white;
}
.Footer{
background-color: black;
color: white;
height: 70px;
font-size: 25px;
}
</style>
<body>
<div class="container">
<div class="table-responsive">
<table class="table">
<thead>
<tr><div class="col-md-12 Header">Header</div></tr>
</thead>
<tbody>
<tr>
<div class="col-md-8 Bone">Left Block</div>
<div class="col-md-4 Btwo">Right Block</div>
</tr>
</tbody>
<tfoot>
<tr><div class="col-md-12 Footer">Footer</div></tr>
</tfoot>
</table>
</div>
</div>
</body>
</html>
just copy,paste and run it.if this is not the case tell me.
Thanks to everyone!
I've just wrote simple JS, and everythings works ok
function rightBlockHeight() {
var height = $( window ).height() - $( '#footer' ).height() - $( "#header" ).height();
$( '#content' ).css( 'min-height', height );
$( '.rightBlock' ).css( 'min-height', height );
}
$( document ).ready( function() {
rightBlockHeight();
} );
$( window ).resize( function() {
rightBlockHeight();
} );
I have an app that switches between stylesheets when the user rotates their tablet. There is a container div which holds everything. Inside the container div there is 2 divs. The one div holds the math problem and the other div holds a chalkboard.
In landscape mode the math problem and chalkboard are next to each. THIS WORKS RIGHT.
Example: ([Math Problem] [Chalkboard]) --- Side-by-side
In portrait mode the math problem should be above the chalkboard. RIGHT NOW, their just stacked on top of one another.
Example: ([Math Problem]
[Chalkboard]) --- Chalkboard sits below math problem
My HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>quiz</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link href="quiz.css" rel="stylesheet" />
<script src="quiz.js"></script>
</head>
<body>
<div class="container">
<div class="mathSide">
<!-- QUIZ STATS -->
<div id="quizStats">
<p class="alignLeft" id="statQuestionDiv"></p>
<p class="alignCenter" id="statTimerDiv"></p>
<p class="alignRight" id="statScoreDiv"></p>
</div>
<div style="clear: both;"></div>
<!-- QUIZ STATS -->
<!-- MATH EQUATION -->
<div class="mathEquation">
<div class="line1Num" id="line1NumDiv"></div>
<div class="line2">
<div class="line2Ope" id="line2OpeDiv"></div>
<div class="line2Num" id="line2NumDiv"></div>
</div>
<div class="line">
<div class="result"></div>
</div>
</div>
<!-- MATH EQUATION -->
<!-- ANSWERS -->
<!-- Multiple choice -->
<div class="center">
<div id="multipleChoiceDiv">
<button class="multipleChoice" id="btnChoice1"></button><br />
<button class="multipleChoice" id="btnChoice2"></button><br />
<button class="multipleChoice" id="btnChoice3"></button><br />
<button class="multipleChoice" id="btnChoice4"></button>
</div>
</div>
<!-- Multiple choice -->
<!-- Fill in the blank -->
<div class="center">
<div id="fillBlankDiv">
<input class="textBox2" id="userAnswer" type="text" />
<button class="fillBlank" id="btn7">7</button>
<button class="fillBlank" id="btn8">8</button>
<button class="fillBlank" id="btn9">9</button><br />
<button class="fillBlank" id="btn4">4</button>
<button class="fillBlank" id="btn5">5</button>
<button class="fillBlank" id="btn6">6</button><br />
<button class="fillBlank" id="btn1">1</button>
<button class="fillBlank" id="btn2">2</button>
<button class="fillBlank" id="btn3">3</button><br />
<button class="fillBlank" id="btn0">0</button>
<button class="fillBlank" id="btnNeg">+/-</button>
<button class="fillBlank" id="btnOk">OK</button>
</div>
</div>
<!-- Fill in the blank -->
<!-- ANSWERS -->
<!-- (IN)CORRECT -->
<div class="center2">
<div id="checkDiv"></div>
</div>
<!-- (IN)CORRECT -->
</div>
<!-- CANVAS -->
<div class="canvasSide">
<canvas id="can1" width="500" height="600" style="border:2px solid #fff; background-color: #026236;"></canvas>
</div>
<!-- CANVAS -->
</div>
<div id="appbar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'abErase', label:'Erase', icon:''}" type="button"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'abPause', label:'Pause', icon:''}" type="button"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'abHome', label:'Home', icon:''}" type="button"></button>
</div>
</body>
</html>
My CSS:
body {
background-color: #00522c;
}
.container {
width: 820px;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
}
.center {
text-align: center ;
}
.mathSide {
width: 300px;
float: left;
}
.canvasSide {
width: 500px;
float: left;
margin-left: 20px;
}
/* QUIZ STATS */
.alignLeft {
float: left;
width: 33%;
text-align: left;
font-size: 125%;
font-weight: bold;
}
.alignCenter {
float: left;
width: 33%;
text-align: center;
font-size: 125%;
font-weight: bold;
}
.alignRight {
float: left;
width: 33%;
text-align: right;
font-size: 125%;
font-weight: bold;
}
/* QUIZ STATS */
/* MATH EQUATION */
.mathEquation {
width: 300px;
}
.line1Num, .line2 {
width: 100%;
text-align: right;
display: table;
font-size: 400%;
}
.line1Num {
float: right;
font-size: 400%;
}
.line2Ope {
width: auto;
float: left;
}
.line2Num {
width: auto;
float: right;
}
.line {
width: 100%;
text-align: right;
border-top: 4px solid black;
border-color: white;
}
/* MATH EQUATION */
/* ANSWERS */
.multipleChoice {
width: 300px;
padding-top: 15px;
padding-bottom: 15px;
margin-top: 20px;
font-size: 150%;
}
.multipleChoiceRed {
width: 300px;
padding-top: 15px;
padding-bottom: 15px;
margin-top: 20px;
font-size: 150%;
background-color: red;
}
.multipleChoiceGreen {
width: 300px;
padding-top: 15px;
padding-bottom: 15px;
margin-top: 20px;
font-size: 150%;
background-color: green;
}
.textBox {
}
.fillBlank {
padding-top: 8px;
padding-bottom: 8px;
margin-top: 10px;
font-size: 150%;
}
/* ANSWERS */
/* (IN)CORRECT */
.center2 {
text-align: center ;
font-size: 300%;
}
/* (IN)CORRECT */
.textBox2[type="text"]
{
font-size: 200%;
text-align: right;
color: #fff;
background-color: #026236;
}
.textBox2A[type="text"]
{
font-size: 200%;
text-align: right;
color: #fff;
background-color: red;
}
.textBox2B[type="text"]
{
font-size: 200%;
text-align: right;
color: #fff;
background-color: green;
}
#media screen and (-ms-view-state: snapped) {
}
#media screen and (-ms-view-state: fullscreen-portrait) {
.mathSide {
width: 300px;
position: absolute;
}
.canvasSide {
width: 500px;
position: absolute;
}
}