Going mental about that thing: I have a following structure of divs:
<div class="main">
<div class="container">
<div class="column">
<div class="content">
<div class="block"></div> (repeat 4 times)
</div>
</div>
<div class="column">
<div class="content">
<div class="block"></div> (repeat 4 times)
</div>
</div>
<div class="column">
<div class="content">
<div class="block"></div> (repeat 4 times)
</div>
</div>
</div>
</div>
CSS:
.main {
overflow-x: scroll;
width: 400px;
}
.block {
display: block;
width: 300px;
height: 80px;
background-color: blue;
margin: 5px;
}
.container {
width: 1000px;
}
.column {
float: left;
height: 300px;
}
.content {
height: 300px;
overflow: scroll;
}
The idea of this layout it to have one big container, scrolling horizontally, that contains smaller containers that scroll vertically.
Issue: while it works perfectly on android and desktops, can't get it to work on iphone with safari (can't test on chrome for iOS though, don't have access to device). Instead of scrolling the container, iphone scrolls entire page (please try to scroll left-right while keeping finger on blue rectangles). Please see this jsfiddle on iphone.
I do figured out reading stackoverflow and testing by myself that it has something to do with css overflow property, but still can't figure out the solution.
Any ideas please?
So once again the solution was to add -webkit-overflow-scrolling:touch; in the right place of the code. In this case it was the very top main container and get rid of unnecessary overflow properties:
.main {
overflow-x: scroll;
width: 300px;
-webkit-overflow-scrolling:touch;
}
Tested on the emulator, but looks like working now. JSFiddle
Related
this is how it looks on desktop
I have an image that has the full width of the screen width: 100%;
Specifically this image is a map, in the whole center of the map there is a "path", with the points that when clicking, some manners appear,
The problem is that I don't know how to make that huge sensitive map so that it can be seen well on different devices, what I was thinking is what an overflow is but I really don't know how to do it so only the left part of the image is shown
This is the code:
.map-container {
padding: 3.2rem .8rem;
position: relative;
display: inline-block;
margin: 0 auto;
background-color: $blue;
}
.img-map {
width: 100%;
}
<div class="container-fluid">
<div class="row">
<div class="map-container">
<img class="img-map" src="public/images/mapa.svg">
<div id="step1" class="point argentina"></div>
<div id="step2" class="point brasil"></div>
<div id="step3" class="point venezuela"></div>
<div id="step4" class="point colombia"></div>
<div id="step5" class="point panama"></div>
<div id="step6" class="point mexico"></div>
<div class="mod-paso-1">
<div class="mod-info">
<p><b>XXXXXXXXXX</b></p>
<p><b>XXXXXXXXX</b></p>
<p><b>XXXXXXXX</b></p>
<P>XXXXX</P>
</div>
</div>
</div>
</div>
</div>
You who recommend me to make this map responsive?
"-Cut the image for each resolution?"
If you need more details, I am attentive
Thanks in advance.
Add 100% width to your map container so the image width can take 100% of the screen whether on desktop or mobile:
.map-container {
width: 100%;
padding: 3.2rem .8rem;
position: relative;
display: inline-block;
margin: 0 auto;
background-color: blue;
}
May be this would help you
.img-map {
width: 100%;
height: 100%;
object-fit: contain;
}
I've also tried to fiddle around a bit with this issue.
you will have to open on mobile view because I only focused on that for now.
Here is the codepen
https://codepen.io/Spoochy/pen/LYYQzPv
I combined object-fit:cover and viewport heights
However, object-fit is quite new (as far as I know) and might not be fully compatible for all browsers. so I would suggest to always check the Can I use Tables before using unknown properties.
https://caniuse.com/#search=object-fit
I thought setting the min-height property will expand if necessary to accommodate its contents, but I was shocked to realized that it is not displaying the content at all, especially when I re-size. Some contents is completely loss from display. This code below is not the exact code thought, but this is the closest to my problem I can get.
<div class="parent">
<div class="box"> Box One</div>
<div class="box"> Box two</div>
<div class="box"> Box three</div>
<div class="box"> Box four</div>
<div class="box"> Box five</div>
<div class="box"> Box six</div>
</div>
<style>
.parent {
min-height: 300px;
width: 100%;
background-color: blue;
}
.box {
width: 50%;
height: 50px;
color white;
}
</style>
The Problem: You can see the problem when the content inside the .box increase and the size of the browser is decreased to mobile version. Then you can see the real problem, that the content is getting out of the blue box.
You can see the problem here : https://jsfiddle.net/bro49tg7/3/ resize the width of the output to smaller screen.
To Solve this problem
Change your css code to this:
.box{
width: 50%;
min-height: 50px; /* changed this */
color: #fff;
}
Exactly as Hunzaboy says, you need a min-height on each box for this to work. Take a look at this fiddle:
https://jsfiddle.net/6zpek8m6/
.parent {
min-height: 300px;
}
.box {
min-height: 50px;
}
I have a page layout with several nested CSS tables. All of these tables have 100% height. As long as the browser window is high enough to fit all without scrolling, all the tables have the correct height. When the browser window get too small to fit the height of the content, the innermost table collapses in height and the 100% height is ignored. This happened with IE 11. All other browsers manage to get it right, including Edge.
I have tried different CSS rules, especially adding explcit 100% height to all parent elements. I also tried adding all divs for the table rows.
JSFiddle: https://jsfiddle.net/181d0qu1/1/
To reproduce the error, use IE and reduce window height until the vertical scrollbar appears.
html, body {
height: 100%;
margin: 0;
}
.table {
display: table;
height: 100%;
background: #9A9A9A;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
vertical-align: top;
}
#spacer {
height: 400px;
background-color: silver;
}
#right > div {
background-color: rgb(194, 206, 214);
}
#top > div {
height: auto;
background: #EECCCC;
}
#bottom > div {
height: 1px;
background: #EECCEE;
}
<div id="container" class="table">
<div class="cell">
<div id="intermediate" class="table">
<div class="cell">
<div id="spacer">spacer</div>
</div>
<div class="cell">
<div id="right" class="table">
<div id="top" class="row">
<div class="cell">top</div>
</div>
<div id="bottom" class="row">
<div class="cell">bottom</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is a screenshot showing the behaviour in IE (correct when window is high enough to the left, resized window on the right):
Is there a way to make IE keep the innermost table at 100% height without leaving away any of the nested elements?
I've been trying, but struggling to get this layout going using twitter bootstrap, what I need is a centered page with two side columns that don't scroll with the page but a center column that does.
for reference the black displays the entire screen space, with blue showing body content, two grey boxes being non scrolling, but maroon scrolling normally as it is the main content for the page
Setting any column with position fixed makes them overlap, and attempting to use a traditional sidebar takes it to the edge of the view space, which is also undesired. any ideas?
The example shows to use the universal scollbar (on the right side of browser frame, rather than in the middle), live demo: http://jsfiddle.net/hm4do8mg/
HTML
<div class="left">
<p>left</p>
</div>
<div class="midd">
<p style="height:2000px;">midd</p>
<p>bottom</p>
</div>
<div class="righ">
<p>righ</p>
</div>
CSS
body, p {
text-align: center;
margin: 0;
}
.left,
.righ {
background: lightgrey;
position: fixed;
}
.left {
width: 20%;
}
.midd {
background: paleturquoise;
width: 60%;
position: relative;
left: 20%;
top: 0;
}
.righ {
width: 20%;
right: 0;
top: 0;
}
The layout you asked, is kind of old fashion style like <iframe>. You can also use <table> to do it, it's the most solid, and easiest way to me (ignore it if you need a mobile version).
I made a fiddle that can help you achieve this. But I haven't used Bootstrap. You can easily make these changes on bootstrap grid.
JSFIddle
I think this could fit your needs. It's not perfect, but it's a starting point.
HTML
<div class="container">
<div class="row">
<div class="first col-xs-3">
<div class="fixed">
<p>Fixed</p>
</div>
</div>
<div class="col-xs-6 scroll">
<p>PUT A NOVEL IN HERE</p>
</div>
<div class="second col-xs-3">
<div class="fixed second">
<p>Fixed</p>
</div>
</div>
</div>
</div>
CSS
html, body {
background:#CCCCCC;
height:100%;
}
.container, .row {
height:100%;
}
.fixed {
height:100%;
background:#FFFFFF;
position:fixed;
width:20%;
}
.scroll {
height:100%;
background:#000000;
overflow:auto;
}
.second.fixed{
margin-left:-15px;
}
DEMO
Fiddle
I have created a website in which an entire page scrolls left and right instead of up and down using only HTML and CSS. I have taken that code for another website to create a banner type navigation thing like Polygon's website when the page is viewed for an iPhone or another device with a small screen like that, however I can't understand why in this case the code isn't working, I have spent ages on it and I just cant see the problem. Maybe some fresh pair of eyes will help, here is the code I'm using.
CSS:
html {
height: 100%;
overflow-x:hidden;
}
body {
height: 100%;
}
#cover_menu {
width: 2560px;
height: 480px;
overflow: hidden;
}
#cover_tile {
width: 640px;
height: 480px;
float: left;
}
#cover_link {
width: 100%;
height: 50%;
}
HTML:
<div id="cover_menu">
<div id="cover_tile">
<div id="cover_link" class="link_1">hello</div>
<div id="cover_link" class="link_2">hello</div>
</div>
<div id="cover_tile">
<div id="cover_link" class="link_3">hello</div>
<div id="cover_link" class="link_4">hello</div>
</div>
<div id="cover_tile">
<div id="cover_link" class="link_5">hello</div>
<div id="cover_link" class="link_6">hello</div>
</div>
<div id="cover_tile">
<div id="cover_link" class="link_7">hello</div>
<div id="cover_link" class="link_8">hello</div>
</div>
Thanks in advance, Matt