I'm working on a self contained responsive css component (type of carousel) for a website i am implementing.
The need is to have an infinit number of content items (loaded from a server), showing exactly two at a time. As the user advances through the list of items, they appear to scroll to the left with new items transitioning in from the right pushing the current items to the left.
the items should get their width according to the current responsive layout.
The general idea is to have viewport which is a part of the page layout and can accept any width stated in px or in %, a container which gets width: 100% so that it fill the size of the viewport. and items which are arranged horizontally side by side without wrapping, the items get a width of 50% so exactly two items fit into the container/viewport and the rest of the items overflow (and are hidden.)
<div class="viewport">
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<!-- more items get loaded as the user advances through the content -->
</div>
</div>
"scrolling" is achieved by setting a negative margin on the first item - which this technique i can always set a negative margin which is: <number of items> * 50%
I got this mostly working in the following jsfiddle: http://jsfiddle.net/gZBEV/5/
The items are arranged correctly and they get their width according to the width of the surrounding viewport. (use the buttons to emulate moving/scrolling through the items)
The problem is a horizontal gap (shown by the arrow) which appears between each item which screws up the layout.
The solution to this would be to find a way were the items have no horizontal gap between them like so:
Use this fiddle http://jsfiddle.net/gZBEV/5/ as a starting point.
It's because the elements are display:inline-block. Inline block level elements respect line-height and font-size and whitespace. change the font-size of the parent to 0px and the gaps disappear. This means you will have to reassign the font size after the fact (Great for image only sliders. Not so much for content sliders).
http://jsfiddle.net/RAbSU/
.container {
...
display: inline-block;
font-size: 0px;
& > * {
font-size: 12px;
}
...
EDIT: otherwise, you could just change the format to display:block with float:left.
If you remove the carriage returns inside the div, this will remove the space:
<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div></div>
Related
I've made the following layout for my application:
<div class="app-container">
<header>header </header>
<main>
<mat-sidenav-container>
<mat-sidenav [mode]="'side'" #sidenav>sidenav sidenav sidenav</mat-sidenav>
<mat-sidenav-content>
<div class="page">
<p><button mat-button (click)="sidenav.toggle()">Open Sidenav</button></p>
<table-sticky-header-example>loading</table-sticky-header-example>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
</main>
<footer> footer </footer>
</div>
The block <div class="page"> is responsible for showing the content. This is also the area, which should be scrollable. Inside this container are often placed tables, which have sticky headers (by using position:sticky). Everything is working fine, but i can't find a way to add some space (margin/padding) between the sticky header of the table and the header of my layout without having trouble either with scrollbars or a visual bug.
I've made a little stackblitz, which shows my current implementation/tries:
Layout without margin or padding
Layout with margin (scrollbar get pushed away from most right position)
Layout with padding (adds transparent gap between sticky table header and layout header)
My Questions are:
Is there a way to add space to my block <div class="page"> container, so that there will be a gap between my sticky table header and my layout header?
Can i prevent my scrollbars to get pushed away from the right most position, when i use margin? (padding doesn't work, because the space is transparent, so that my sticky header "floats")
Thanks in advance for every tipp or hint!
Maybe a: 'border-top: solid 1rem #ccc;' and some padding top and bottom in 'th' will visually fix it
Go with the "layout padding" option and simply set the sticky elements top to 0 - padding-top value set on the parent, top: -1rem; in this case. This will remove the transparent gap but will also remove the spacing when the element is stuck. If you want to keep the spacing when stuck, look into creating a pseudo-element with the same color background as the table or maybe adding margin-bottom or a border to the header.
I need an element to take the entire screen's width.
Thus, I put it under .row like so because .container adds 15 px padding, then .row takes it away to be full width again.
.container-fluid
.row
header
.col-xs-12
"content content content"
But when I inspect the header element, its height is 0.
How do I get it to automatically be the height of the contents of .col-xs-12 without hard-coding the pixel values or using javascript?
So a few things:
First of all, as per Bootstrap's docs, "only columns may be immediate children of rows." If you are going to add a header element, make it a parent element of the .row or the .container, or put it within the .col-xs-12.
All .col-xx-xx divs float left, so they are technically taken out of the page flow, which is why your header element has no height--the browser doesn't see its contents as affecting the flow of the page, so it doesn't believe it has a height. Using Bootstrap, you can add the .clearfix class to fix this, though I suggest making sure that you clean up your Bootstrap layout a bit first.
EDIT:
Also (and I suppose this should go without saying, but since your code is sparse -- and in haml?--, I want to make sure that it's true), if your .col-xs-12 has no content in it yet, you won't have a height because there's no minimum height set on a .col-xx-xx divs.
<div class="container-fluid">
<div class="header">
<div class="row">
<div class="col-xs-12">
CONTENT HERE
</div>
</div>
</div>
</div>
I hope this helps!
This might explain my question a bit better:
I need one child div positioned on top of the other so that the last-child is only showing around the edges, but the two child divs need to scroll together and keep the background of the first-child div static. This mesa that the viewport would be the first-child, but the content of the first and second child would have to scroll within the container so they can scroll together., with the first-child being the viewport.
I have the following HTML structure:
<div class="container">
<div class="text">
<div class="row">Row</div>
<div class="row">Row</div>
<div class="row">Row</div>
<div class="row">Row</div>
<div class="row">Row</div>
<div class="row">Row</div>
</div>
<div class="bars">
<div class="a"></div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="b"></div>
<div class="a"></div>
</div>
</div>
The bars extend to the width of the page, and the text div is overlaid on top of them, with a margin around it. I position each bars div so that they match up at the same horizontal level with the visually corresponding row.
The text div is positioned to be x pixels from each side, so that there is a margin around it. This way, you can see the ends of the bars below it.
The markup is easy, but I can't figure out the CSS for this...
text is positioned absolutely, so that it can extend to the bounds of the page with a margin. This is fine if the content inside it stays within the bounds, but it does not in this case.
This is all very hard to explain, but basically, here's the problem: I set container to overflow:scroll because I need the bars to scroll with the rows. Since text has a background image, and is positioned so that you can just see the ends of the rows beneath it, it has to be position:absolute. This doesn't work, however, when the content exceeds the bounds of text. I can't add the background image tocontainerbecause it would cover the ends of thebars`.
Does that make sense? No? Here's a jsFiddle: http://jsfiddle.net/charlescarver/BskaP/2/
Does it still not make sense? Here's a picture:
Any ideas? Ask me some questions so I can explain this better.
You don't need a lot of the css that's there -- for example the .container. If I understand correctly (and I'm not 100% sure I do) you'd like a image on the .text div which remains fixed while the rest of the page -- bars and text scroll.
You cannot put the image on the text div as it will scroll; rather, I suggest putting the image on each .row with a position: fixed as well as using padding-bottom:20px instead of the margin, so that there appears to be an image behind all of the rows and the effect is continuous. That will give you the effect I think you're after
http://jsfiddle.net/BskaP/5/
You can use jQuery's scrollTop() function to get an elements position based on scroll. Coupled with a scroll() event, you should be able to sort something out.
So put something in your scroll event to offset the position of your rows and text by the value of scrollTop().
scrollTop() : http://api.jquery.com/scrollTop/
scroll event : http://api.jquery.com/scroll/
My initial thoughts was to avoid JavaScript by combining the rows and text elements together and fake the rows being behind the text... but given your specific situation I couldn't come up with anything...
You should add overflow:auto to row. Here is a jsfiddle that proves it works: http://jsfiddle.net/BskaP/3/
I added an extra long row to it for an example.
I don't know if this is what you want, but I think it is.
I have a problem with a Bootstrap well going beyond its containing element (here a class="row" , itself in a class="span4").
It is clearly visible in the JSFidle I did here: http://jsfiddle.net/sebastien_worms/fc42w/2/
And fullscreen : http://jsfiddle.net/sebastien_worms/fc42w/2/embedded/result/
Extract of the code is here:
<div class="span4 pull-right">
<div class="row">
<div class="well" style="width:100%;">
<b>This is the well that bothers me !</b><br> It goes beyond the right end of the screen ... And if you click "inspect element", you can see it goes beyond the right-end of its containing "span4" and "row"...
</div>
</div>
</div>
You can see the well going beyond its containing element (and the screen) when playing with you browser's window size (around 1000px wide is the most visible).
... And obviously, I can't set the well in the same div as the span: http://jsfiddle.net/sebastien_worms/fc42w/3/
How should I do to have the well fill 100% (only) of the span4 ?
It's beacuse your padding, just add this
.well {
box-sizing: border-box;
}
It will work in any modern browser and IE8 and newer
I have position:fixed <div> that appears in the middle of the screen. When there are messages, a second position:fixed <div> is put next to the first <div>.
I'm finding on different screen sizes (say a netbook - small screen) the <div>'s sit on top of each other.
Is there a way to lock their position to each other? I tried using a fixed container to hold both of them, but they still moved.
<div id="container">
<div id="container"></div>
<div id="container"></div>
</div>
EDIT:
<div id="wrapper">
<div id="container1"></div>
<div id="container2"></div>
</div>
CSS - container1 and container2 still move when I change the screen size.
#wrapper {
position: fixed
}
#container1 {
position: fixed
}
#container2 {
position: fixed
}
do I need to use relative positioning on the container 1/2 divs?
Most importantly, id is unique. You cannot use id="container" on three different elements. Each must have their own id.
<div id="container">
<div id="container"></div>
<div id="container"></div>
</div>
Should be something like this...
<div id="wrapper">
<div id="container1"></div>
<div id="container2"></div>
</div>
Also, where is your CSS code?
If you don't want these things to push each other around as the window size changes, one method would be to specify the exact size and position of each container.
EDIT:
Again, without seeing an example of this page, a demo, or a better description of what you want, this is speculation.
You could put fixed position on the wrapper and then put an exact size and position on the <div>'s within.
The position: fixed CSS rule "fixes" the element's position on the screen. Once you set it to fixed, it will never move from the position you put it in. Since you're applying fixed to all of your elements, you're seeing the elements stack (likely in the top-left of your screen considering you're not providing a top or left value).
If you want the child elements to appear inside your fixed container, just don't add position: fixed to them and they'll sit inside the parent just fine.
Of course, all of this is pure speculation considering we can't see an example of your problem, nor your desired result.
you cant fix the position of your div like this. first of all you have to find the screen size for your parent div which contains that div u want in middle.like
<div id="parent"> <div id="middle_div"></div> </div>
function getScreenSize()
{
var winW, winH;
winW = document.getElementById('parent').availWidth;
winh = document.getElementById('parent').availHeight;
}
this is how you vil get the size availabel for parent div.Then set the width and height of parent div according to it.now if you have width of parent div its easy to set middle_div in middle of parent div.