I've read a lot of articles describing how to center a img bigger than the div container. But I also need to scroll that image horizontally (specially for mobile devices) and I cannot explain myself the behaviour I get and how to fix it.
I use flex (through bootstrap classes):
<section id="container">
<div class="for-mobile d-md-none d-flex overflow-auto justify-content-center">
<img src="image_bigger_than_div"/>
</div>
<section>
Additionnal css:
.for-mobile img { flex:none }
The image is well centered and I can scroll on the right side but I cannot scroll on the left side. If I change the flex direction to row reverse, the opposite behaviour occurs.
Why? How to fix this please?
Thx
NB:
If I don't "justify-content: center", the img is not centered and I can scroll the full image.
The code is working fine to me I had to close the section tag just as shown in the code snippet.
I also added class img-fluid to the image to make it responsive but if you want to scroll just remove that class.
<section id="container">
<div class="for-mobile d-md-none d-flex overflow-auto justify-content-center">
<img class="img-fluid" src="assets/images/image.jpg" />
</div>
</section>
And I was able to scroll right and left without any problem...
I also believe the CSS code you provided is not needed.
Related
I am trying to understand how Stripe achieves its layout here: https://stripe.com/docs/payments
That page has a column flexbox div containing 2 child divs: one for the navbar and the second for the main content. The column direction means that the navbar will sit on top of the main content. The navbar does not use sticky and from what I can see it does not use fixed positioning either.
The main content div is a Flexbox with overflow-y: hidden and has 2 child divs: the first for the LHS sidebar and the second for the main page content.
Note that left sidebar and main page content scroll independently and the overall page itself does not scroll at all. Unless I misunderstand what is happening, Stripe appears to be using the overflow-hidden property in the primary div to ensure that the page contents div does not go outside the viewport and hence the overall page is not scrollable. The inner divs use overflow-y-auto to ensure that content inside them is scrollable.
I'm trying to replicate this using the below using Tailwind and Nextjs:
<div class="h-full bg-white" >
<div class="flex flex-col h-full">
<div id="Navbar" class="bg-blue-200">
Navbar
</div>
<div id="MainContent" class="flex flex-auto h-full overflow-y-hidden">
<div>
<div class="flex-grow-0 flex-shrink-0 flex flex-col h-full w-56 bg-green-100">
<div class="flex flex-grow overflow-y-auto overflow-x-hidden">
<div>
<p>lhs</p>
<p>lhs</p>
... lots more content here to ensure page overflow
</div>
</div>
<div>
Sidebar footer
</div>
</div>
</div>
<div class="bg-red-100 w-full">
Content
</div>
</div>
</div>
</div>
However, when I use the above I just get the whole page that scrolls, whereas I'm expecting to see the LHS sidebar containing the list of <p>las</p> elements scroll and LHS sidebar footer and the page as a whole to stay static. There is no change when I add a load of content into the content div. Here's what it looks like: https://play.tailwindcss.com/J6unFAO47B
Whilst I know that I could use a sticky navbar, I'm trying to understand what Stripe is doing in their page and so I want to understand why is my sidebar not scrolling independently of the other areas of the page?
I'm not sure why it's not working in the Tailwind playground - I suspect it's because I'm not setting a height in one of the parent divs. When I do that, it works.
In Nextjs, the solution wast to do this in CSS:
#__next {
height: 100%;
}
This ensures that the height of the top-most div is set to the height of the viewport and then the overflow seems to work fine as a result.
Check out this: My ans. I hope this solves your problem.
I want to create a fullheight layout with a top navigation bar, middle area and footer. The Top Navigation and Footer should always stay at the top and bottom, respectively. The layout I managed to create looks somewhat like this:
I implemented this with:
<section class="hero is-fullheight">
<div class="hero-head">
<the-navbar></the-navbar>
</div>
<div class="hero-body">
<div class="container">
<dashboard/>
</div>
</div>
<div class="hero-foot">
<tab-navigation></tab-navigation>
</div>
</section>
The problem now is that when I have other elements than the <dashboard/> in the hero-body (like a long list of boxes) the fullheight layout is lost, making the site longer than the display height. How can I make the hero-body div scrollable? I tried adding overflow: auto; but that doesn't work
Apply height or max-height for hero-body and then apply overflow: auto;. May be you can hide overflow-x(overflow-x:hidden) and apply scroll only vertically by overflow-y:auto.
i'm trying to stack 3 images inside a container so they appear on top of each others.
My issue is i don't know the image size and i want my container to be equal to the tallest height. I also don't want to use javascript.
Here is a fiddle that demonstrate the expected result and is actually a solution to my problem but only works on Chrome !
http://jsfiddle.net/TnVVa/
here is the html part of it :
<div class="container">
<div class="img-container">
<img src="firstImage.jpg"/>
<img src="secondImage.jpg"/>
<img src="thirdImage.jpg"/>
</div>
<div class="text">
This is my text
</div>
</div>
i'm looking to have the same result on other browsers (at least firefox and IE10+, if more thats better)
As a bonus it would awsome to have the 3 images be vertically centered in their container.
I have a pre-code page coded as follows:
<div id="linearBg">
<div id="wrapper">
<div class="logo"></div>
<div class="navigation"></div>
<div class="video"></div>
<div class="content"></div>
</div>
</div>
Where linearBg is a gradient background, the back board of the website.
Wrapper is the container for the inner div's, and the rest are content oriented.
So I've already implemented this with styles and all sorts, but the thing is I want to add:
<div class="watermark"></div>
Underneath/behind both the content and video div, sort of like a reverse watermark,
I've tried z-indexing but I'm not an expert. Could you guide me on to do make this possible?
http://jsfiddle.net/nEWCP
All I need is to get the watermark behind both the video and content div's.
Something like this?
http://jsfiddle.net/yXTYM/3/
The trick is:
position: relative on the video and content div
position: absolute on the watermark div and no positioning, so that it starts where the previous element (nav) ended
height: 100% on the watermark so that it spans to the bottom of the wrapper
overflow: hidden on the containing div so that the watermark doesn't extend below it
Let me know if this is what you had in mind.
From your description, I don't think that you would even need a new HTML element. If you want a "reverse watermark" as you've described it, it sounds like you want a different background behind the content and video elements. Something different from the gradient.
Really all you need to do is define a class in your CSS that adds the watermark when you need it.
Here's a basic example. The orange color simulates your watermark behind only the video and content.
.watermark { background: url('/path/to/watermark.png'); }
<div id="linearBg">
<div id="wrapper">
<div class="logo"></div>
<div class="navigation"></div>
<div class="video watermark"></div>
<div class="content watermark"></div>
</div>
</div>
http://jsfiddle.net/82saE/
I think I have what you're after - a wrapping element that mirrors the dimensions of linearBg - giving you a gradient background with a repeating image as well.
I'm using the 960 Grid System on this page where I list my instapaper bookmarks: http://labs.tonyhue.com/bookmarks/
However, the social media section is set off from the rest. It should be aligned to the right following the programming section. Any ideas?
Add a (fixed) height to your .grid_6-Container.
.grid_6 {height:250px; /*or something else*/}
Your Problem occurs on floated elements with different height.
Nice reading about floatings: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
Edit:
Otherwise you could add a wrapper element to clear your floats:
<div class="wrapper">
<div class="grid_6"></div>
<div class="grid_6"></div>
</div>
<div class="wrapper">
<div class="grid_6"></div>
<div class="grid_6"></div>
</div>
You can clear your floats with .wrapper {overflow:hidden;} OR you can use the clearfix method: http://perishablepress.com/press/2009/12/06/new-clearfix-hack/