I have a problem with overflow-auto. This property is working very well in laptop/desktop but it is not working on mobile devices.
https://bdevg.com/articles/Testing%20overflow%20in%20mobile%F0%9F%8F%83%E2%80%8D%E2%99%80%EF%B8%8F%205f9a2c91f4c1090008e5237f
Open the above page in mobile view or on any mobile device. You can notice this add a scrollbar at the bottom of Overflow...Overflow...Overflow...Overflow...Over.... in laptop/desktop view. But, it doesn't add the same scrollbar at the bottom of Overflow...Overflow...Overflow...Overflow...Over.... in mobile view, instead, it makes the whole page scrollable including header and footer.
.tui-editor-contents pre {
margin: 2px 0 8px;
padding: 18px;
overflow: auto;
background-color: #f5f7f8;
}
This code adds overflow scroll property. You can edit the in-browser dev console.
Thanks for your time.
You need to give your class="MuiContainer-maxWidthSm" a default value
.MuiContainer-root {
max-width: 600px;
}
TRY THIS
.tui-editor-contents pre {
margin: 2px 0 8px;
padding: 18px;
overflow: auto;
background-color: #f5f7f8;
hieght:100%;
width:100%;
}
Related
As we all know, you can hide a scrollbar in Safari and Chromium with the following CSS snippet:
::-webkit-scrollbar {
display: none;
}
However, this doesn't seem to work when -webkit-overflow-scrolling is set to touch, specifically on iOS. Chromium properly hides the scrollbar.
Is this a WebKit bug, or is there a way to hide a scrollbar AND enable fluid (touch) scrolling? It seems to be possible (perhaps with js?), on the mobile version of Google. Looking through the page source and googling my answer didn't seem to help though.
It seems that currently (as of January 2017) the only way to get around this is by wrapping the scrollable element inside of a parent div and manually hiding the scrollbar from view.
This can be achieved by applying a fixed height/width and overflow: hidden; to the parent div. You can then add extra padding or height/width to the original element to, essentially, push the scrollbar out of view.
Mark Otto tweeted about the issue back in June 2016. Here is an example of his workaround: https://output.jsbin.com/lohiga.
The basic idea goes something like this:
<header>
<div> <!-- parent wrapper added -->
<nav>
First link
Link
Link
Link
Link
Link
Link
Link
Last link
</nav>
</div>
</header>
CSS:
header {
margin: 20px 0;
padding: 10px 5px;
text-align: center;
background-color: #f5f5f5;
border-bottom: 1px solid #ddd;
}
// Parent wrapper
div {
height: 30px;
overflow-y: hidden; // "crop" the view so the scrollbar can't be seen
}
// Original scrollable element
nav {
padding-bottom: 20px; // extra padding to push the scrollbar out of view
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
nav a {
display: inline-block;
padding: 5px 10px;
}
I draw a vertical line in html like this:
.vr-long {
background: #000000;
border: none;
width: 1px;
height: 100%;
}
<hr class="vr-long">
This works fine on every device (PC, Android) and every tested browser except all browsers on my ipad (iphone not tested). On my ipad all vertical lines dissappeared. The problem seems to be the "height: 100%;" because when I use height: 50px; for example, I get that vertical line.
Any ideas how to get height: 100% to work on iOS?
By the way: Same problem when I use an img-tag to draw a vertical line by using repeat-y and height: 100% ...
I solved the problem by using a div as a vertical lign.
.vr-long {
margin: 0 2em 0 2em;
border: 1px solid #000000;
}
<div class="vr-long"></div>
I still dont't know why the problem only appeared on my ipad, but that workaorund doesn't cause any problems.
I am working on a simple html webpage that contained a footer But the footer does not work correctly !
I want the footer be at the bottom of the page but ... !
and this is the problem :
here is a demo of my webpage ( sorry for the language ;) ) :http://gooloop.ir/dl/site/temp.html
Add overflow:hidden to .content.
The content was collapsing upon itself as it didn't have any defined dimensions, and thus the footer was placed over it.
.content {
width: 962px;
margin: 0 auto;
padding: 10px;
border-radius: 10px;
margin-top: 20px;
overflow: hidden;
}
It will work. Tested in the dev tool.
I am developing a theme on my website using Thesis 2. I just modified the classic responsive theme.
I created an id using the div tag called "header-middle-sub". And here's the code that I used:
#header-middle-sub {
background-color: #6699CC;
display: table;
margin: 0 auto;
width: 897px;
}
It works great on a browser using a desktop. But since it is responsive theme, when I open the site in a tablet or mobile phone, the width occupies a fixed 897px.
If I remove this line width: 897px; the title is centered on the screen. So what is the code to retain the position of the title?
BTW, here's my website http://bit.ly/1cuTmtE.
Update:
Can anyone please visit my site and use the "inspect element" of chrome or firefox?
Here's the CSS of my header section:
.header {
margin: 0 auto;
padding: 0px;
background-color: #C4C4C4;
}
#header-top {
background-color: #7ED7F2;
}
#header-middle {
background-color: #6699CC;
border-bottom: 5px solid #0f3158;
border-top: 2px solid #0F3158;
padding: 20px 0 20px 0;
}
#header-middle-sub {
background-color: #6699CC;
display: table;
margin: 0 auto;
width: 897px;
}
#header-bottom {
background-color: #0099CC;
}
#header-container {
display: table;
margin: 0 auto;
}
Here's the layout on my theme using thesis 2.
It doesn't work for desktop too! Make your browser window very small and you will see the horizontal scrollbar. The width is always fixed.
To avoid this behavior, use the following css code:
#header-middle-sub {
background-color: #6699CC;
display: table;
margin: 0 auto;
max-width: 897px;
width: 100%;
}
Now, it will always try to stretch the div over the whole browser window, but the max-width restricts it to 897px, but less is possible, and less will be used on mobile phones or when you resize your browser window.
float: left;
read about it here :
http://www.w3schools.com/css/css_float.asp
Try to use float property: float:left;
The property text-align: left will work for this, but still it will be clear after some more details of problem or a fiddle
You should use media queries to change the width of the container based on the resolution. And by the way. The problem is that margin: 0 auto means: "get my current width and position me in the center with equal margins on the left and right. So, if you want to use margin then you need media queries to dynamically change the container's width.
How to display a div at center top position of the page, which need to be work under all size of monitors using CSS.
Mainly I get issues on IE, where not aligned properly.
For margin: 0px auto;
to work width needs to be provided
style:
div#center
{
width: 300px;
margin: 0px auto;
}
html:
<div id="center">content</div>
CSS
div
{
margin : 0px auto;
}
Are you comparing the rendering in both IE and another browser by switching back and forth? If so, you might be noticing a shift because of the scroll bar. IE reserves the space for the scrollbar, while browsers such as Firefox only show the window scroll when necessary.
div#center
{
width: 300px;
margin: 0px auto;
}
not working on IE...