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;">
Related
I need that as the width increases, the elements inside remain in place. For some reason, this does not always happen, sometimes the scroll starts moving to the right.
How to fix the scroll when increasing the width?
<reactResizable.ResizableBox
className="box"
width={200}
height={200}
axis="x"
resizeHandles={["e"]}
>
<div className="inner">
{Array.from(generateSequence(1, 6)).map((e) => {
return (
<div>
<span className="text">BLOCK {e}</span>
</div>
);
})}
</div>
</reactResizable.ResizableBox>
.box {
background: white;
overflow: auto hidden;
}
.box .react-resizable-handle-e {
height: 100%;
background-color: red;
transform: rotate(0);
top: 0;
}
.inner {
height: 200px;
color: black;
display: flex;
overflow-x: overlay;
}
.inner > div {
min-width: 150px;
height: 100px;
border: 4px solid black;
}
CodePen
Demo
I tried to debug it. I don't understand why this is happening
Instead of increasing width for box react-resizable class container. Increase the width for inner container. It will work
I'm wanting to re-order a number of containers when the webpage is being viewed on a particular device.
I currently have three divs floated left. Two smaller divs either side of a larger div. However, when the media query kicks in a would like the middle of the three to sit above the other two. In theory changing its position from 2nd to 1st.
Is this possible with pure CSS? Or would I need to get jQuery involved? I've set up a test fiddle here for anybody who can help with my initial attempts, but I'm having no joy so far... http://jsfiddle.net/r8qZ2/
Example HTML:
<div class="panels">
<div class="panel-one">Panel 1</div>
<div class="panel-two">Panel 2</div>
<div class="panel-three">Panel 3 </div>
</div>
Example CSS:
.panels {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.panel-one, .panel-three {
width: 24.0625%;
height: 400px;
float: left;
background: red;
}
.panel-three {
margin: 0 0 0 1.25%;
}
.panel-two {
width: 49.375%;
height: 400px;
float: left;
margin: 0 0 0 1.25%;
background: blue;
}
#media only screen and (max-width: 800px) {
.panel-one, .panel-three {
width: 49%;
height: 400px;
}
.panel-three {
margin: 0 0 0 2%;
}
.panel-two {
width: 100%;
float: none;
clear: left;
margin: 0;
}
}
Any help would be gratefully received!
Re-order responsive containers with CSS? With float based layouts, no. In cases with just one floated sidebar it's possible, but not with two.
If you adjust your layout not to use floats then it's most certainly possible.
Note: I highly recommend a mobile first-approach to your CSS, using min-width media queries. However since you're using max-width in your example I will also do so in mine:
Using position: absolute:
Place the element you want to be at the top as the first element in your HTML markup, and position the sidebars to the sides with position: absolute. Give the parent element position: relative, and give it a padding value equal to the width of the sidebars.
Then, with media queries, remove the padding and position: absolute you set.
Example:
HTML:
<div class="panels">
<div class="panel-two">Panel 2</div>
<div class="panel-one">Panel 1</div>
<div class="panel-three">Panel 3</div>
</div>
CSS:
.panels {
position: relative;
padding: 0 25%;
}
.panel-one,
.panel-three {
position: absolute;
top: 0;
bottom: 0;
width: 25%;
}
.panel-one { left: 0; }
.panel-three { right: 0; }
#media only screen and (max-width: 800px) {
.panels {
padding: 0;
}
.panel-one,
.panel-three {
position: static;
width: auto;
}
}
Here's a pen with your markup adjusted to this.
A major drawback to this is that the sidebars are taken out of the content flow with position: absolute, so depending on your layout this may not be a possible solution.
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;
}
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.
I am currently using carouFredSel.js to serve up a full width carousel on my site. I chose this plugin because of its full width capabilities with the ability to partially show the previous and next images on the left and right edges of the screen.
I am also using Bootstrap 3, but was unsuccessful achieving the same behavior, so that's why I chose to go with a plugin.
The problem I am experiencing is making the carousel responsive. The plugin has an option to make it responsive by adding 'responsive: true' to the options, but when I do that, it breaks the layout.
My code with placeholder images can be found at http://jsfiddle.net/vUCZ8/. I would recommend looking at the full screen result at http://jsfiddle.net/vUCZ8/embedded/result/
#intro {
width: 580px;
margin: 0 auto;
}
.wrapper {
background-color: white;
width: 480px;
margin: 40px auto;
padding: 50px;
box-shadow: 0 0 5px #999;
}
#carousel img {
display: block;
float: left;
}
.main-content ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
.main-content li {
display: block;
float: left;
}
.main-content li img {
margin: 0 20px 0 20px;
}
.list_carousel.responsive {
width: auto;
margin-left: 0;
}
.clearfix {
float: none;
clear: both;
}
.prev {
float: left;
margin-left: 10px;
}
.next {
float: right;
margin-right: 10px;
}
.pager {
float: left;
width: 300px;
text-align: center;
}
.pager a {
margin: 0 5px;
text-decoration: none;
}
.pager a.selected {
text-decoration: underline;
}
.timer {
background-color: #999;
height: 6px;
width: 0px;
}
$(function() {
$('#carousel').carouFredSel({
width: '100%',
items: {
visible: 3,
start: -1
},
scroll: {
items: 1,
duration: 1000,
timeoutDuration: 3000
},
prev: '#prev',
next: '#next',
pagination: {
container: '#pager',
deviation: 1
}
});
});
<div class="main-content">
<ul id="carousel">
<li><img src="http://coolcarousels.frebsite.nl/c/2/img/building6.jpg" /></li>
<li><img src="http://coolcarousels.frebsite.nl/c/2/img/building6.jpg" /></li>
<li><img src="http://coolcarousels.frebsite.nl/c/2/img/building6.jpg" /></li>
<li><img src="http://coolcarousels.frebsite.nl/c/2/img/building6.jpg" /></li>
</ul>
<div class="clearfix"></div>
</div>
This is the correct way to implement responsive with this plugin:
responsive: true // you must add this
As you can see it is not breaking and working perfectly. http://jsfiddle.net/3mypa/
This is with the STANDARD template.
I believe you are searching for a different template, isn't this what you are looking for?
http://coolcarousels.frebsite.nl/c/44/coolcarousel.html
I've been looking at this issue as well and the best I've found is to watch for a window size and react accordingly. For example
$(window).resize(function(){
//listens for window resize
var TimeOutFunction;
clearTimeout(TimeOutFunction);
//To try and make sure this only fires after the window has stopped moving
TimeOutFunction=setTimeout(function(){
$('.slides').trigger("destroy",true);
//Destroys the current carousel along with all it's settings - extreme but It wouldn't accept setting changes once running
if($(window).width()<1170){
//The width should be the width of a single image since I assume your using the same image size for all images on the slider.
$(function(){
$('#carousel').find('.slides').carouFredSel({
width:'100%',
items:{
visible:1,
start:-1
},
responsive:true,
minimum:3
})
})
}else{
$(function(){
$('#carousel').find('.slides').carouFredSel({
width:'100%',
items:{
visible:3,
start:-1
},
responsive:false,
minimum:3
})
})
}
},500)
})
This way once the window size is below the width of the images and the responsive action should kick in it does but once it's larger than one image again it moves back to the truncated view.
Admittedly it could tidied up more for portabilities sake but you that should give you the right basis to work on.