I have issues with rendering some elements in Google Chrome. When I test the code with Firefox or Edge, everything is fine. It seems like Chrome computes a smaller width for "col-sm-1" or it is ignoring the padding.
I have the following html:
/*dropdown size*/
.dropdown-sm {
font-size: 1.25rem;
}
/* Custom dropdown */
.custom-dropdown {
position: relative;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
/* margin: 10px; */
}
.custom-dropdown select {
background-color: #00c292;
color: #fff;
font-size: inherit;
padding: .5em;
padding-right: 2.5em;
border: 0;
margin: 0;
border-radius: 3px;
text-indent: 0.01px;
text-overflow: '';
-webkit-appearance: button;
}
.custom-dropdown::before,
.custom-dropdown::after {
content: "";
position: absolute;
pointer-events: none;
}
.custom-dropdown::after {
content: "\25BC";
height: 1em;
font-size: .625em;
line-height: 1;
right: 1.2em;
top: 50%;
margin-top: -.5em;
}
.custom-dropdown::before {
width: 2em;
right: 0;
top: 0;
bottom: 0;
border-radius: 0 3px 3px 0;
}
.custom-dropdown select[disabled] {
color: rgba(0, 0, 0, .3);
}
.custom-dropdown select[disabled]::after {
color: rgba(0, 0, 0, .1);
}
.custom-dropdown::before {
background-color: rgba(0, 0, 0, .15);
}
.custom-dropdown::after {
color: rgba(0, 0, 0, .4);
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="checkbox.css">
</head>
<body>
<main role="main">
<div id="boottom-page" class="container-fluid">
<div class="row">
<div class="col-sm-1">
<span class="custom-dropdown dropdown-sm">
<select data-name="change-role">
<option>Change role to...</option>
<option>User</option>
<option>Author</option>
<option>Admin</option>
</select>
</span>
</div>
<div class="col-sm-2">
<div>
<div>
<button type="button" class="btn btn-info">Change </button>
<button type="button" class="btn btn-info">Delete</button>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
Both Firefox and Edge render them just fine:
but Chrome breaks the layout:
What can I do to fix the layout issues for Chrome?
Tested your code in Firefox and Chrome. They are nearly looking the same, nothing is breaking the layout.
But on your screenshot they are on different sizes.
I think there are different zoomlevels set in your browsers. Please
check if both are on 100%;
To avoid Chrome breaks the layout, add min-width to col-sm-1 and col-sm2.
HTML with new classes: dropdown-container and button-container
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="checkbox.css">
</head>
<body>
<main role="main">
<div id="boottom-page" class="container-fluid">
<div class="row">
<div class="col-sm-1 dropdown-container">
<span class="custom-dropdown dropdown-sm">
<select data-name="change-role">
<option>Change role to...</option>
<option>User</option>
<option>Author</option>
<option>Admin</option>
</select>
</span>
</div>
<div class="col-sm-2 button-container">
<div>
<div>
<button type="button" class="btn btn-info">Change </button>
<button type="button" class="btn btn-info">Delete</button>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
CSS
.dropdown-container {
min-width: 130px;
}
.button-container {
min-width: 230px;
}
Related
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.
I am trying to achieve a result as in the image below.
I have done the border that goes around the div for the card but I don't know how can I put an icon or img on the top border and look interrupted also.
Html code for the Bootstrap 4 card that I am using.
<div class="container pt-5 pb-5">
<div class="row">
<div class="col">
<div class="card card-thin-v2 w-100 bg-dark-green">
<div class="card-body card-thin-body-v2">
<h2 class="card-title"><img src="../assets/main/src/img/present-icon.png" alt="" srcset="">text<span class="orange-text">text</h2>
<p class="card-text">text</p>
buttonr <i class="icon-arrow-right"></i>
</div>
</div>
</div>
</div>
Css code
.card-thin-body-v2 {
border: 1px dotted rgba($color: $white, $alpha: .15);
width: 74rem;
padding: 1rem .3rem 1rem 1rem;
margin: 15px 0px 15px 15px;
background-image: url('../../img/cartu-book.svg');
>h2 {
color: $white;
font-family: "adobe-caslon-pro";
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: 48px;
letter-spacing: 0em;
margin-left: 1rem;
>img {
height: 50.66937255859375px;
width: 53.306663513183594px;
border-radius: 0px;
margin: 20px 5px -10px 0px;
}
}
>p {
font-family: "adobe-
<!-- begin snippet: js hide: false console: true babel: false -->
<div class="container pt-5 pb-5">
<div class="row">
<div class="col">
<div class="card card-thin-v2 w-100 bg-dark-green">
<div class="card-body card-thin-body-v2">
<h2 class="card-title"><img src="../assets/main/src/img/present-icon.png" alt="" srcset="">text<span class="orange-text">text</h2>
<p class="card-text">text</p>
buttonr <i class="icon-arrow-right"></i>
</div>
</div>
</div>
</div>
</div>
Any help is much appreciated. Thank you!
Here you go...
Make two divs:
one without border (outer)
one with dashed border (inner)
To move the image up, set margin-top: -2%; to the image. Also, set padding-left: 2%; and padding-right: 2%; to interrupt the border and set the same background-color to the outer div and image (e.g. background-color: gray;), to make the image actually interrupt the dashed border.
#box {
position: absolute;
width: 90%;
height: 90%;
border-radius: 2vw;
background-color: gray;
margin-top: 2.5%;
}
#dashed {
width: 90%;
height: 90%;
border-width: 5px;
border-style: dashed;
border-radius: 2vw;
}
#image {
width: 10%;
margin-top: -2%;
padding-left: 2%;
padding-right: 2%;
background-color: gray;
}
<!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 href='https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl' crossorigin='anonymous'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<link rel='stylesheet' type='text/css' href='style.css'>
<script src='javascript.js'></script>
</head>
<body>
<div class='container-fluid d-flex justify-content-center'>
<div class='d-flex align-items-center justify-content-center' id='box'>
<div class='d-flex align-items-start justify-content-center' id='dashed'>
<img id='image' src='https://animals.sandiegozoo.org/sites/default/files/2016-11/animals_hero_giraffe_1_0.jpg'>
</div>
</div>
</div>
</body>
</html>
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>
I am learning HTML and CSS. My <h3> text will not align to the center of the page. I know this has to do with the background width being 50%, but I need that in order for the page to be two colors. Any way around this?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
</head>
<body>
<!-- HEADER -->
<section id="header">
<h1 class="name">Jessica Shae</h1>
<div class="container heading">
<div class="row">
<div class="col-md-4">
<img src="img/7.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/2.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/9.jpg" class="display">
</div>
<div class="row">
<div class="col-md-12 text-xs-center">
</i>
</div>
</div>
</section>
<!-- Gallery -->
<section id="gallery">
<h2 class="title">The Dark Room</h2>
<div class="container photo-collection">
<div class="row">
<div class="col-md-4 affect">
<img src="img/1.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/10.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/4.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/18.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/6.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/8.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/12.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/11.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/14.jpg" class="work">
</div>
</div>
</div>
</section>
<section class="contact-me">
<div class="contact">
<h3>Contact Me</h3>
</div>
</section>
And my CSS:
* {
/*background-color: rgb(0, 0, 0);*/
background: #070606;
}
/* HEADER */
.display {
height: auto;
width: 500px;
box-sizing: border-box;
overflow: hidden;
overflow-x: hidden;
max-width: 100%;
border: 4px solid white;
border-radius: 6%;
}
.heading {
max-width: 100%;
}
.name {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-size: 500%;
font-weight: 100;
text-align: center;
color: whitesmoke;
width: 100%;
margin-bottom: 20px;
margin-top: 15px;
}
h1:after {
display: block;
height: 2px;
background-color: #e62222; /*Great way to give single line color */
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 20px;
}
.fa {
margin-top: 18px;
}
.fa:link, /*Prevents color change when clicked */
.fa:visited {
text-decoration: none;
color: #bdc3c7;
}
.fa:hover,
.fa:active {
color: #ebedee;
}
/* GALLERY */
.work {
width: 300px;
height: 100%;
margin-top: 60px;
margin-bottom: 60px;
border: 3px solid white;
}
.title {
font-family: 'Prociono', serif;
font-size: 350%;
color: whitesmoke;
text-align: center;
padding-top:40px;
}
.affect img {
opacity: 0.2;
background-color: #070606;
transition: opacity .35s, transform .35s;
transform: scale(1.0);
}
.affect:hover img {
opacity: 1;
transform: scale(1.15);
}
/* CONTACT */
.contact {
background: linear-gradient(to right, black 50%, gray 50%);
}
h3 {
color: white;
text-align: center;
}
This rule in your CSS is setting the background color of every element to #070606, as you're using the asterisk, which is a wildcard selector that catches everything.
* { background: #070606; }
If you only meant to set the background color of the page to that color, use body instead of *.
Your text is not centered because text-align:center refers to the parent width so it means it's centered in the 50% wide div. In order to center it you can wrap contact and h3 in a wrapper with a position relative. Then set position absolute to h3 (you need to move it out of .contact div) and set 100% width for h3. It should work in that way. Remember that if you position if with absolute you need to set up height for parent.
.contact {
background-color: black;
background-attachment: fixed;
background-size: cover;
width: 50%;
overflow-x: hidden;
position: absolute;
height:100%;
}
h3 {
text-align: center;
font-size: 300%;
position: absolute;
width:100%;
}
.wrapper{
position:relative;
height:200px;
}
<section class="wrapper">
<div class="contact"></div>
<h3>Contact me</h3>
</section>
But this example is not a best approach. The best approach in this case is to make a gradient background (like showed in comments snippets) for the parent container with 50/50 of the colors. This won't make your HTML structure and CSS code messy.
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