For some reason, vertical scroll is not working on my website when I access it on mobile Safari (iOS 9.1, iPhone 5, Safari 8.1):
https://sleepy-anchorage-3222.herokuapp.com
The mobile Safari debug results are attached.The only relevant errors I see are 5 CSS, font-awesome related warnings, everything else is normal.
Vertical scroll works fine on iPhone 6, and also its fine on my desktop browser. What's going on here??
(Note: I'm using Font Awesome icons and FlexBox layout, not sure if either are related to the problem though).
MOBILE SAFARI DEBUG CONSOLE
RELEVANT SCSS CODE
#media (max-width:960px){
> aside {
flex: 0 0 100%;
display: flex;
flex-flow: column nowrap;
height: 100%;
> header {
flex: 0 0 60px;
margin: 0 0px;
}
> main {
flex: 1 auto;
height: 100%;
overflow-y: scroll;
padding: 0 10px;
}
.restaurant {
margin: 30px 0;
&.selected {
box-shadow: 0 0 5px 3px rgba(0,0,0,0.5);;
padding: 2px;
}
.item-image {
max-width: 100%;
}
}
figcaption {
min-height: 80px;
position: relative;
}
.item-rating {
display: inline-block;
position: absolute;
}
Added this to body tag:
-webkit-overflow-scrolling: touch;
and it now works.
Related
I've made a custom horizontal scrollbar in elementor with custom css, it works for desktop view but it doesn't work for mobile view, what am I missing? the following is the custom css that I use
.scroller-card {
display: flex;
flex-direction: column;
min-width: 300px;
flex-basis: 300px;
border-radius: var(--whiskey-radius);
margin: 8px;
padding: 16px;
color: var(--whiskey-color);
background-color: var(--whiskey-panel-background);
transition: all 150ms ease-out;
}
.scroller-cards {
display: flex;
flex-wrap: nowrap;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
transform-style: preserve-3d;
perspective: 800px;
padding: 24px 0;
}
*, *:before, *:after {
box-sizing: auto;
}
.scroller-cards::-webkit-scrollbar {
-webkit-appearance: none;
width: 5px;
height: 5px;
}
.scroller-cards::-webkit-scrollbar-thumb {
border-radius: 0;
background-color: #0F2B4A;
background: #0F2B4A;
border-radius: 16px;
opacity: .5;
}
Here are the results
I'm still new to coding so please help
Remove flex-wrap on screen below 1024px.
Reason: On screen below 1024px, cards moved on next line and content width of container is not greater than you container max width. That's why scroll is not applying
Your code doesn't work on both Firefox desktop and Firefox mobile.
You're setting the scrollbar width to zero in this line:
scrollbar-width: none;
Later you're setting the scrollbar width here:
.scroller-cards::-webkit-scrollbar {
-webkit-appearance: none;
width: 5px;
height: 5px;
}
But because FF does not support -webkit-scrollbar your code doesn't work.
See ::-webkit-scrollbar on caniuse.com
I am using antd with React. I have a couple of Modals in my code. They work perfectly fine on web Chrome and Firefox as well as on mobile Chrome. However when using Firefox on mobile, I get a white box at the bottom of the page. Any ideas?
.ant-layout {
min-height: 100vh;
background: #background;
padding: 0 1.8em 1.5em 1.8em;
}
.ant-layout-content {
padding: 0 2em 1.5em 2em;
}
#media only screen and (max-width: 730px) {
.ant-layout-content {
padding: 0;
}
}
header.ant-layout-header {
padding: 0;
margin-bottom: 2em;
background-color: transparent;
color: white;
}
footer.ant-layout-footer {
display: flex;
flex-direction: row;
justify-content: center;
background-color: #primary;
color: #white;
text-align: center;
}
.ant-modal-body {
max-height: calc(100vh - 210px);
overflow-y: auto;
}
.ant-modal-body::-webkit-scrollbar {
width: 12px;
}
By default when ant design renders Modals. It renders them inside <Body />. Which could create an issue with overflow. Try to render modal inside, the first child of the body element (it could be #root). It should work.
To target the #root element you need to use getContainer function from ant design.
<Modal getContainer="#root" ... />
https://ant.design/components/modal/#API -> search for getContainer
I'm using Doxygen v1.8.13 on Windows.
I'm trying to optimize our HTML output. I would like to have the header with the navbar and search input stick on the top of the pages.
Using a custom css I managed to give the needed tags a position of fixed and all is working fine, except for the search results. That div (with an iframe) is falling behind my div.header.
When I move the div.header block inside the div.top block everything works as expected.
But I can't modify this in the header.html template, because the div.header block is not included.
How to solve this?
Here's my CSS, if needed:
/* Make the header fixed at the top */
#top {
position: fixed;
width: 100vw;
top: 0;
background: white;
}
.header {
position: fixed;
width: 100vw;
top: 137px;
}
.header > div.summary {
padding-right: 25px;
}
div.headertitle {
padding: 5px 5px 0 10px;
}
div.headertitle > .title {
margin: 0 2px;
}
div.contents {
margin-top: 180px;
}
#MSearchResultsWindow {
position: fixed;
border-radius: 3px;
padding-right: 2px;
}
#media(max-width:768px) {
.header {
position: fixed;
width: 100vw;
top: 277px;
}
div.contents {
margin-top: 318px;
}
}
I already read these similar questions:
Remove Doxygen prototype header
Provide custom/configurable HTML templates to Doxygen
But they don't provide what I need.
I finally got it working. Instead of using position: absolute I'm now using flex-box. I also needed to add a new div around all other divs.
This is my css code:
html,
body,
#page {
height: 100%; /* needed for proper layout */
}
body {
overflow: hidden;
}
#page {
display: flex;
flex-direction: column;
}
#top {
flex: 0 0 auto;
}
.header {
flex: 0 0 auto;
}
div.contents {
flex: 1 1 auto;
position: relative; /* need this to position inner content */
overflow-y: auto;
}
div.footer {
flex: 0 0 auto;
}
And this is the live website: http://www.mapwindow.org/documentation/mapwingis4.9/index.html
I have a responsive site that works perfectly fine on all desktop browsers as well as mobile Chrome, resizing the way I want no matter how narrow the window gets, but I'm getting a horizontal scroll on mobile Firefox. My content is just slightly too big, although I can't imagine how with my CSS. Here's what I believe is relevant:
#main {
width: 90%;
max-width: 960px;
margin: 0 auto;
}
.infoSection {
display: inline-block;
height: 300px;
margin-bottom: 75px;
}
.infoSection img {
position: relative;
float: right;
max-width: 50%;
top: 50%;
transform: translateY(-50%);
}
#media (min-width: 0) and (max-width: 470px) {
.infoSection {
height: auto;
margin: 0 0 30px;
}
.infoSection img {
display: block;
float: none;
max-width: 80%;
margin: 20px auto 0;
transform: none;
}
}
Existing questions about horizontal scrolling on mobile all seem to involve setting overflow-x to hidden, which doesn't help because I want my content to resize properly. :/
I used this fix for Bootstrap modals on mobile devices as a base for some new code:
bootstrap-responsive.css
.modal {
position: fixed;
top: 3%;
right: 3%;
left: 3%;
bottom:3%;
width: auto;
margin: 0;
}
.modal-body {
height: 60%;
}
bootstrap.css
.modal-body {
max-height: 350px;
padding: 15px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
The problem is I'm having is I get extra space at the bottom of the modal.
How can I remove this space?
I made a fiddle that demonstrates the issue.
Try changing the height of the browser in this fiddle with a width of 480. The modal-footer should stick at the bottom but its not, when I remove the bottom:3% in .modal everything looks fine like this or this but the height of .modal overlaps the height of the screen and its not responsive
You could check to see if the orientation is landscape - and minimize the size of the modal-body accordingly
FIDDLE
#media only screen
and (orientation : landscape) {
.modal-body {
height: 160px;
}
}
Oh and by the way:
In the fiddle I fixed up the rounded corners of the model as well by adding the class:
.modal-footer
{
border-radius: 0 0 4px 4px;
}
I believe your problem is your form inside the Modal.
Put this to your CSS.
.modal form{ margin: 0 !important;}
Remove padding-bottom:
.modal-body {
max-height: 350px;
padding: 15px;
padding-bottom: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
I checked the code if u try commenting the bottom attribute given to the modal, i think this is what u r looking for.
.modal {
position: fixed;
top: 3%;
right: 3%;
left: 3%;
/*bottom:3%;*/ /* if u comment this the issue gets resolved */
width: auto;
margin: 0;
}
Also make change your modal footer css so it takes the same rounded-corners as the modal
.modal-footer
{
border-radius: 0 0 3px 3px;
}