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
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 pretty bad with css, so I was wondering how I can keep my sidebar full height, even though it doesnt have full content.
This is my css:
#wrapper {
display: flex;
flex-wrap: wrap;
background-color: yellow;
}
#wrapper .sideBar {
background-color: green;
width: 200px;
margin-left: 10px;
overflow-x: hidden;
padding-top: 20px;
}
#wrapper .productsBox{
width: 250px;
margin: 3px;
}
But I get this result
However I want a result that looks like this:
Any idea how I can fix this? And I want to have a responsive view, so when a user use phone to browse it displays a decent view. Thats the reason I use the wrapper.
html:
<div id="wrapper">
<form method="get" id="sortForm">
#Html.DropDownList("sort", new SelectList(ViewBag.sortOptions,"Value","Text"), new {#class="form-control", onchange = "sortingChanged()" })
<div class="sideBar">
<strong>Search for products</strong>
<input type="text" class="searchBar" name="SearchString" value="#ViewData["CurrentFilter"]" placeholder="Search.."/>
<hr />
<h6>Price</h6>
<div>
<input type="number" class="priceRangeInput" name="minPrice" value="#ViewData["MinPriceFilter"]" oninput="validity.valid||(value='');" />
<span>Min</span>
</div>
<div>
<input type="number" class="priceRangeInput" name="maxPrice" value="#ViewData["MaxPriceFilter"]" oninput="validity.valid||(value='');" />
<span>Max</span>
</div>
<br />
<hr>
<h6>Types</h6>
<button type="submit" class="btn customGreen" >Set filters</button>
</form>
<br />
</div>
#{
foreach(var p in #Model)
{
<div class="productsBox">
<div class="card">
<a asp-action="Details" asp-route-id="#p.Id">
<img alt="#p.Name" class="contain" src="#p.FilePath" height="300" style="width: 100%;" />
</a>
<h3>#p.Name</h3>
<p class="price">#p.Price kr/#p.Unit</p>
<a asp-action="Details" asp-route-id="#p.Id">
<button class="customGreen">See more</button>
</a>
</div>
</div>
}
}
</div>
html, body {
height: 100%
}
html,
body {
height: 100%; /* to set height to 100% */
}
body {
margin: 0; /* to remove default margins */
}
#wrapper {
height: 100%; /* to set height to 100% */
}
#wrapper {
display: flex;
background-color: yellow;
}
.sideBar {
background-color: #000;
width: 200px;
color: #fff;
overflow-x: hidden;
padding-top: 20px;
}
.product-wrapper {
width: calc(100% - 200px); /* 100% - (sidebar width) */
}
.productsBox {
display: inline-block;
width: 150px;
height: 150px;
color: #fff;
margin: 3px;
background: #2f910f;
}
<html>
<body>
<div id="wrapper">
<div class="sideBar">
Sidebar
</div>
<div class="product-wrapper">
<div class="productsBox">
Item
</div>
</div>
</div>
</body>
</html>
You should take .sideBar out of the #wrapper container and apply width: calc(100% - 210px) to #wrapper (i.e. the width of the container/window minus sidebar minus its left margin). That way both together will be 100% wide, but the contents of #wrapper will not go under the sidebar.
you should add side bar and another containts in different divs and add this code to it:
.wrapper{
display:flex;
flex-direction:row;
}
.sidebar{
background-color:red;
width:50%;
}
.containts{
width:50%;
background-color:green;
}
<div class="wrapper">
<div class="sidebar">
sidebar
</div>
<div class="containts">
containts
</div>
</div>
Add the following code in css it worked for me
height: 100%;
I want to have css style like in image. I could not find it in Bootstrap and can not remember what it is called in css style. Can anyone tell me how to style it?
Thanks.
<!DOCTYPE html>
<html>
<body>
<h1>The legend element</h1>
<form action="/action_page.php">
<fieldset style="height:200px;">
<legend>Personalia:</legend>
</fieldset>
</form>
</body>
</html>
This design can be achieved using tag in HTML.
To know more about the Legend tag, see the link below.
https://www.w3schools.com/tags/tag_legend.asp
Example of Legend Tag.
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_legend
You can even do it with some Math+CSS.
body {
margin: 0px;
padding: 0px;
}
.outer {
margin: 20px;
height: 100px;
width: 300px;
border: 2px solid gray;
position: relative;
}
.block {
width: max-content;
height: 20px;
padding: 0 5px;
position: absolute;
top: -10px;
background: white;
}
.left {
left: 10px;
}
.right {
right: 10px;
}
.center {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
<div class="outer">
<div class="block left">Left Title</div>
</div>
<div class="outer">
<div class="block center">Center Title</div>
</div>
<div class="outer">
<div class="block right">Right Title</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 the following HTML source:
<div id="page">
<div id="header">
<!-- end header div -->
</div>
<div id="dropdown">
<!--navigator menu is here!-->
</div>
<div id="main">
<!--main is here!-->
</div>
<div id="sidebar">
<!--sidebar menu is here!--></div>
<div id="footer">
</div>
<!-- end page div -->
</div>
<div id="leftshadow"></div>
<div id="rightshadow"></div>
</body>
And this is the CSS source
/* html selectors ---- */
html, body {
font-family: 'Arial Unicode MS';
margin: 0;
padding: 0;
background-repeat: repeat-x;
background-color: white;
direction: rtl;
font-size: 10.3pt;
}
/*page -----------*/
#page {
width: 900px;
padding: 0px;
margin: 0 auto;
direction: rtl;
position: relative;
z-index: 100;
z-index: 5;
background-image: url("images/bgimage.png");
}
#leftshadow {
width: 100px;
height: 900px;
background-image: url("images/leftshadow.png");
position: absolute;
right: 1220px;
z-index: none;
top: -50px;
}
#rightshadow {
width: 100px;
height: 900px;
background-image: url("images/rightshadow.png");
position: absolute;
right: 345px;
z-index: none;
top: -25px;
}
/* header ---------- */
#header {
height: 110px;
top: 0px;
line-height: 30px;
background-image: url("images/header.png");
background-position-x: center;
background-repeat: repeat-x;
}
/* main -------------- */
#main {
line-height: 21px;
font-family: arial;
width: 625px;
padding: 30px;
position: relative;
right: 205px;
padding-bottom: 80px;
direction: rtl;
top: 42px;
padding-right: 60px;
min-height: 750px;
text-align: justify;
}
Normally I got this result
But in Internet-Explorer I got this result
I know that if I will insert the
<div id="leftshadow"></div>
<div id="rightshadow"></div>
******Live example here! http://lawb.co.il/******
Into the #page Div the problem could be solved, but the only problem is that the shadow than is complatly on the content, und not behund him
Can you pleas help me with this?
wish for help, thanks!
Any reason as to why you are using images to create shadows when you could use CSS3 box-shadow?
If you are going to use this approach I would change your HTML structure like so:
<div id="page">
<div id="leftshadow"></div>
<div id="header">
<!-- end header div -->
</div>
<div id="dropdown">
<!--navigator menu is here!-->
</div>
<div id="main">
<!--main is here!-->
</div>
<div id="sidebar">
<!--sidebar menu is here!-->
</div>
<div id="footer">
<!-- footer -->
</div>
<!-- end page div -->
<div id="rightshadow"></div>
</div>
And then float the right shadow div to the right and the left shadow div to the left. Most likely you are seeing inconsistencies because
you are not using a reset, and stuff is relatively positioned. You really don't need to position everything relative and the shadows if inside the #page container won't need to be positioned absolute.