I'm trying to get bootstrap divs to be full body length.
This is what I've tried so far: http://jsfiddle.net/bKsad/315/
html, body {
min-height: 100%
}
.wrap {
height: 100%
}
.sidebar {
background-color:#eee;
background-repeat: repeat;
padding:0;
min-height:100% !important;
position:relative;
}
.sidebar .sidebar-content {
height:100%;
width:100%;
padding: 5px;
margin:0;
position:relative;
}
As the right column grows longer, I want the sidebar to do the same.
The key is to understand the "col-md-x" and "col-md-offset-x" styles provided by Bootstrap 3:
<div class="container-fluid">
<div class="row">
<div class="col-md-3 sidebar">
Sidebar Content
</div>
<div class="col-md-9 col-md-offset-3 content">
Main Content
</div>
</div>
</div>
Then use CSS to make sure the breakpoints line-up. You'll need to fine-tune padding/margin for your particular needs, but the offset and #media breakpoints handle the overall layout pretty well:
html, body, .container-fluid, .row {
height: 100%;
}
.sidebar {
background-color: #CCCCCC;
}
#media (min-width: 992px) {
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
display: block;
background-color: #CCCCCC;
}
}
Working solution: http://www.bootply.com/111837
If you use "col-sm-x" or "col-lg-x" you just change the #media CSS to the corresponding min-width (768px for sm and 1200px for lg). Bootstrap handles the rest.
I solved this by using an absolutely positioned div and a bit of jQuery. I have a Bootstrap navbar with a fixed height of 50px, so that is why you're seeing the 50's in the code. You can remove this if you don't have a top navbar.
This solution works dynamically with any height.
The CSS:
.sidebar {
background-color: #333333;
position: absolute;
min-height: calc(100% - 50px);
}
The jQuery:
var document_height = $(document).height();
var sidebar = $('.sidebar');
var sidebar_height = sidebar.height();
if (document_height > sidebar_height) {
sidebar.css('height', document_height - 50);
}
The neat thing about this is there will be no flickering of the background because its using CSS to adjust the min-height, so that the jQuery resizing that normally causes a flickering of the background will be hidden on page load.
approach 1: added empty div with style="clear:both" at the end of wrap div.
http://jsfiddle.net/34Fc5/1/
approch 2: http://jsfiddle.net/34Fc5/ :
html, body {
height: 100%;
}
.wrap {
height: 100%;
overflow: hidden;
}
.sidebar {
background-color:#eee;
background-repeat: repeat;
padding:0;
height:100% !important;
position:relative;
}
.sidebar .sidebar-content {
height:100%;
width:100%;
padding: 5px;
margin:0;
position:relative;
}
added "overflow: hidden;" to .wrap
changed height: 100% to html, body
changed height: 100% to .sidebar
using css way, the height of the sidebar will only match the view port of the browser. so if you look at approach 1, when you scroll you will notice the background stop at viewport. to fix it js is required.
The only thing that got it working for me (after many hours of trying everything) was
HTML
<nav class="col-sm-3 sidebar">
CSS
padding-bottom: 100%;
The padding in percent did it for me. Now it goes all the way to the bottom of the page.
Related
Probably a super noobie question, but does anyone know why my onClick is not firing? I have tried changing the z-index in my CSS in case the button was too far back, but this did not change anything.
Here is my button module:
import React from 'react';
import classes from './button.module.css';
const button = (props)=>{
return(
<button onClick={()=>{console.log("hello");props.select()}} className={classes.button}>
<div className={classes.text_center}>
<div className={classes.button_text}>{props.text}</div></div>
</button>
);
}
export default button;
Later on I call the module:
this.state.skills?null:<Button select={()=>{console.log("hi");this.setState({skills:true})}} text={"Skills"}></Button>}.
The button actually displays fine, and the text is passed as a prop, but unfortunately I can't get the onClick to fire. Neither of the two console.log statements fire.
All help is appreciated.
///
As requested in the comments button.module.css:
#font-face {
font-family: 'Raleway';
src: url('../../../Fonts/Raleway/Raleway-Light.ttf') format('truetype') /* IE6-IE8 */
}
.button_choice{
width:10vw;
height:10vh;
top:25%;
border: 2px solid #4ca3dd;
position: relative;
display: inline-block;
margin-left:5vw;
background-color: white;
vertical-align: middle;
border-radius:10px;
padding:5px;
}
.button_choice:hover{
background-color: red;
}
.text_center{
height:100%;
width:100%;
position:relative;
display: table;
}
.text_center:hover{
background-color: blue;
}
.button_text{
font-family:"Raleway";
position:relative;
line-height: 30px;
font-size: 20px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
/////
Slight break through :/, when considering the 3 classes below, .background_init is a div spreading over the whole page. On the press of a button, this div slides to half of the size on the left by changing to the class .background_left. The buttons are contained within background_right. If I change height in .background_left to 200px, the buttons work (including hover), but obviously this completely messes up my styling. Any suggestions?
.background_init{
width:100vw;
height:100vh;
background-color: #4ca3dd;
}
.background_left{
width:50vw;
height:100vh;
background-color: #4ca3dd;
transition: width 2s;
}
.background_right{
overflow: auto;
width:50vw;
height:100vh;
transition: width 2s;
}
I am not sure why this works, but instead of using 100vh and 100vw, I used display:absolute and width:50%/ 100% and height:100%. If anyone can explain why this works I would be extremely grateful.
I make a responsive web page where at max width of 768px (via media query) the div inside the main container suppose to change to inline-block so that the page would scroll horizontally to the div's id when user click on link. The page is set up with overflow: hidden, so it navigate using id/anchor alone.
The problem is, when I did a preview in mobile, the container just spread out and I can totally swipe the page. Even the menu button that suppose to be in the center of the view port went to the center of the container. And leaving a huge white space below it. It did good however in desktop browser. So I presume it has everything to do with the nowrap function.
It worked in Firefox both mobile and desktop. It worked in I.E desktop. It did not worked in Chrome mobile but seems to be working in desktop. And failed in Safari mobile, haven't tested yet in desktop.
I tried to remove white-space: nowrap function only to find out the div did not stacks inline-block like it suppose to. I tried specified container's width and min-width with no luck. I tried float: left, position values and a bunch of things i don't recall them all. Nothing's change.
HTML
<div id="container">
<div id="company" class="company">
<iframe src="main.html">
</iframe>
</div>
<div id="content" class="content">
<iframe src="content.html">
</iframe>
</div>
<div id="system" class="system">
<iframe src="system.html">
</iframe>
</div>
</div>
css
body{
overflow: hidden;
}
#container {
height: 100vh !important;
min-height: 100vh !important;
}
#container .company, #container .content, #container .system {
display: block;
height: 100vh !important;
min-height: 100vh !important;
}
#media screen and (max-width:768px) {
#container {
display: block;
white-space: nowrap;
}
#container .company, #container .content, #container .system {
display: inline-block;
}
}
iframe {
width: 100vw !important;
min-width: 100vw !important;
height: 100vh !important;
min-height: 100vh !important;
border: none;
}
What I expected (Chrome desktop)
https://kamalmasrun.files.wordpress.com/2019/01/desktop.jpg
But only comes to this in mobile
https://kamalmasrun.files.wordpress.com/2019/01/screenshot_20190122-120510.png
Your help is much appreciated and I first address a thank you to all for the help =).
Basically, you have a few problems here:
Setting overflow: hidden won't prevent browser on mobile from scrolling (on Firefox it might, but on Chrome or iOS Safari it will not). Blocking scrolling is a hard thing to do on mobile to be honest, and it always is a little bit hacky, so I would not go that way.
To achieve scrolling (or jumping) using links with #content etc, body has to be expanded and browser has to see where this element is. Expanding body will result in ability for user to scroll left/right, which is hard to block as I mentioned before. You have to scroll #container to show new element. You can do this using javascript.
Also, don't forget to add overflow: hidden to #container (this will work on mobile).
If something is still unclear, feel free to ask in comments below this answer :)
The idea of algorithm to achieve your goal:
Listen to hashchange event
Read current hash from window.location
Find element with given hash using document.querySelector
Read element's position inside container
Set scrollLeft property of container to be equal element's position
Some useful links to get you started:
https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange
https://developer.mozilla.org/en-US/docs/Web/API/Window/location
https://developer.mozilla.org/pl/docs/Web/API/Document/querySelector
https://developer.mozilla.org/pl/docs/Web/API/Element/getBoundingClientRect
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
And updated CSS:
body {
overflow: hidden;
margin: 0;
}
#button {
position: fixed;
vertical-align: center;
}
#button .btn1,
.btn2,
.btn3 {
padding: 10px;
display: inline-block;
}
#container .company,
.content,
.system {
display: block;
height: 100vh;
min-height: 100vh;
width: 100vw;
}
#media screen and (max-width:768px) {
#container {
display: flex;
flex-flow: row nowrap;
}
#container .company,
.content,
.system {
display: block;
}
}
iframe {
border: none;
height: 100vh;
min-height: 100vh;
width: 100vw;
}
It's possible that setting min/max width to #container will do the trick.
#container {
min-width: 100vw;
max-width: 100vw;
}
Also, I'd suggest using flex here, as it would suit well and is more modern.
Working on a css grid challenge with React in codepen.
This is the original codepen: https://codepen.io/tallys/pen/bvwZee/
What I have so far: https://codepen.io/al2613/pen/QmOyKo
.grid-container {
border: 2px dashed goldenrod;
display: inline-grid;
padding: 10px;
grid-template-columns: auto auto;
height: 100vh;
grid-gap: 30px;
}
So I got main content area to span across the grid container. However, I'm stuck as to how I can make the aside always 150px and the grid container align nicely with the div at the top?
I'm new to grid very nice first try. I think this is a little bit hacky, but...it does the job (I guess)
I don't think the CSS on this snippet will work, but nevertheless, here's the Pen...
//Don't edit the JS for the CSS Grid challenge!
class App extends React.Component {
state = {
sidebarActive: false,
}
toggleSidebar() {
this.setState({sidebarActive: !this.state.sidebarActive})
}
render() {
const buttonText = this.state.sidebarActive ? 'Toggle Sidebar Off' : 'Toggle Sidebar On';
const {sidebarActive} = this.state
return (
<div>
<h1 className="heading">CSS Grid when some sections don't render!</h1>
<div className="instructions">
<p>The challenge: Fix the CSS Grid so that the main area takes up all of the available space when the sidebar react component does not render. </p>
<button onClick={this.toggleSidebar.bind(this)}>{buttonText}</button>
</div>
<div className="grid-container">
{sidebarActive && <aside className="sidebar">Sometimes renders!</aside>}
<main className="main">Main content area that should always take up the rest of the space in the container. </main>
</div>
</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
// Variables
$brand-color: darkblue;
$brand-section-color: white;
$brand-text-color: #222;
$react-accent: #61dafb;
$react-background: #292c34;
$breakpoint: 768px;
$font-heading: 'Permanent Marker', sans-serif;
$font-default: 'Oswald', sans-serif;
// Styles
body {
font-family: $font-default;
margin: 10vh 10vw;
color: $react-accent;
background: $react-background;
}
.heading {
font-family: $font-heading;
}
.instructions {
padding: 5px 12px 20px 12px;
margin-bottom: 20px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
background: lighten(adjust-hue($react-background, 30), 7);
font-size: 1.15rem;
button {
border: none;
background: $react-accent;
font-family: $font-default;
padding: 20px;
border-radius: 0;
cursor: pointer;
transition: .4s ease;
&:hover, &:active, &:focus {
background: adjust-hue($react-accent, 210);
}
}
}
.grid-container {
border: 2px dashed goldenrod;
display: inline-grid;
grid-template-columns: 150px repeat(1, 1fr);
height: 100vh;
width: 100%;
grid-gap: 30px;
}
.sidebar {
background: lighten($react-background, 7);
padding: 10px;
& ~ .main{
grid-column: auto !important;
}
}
.main {
background: darken($react-background, 7);
display: grid;
grid-column: span 2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<main id="app"></main>
I know it's a really late response, but I remembered this challenge... and I couldn't resist.
My approach is fixing the main to the second column, while setting the sidebar width on the item itself (and a margin-right to fake the grid-gap), allowing for the first column to be declared as minmax(0, auto).
.grid-container {
grid-template-columns: minmax(0, auto) 1fr;
/*grid-gap: 30px;*/
}
.main {
grid-column: 2;
}
.sidebar {
margin-right: 30px;
width: 150px;
}
https://codepen.io/facundocorradini/pen/eKgVzP
That way the first column will have a zero width if the sidebar is not loaded, and get to the 150px sidebar with when it loads.
i'm new to React.js and the first thing i noted is that the entire width of the page is not filled. This is my JS code:
var Navbar = React.createClass({
render: function(){
return(
<div className="navbar"> </div>
);
}
});
ReactDOM.render( <Navbar/>,document.getElementById('test') );
And CSS:
.navbar{
background-color: green;
width: 100%;
height: 3em;
}
There is a 3px top, left, right unexpected margin.
Your body either has a margin or padding. You could remove but then it gets messy with other areas of the page you want to have even padding. Another option is you could make the navbar position fixed. which will ignore padding/margin.
.navbar{
position: fixed;
top: 0;
left: 0;
background-color: green;
width: 100%;
height: 3em;
}
http://codepen.io/finalfreq/pen/VKPXoN
Just do this in index.html page
<body style="margin: 0px;">
Edited; see bottom of post
I have a layout that works perfectly in everything except Internet Explorer 7.
I have a container div that has a width and hasLayout (I've tried zoom and various other things that ought to set this, but nothing changes). Inside are three floated elements, one left and two right. Below them is an element that is clear: both and it actually is doing that, but the container is ending at the shorter float even when I set a height for it including a height taller than the originally/naturally taller one.
Here's what it looks like: http://tinypic.com/r/ea3vpy/8
It should look exactly like that, except with the two elements that are awkwardly not in the layout inside the content area.
I've tried adding empty divs with clear: both, I've tried clearfixes, I've tried floating the container. I even added a container around the two right floating divs and floated that instead of them, but it didn't change anything. Overflow is not really an option because then I have to either cut off the content or have scroll bars inside the layout.
Here's the relevant CSS:
#content {
width: 669px;
height: 100%;
padding: 20px;
padding-top: 0;
position: relative;
display: table-cell;
vertical-align: top;
background-color: #F7F8F7;
text-align: left;
}
#content { /* To make it play nice with the sidebar */
_width: 709px;
*display: inline;
*position: absolute;
*left: 0;
*zoom: 1;
}
p#indexwelcome {
max-width: 330px;
min-height: 440px;
float: left;
}
#dogimg {
width: 323px;
max-width: 100%;
height: 246px;
margin-left: 10px;
float: right;
}
#loginbox {
max-width: 323px;
margin: 20px 0;
padding: 10px;
position: relative;
float: right;
}
#itemsbox { /* the one with the bananas */
width: 644px;
height: 142px;
margin-top: 20px;
position: relative;
clear: both;
}
And the HTML:
<div id="content">
<h1>Heading</h1>
<p id="indexwelcome">Text paragraphs here</p>
<img src="images/dog.jpg" id="dogimg" alt="dog" />
<div id="loginbox">
<p>Login box stuff</p>
</div> <!-- loginbox div -->
<div id="itemsbox">
<!-- banana images here -->
</div> <!-- itemsbox div -->
</div> <!-- content div -->
EDIT: So I fixed the issue although it's not quite ideal. Setting the content and sidebar to height: auto (as opposed to height: 100%) made them expand for their content.
However that page container (the green space) still won't expand even with height: auto. I have to set a specific min-height or height, which isn't great because the page content is dynamic, so other pages have extra space if their content is shorter than what it's set for and it'll be the same original problem if the content is larger. And then of course the content and sidebar boxes still aren't the same length (but that's a whole other issue).
Here's the page CSS:
#page {
width: 1025px;
height: 100%;
min-height: 650px;
margin: 15px auto;
padding: 10px 0;
position: relative;
background-color: #7B9F73;
*min-height: 990px;
}