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.
Related
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%;
}
I'm making a responsive website that has pages with several nested <div>s with various 1px borders. I have overflow set to auto in case some unexpected element exceeds the screen size.
In Firefox everything looks fine.
But in Google Chrome, sometimes grey scrollbars (unscrollable) appear even when there is no overflow content. Sometimes it's X or Y or both, depending on the zoom level.
The problem disappears when turning off the 1px border.
I've done further testing and the problem appears on Windows 7 and 8.1, but not 10. The behavior on my computers are opposite for Windows 7 and 8.1. When zoom is 100% Win 8.1 shows scrollbars, while Win 7 does not. When zoom is 90% or 110% Win 8.1 does not show scrollbars, while Win 7 does show.
If I wrap the <div> with border with an outer <div> with no styling, the scrollbars disappear most of the time except for 75% zoom.
Using box-sizing:border-box; did not help.
Is there a simple solution I can use to fix this without having to change things in the body or breaking the styling of the other various pages on the site?
Here is a jsfiddle test which is fine on Firefox but shows X scrollbar in Chrome at 100% zoom for me:
https://jsfiddle.net/tsr1w630/0/
html {
margin: 0;
padding: 0
}
body {
background-color: #fff;
color: #000;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 3px;
overflow: auto;
}
.box_with_border {
display: block;
border: 1px solid #CCC;
overflow: auto;
padding: 3px
}
<div class="box_with_border">
asdf1234
</div>
I attached a screenshot here:
Over the past few weeks I've been developing a website for a friend of mine and while it works perfectly in most browsers, it breaks in 2 seperate ones.
I have a div, with css of
#div2 {
width: 70%;
margin: 0 auto;
display: block;
text-align: center;
}
In Chrome, Opera, Internet Explorer and many other browsers, it loads fine, and centers the div.
But in Firefox and Safari (Both on windows), the div stays on the left of the page.
div2 IS inside a parent div, but the parent div only has a border set on it, nothing else.
I've been trying for ages to rectify the issue, even using the #-moz-document url-prefix() css, but it still doesn't fix it.
Any suggestion would be gratefully recieved.
Try specifying "width: 100%" on the parent div. This same issue happens when there isn't a container div, and the solution is specify "html, body {width: 100%}", so this is likely the same case.
Use:
{
left:50%;
margin-left:-200px; //minus half of your div width
}
A Firefox moderator already gave a solution:
#div2 {
border: thin solid #000000;
width: 760px;
height: 1px;
margin-left: auto;
margin-right: auto;
}
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...
I am trying to write a CSS in which when the user writes text and it overflows instead of having a scrollbar or hiding, it just goes down like in a normal Word Document or so. I have this code:
#content-text {
width: 960px;
padding-left: 10px;
padding-right:10px;
text-align: left;
color:#000;
height:100%;
margin-left: 25px;
margin-right:25px;
}
The odd thing, is that while this code actually does what I want in IE in Firefox it overflows and becomes a scrollbar. I've tried overflow:auto; overflow:hidden; and overflow:inherit; just to see if any helped but no luck so far, and I honestly have no idea of why is this happening in Firefox, =/ would any of you know?
Update:
I tried with overflow:visible; but I just get the overflow...well visible but still it doesn't wraps. and ONLY in Firefox so far. =/
Update:
The only other thing that could be affecting is that I have another CSS code and the first is contained:
#content-title{
background-color: transparent;
background-image: url(../img/content-title-body.png);
background-repeat: repeat-y;
background-attachment: scroll;
background-x-position: 0%;
background-y-position: 0%;
height:auto;
position:absolute;
z-index :100; /* ensure the content-title is on top of navigation area */
width:1026px;/*1050px*/
margin: 160px 100px 5px 100px;
overflow: visible;
top: 55px;
}
and the HTML that uses this is:
<div id="content-title">
<div id="content-text"> Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!<p>Hola!Hola!
</div>
</div>
So your css is probably fine. For example on my page I have css is like this:
textarea.input_field2 {
margin: 10px 10px 10px 0px;
width: 440px;
height: 150px;
background:#696969;
color: white;
border: none;
font-size: 14px;
text-align: left;
vertical-align: middle;
}
Then in the body I call it up like this:
<textarea rows="9" cols="9" class="input_field2" name="user_comments"></textarea>
It works fine.
But make sure when you test it you test it with something like Lorem Ipsum, words with spaces and not one long string like 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' cause that will force a scroll bar probably. Also check your html and css for validation.
Try: overflow: visible.
There must be more to the story than you are showing here. I used the CSS provided and I am seeing the same behavior in both Internet Explorer and Firefox. The page is rendered 960 pixels wide and when the browser width is less than this, a horizontal scroll bar is rendered.
If you specify a width on an element, the browser is not going to render it less than this value. If you remove the width declaration from your example, the element will only render as wide as it needs to.
If this is not the answer you are looking for, please provide more code to give us the whole picture.
Add word-wrap: break-word; to your #content-text