I found the first solution to activated a scroll, but it didn't work for me. ul block does not scroll down when switching elements using the down arrow on the keyboard.
my version react-autosuggest is "^10.1.0"
.react-autosuggest__suggestions-list {
margin: 0;
padding: 0;
max-height: 200px;
overflow-y: auto;
}
https://codesandbox.io/s/react-autosuggest-forked-4519do?file=/src/styles.css
I solved this problem by replacing the .react-autosuggest__suggestions-list class to #react-autowhatever-1
I make a responsive web page where at max width of 768px (via media query) the div inside the main container suppose to change to inline-block so that the page would scroll horizontally to the div's id when user click on link. The page is set up with overflow: hidden, so it navigate using id/anchor alone.
The problem is, when I did a preview in mobile, the container just spread out and I can totally swipe the page. Even the menu button that suppose to be in the center of the view port went to the center of the container. And leaving a huge white space below it. It did good however in desktop browser. So I presume it has everything to do with the nowrap function.
It worked in Firefox both mobile and desktop. It worked in I.E desktop. It did not worked in Chrome mobile but seems to be working in desktop. And failed in Safari mobile, haven't tested yet in desktop.
I tried to remove white-space: nowrap function only to find out the div did not stacks inline-block like it suppose to. I tried specified container's width and min-width with no luck. I tried float: left, position values and a bunch of things i don't recall them all. Nothing's change.
HTML
<div id="container">
<div id="company" class="company">
<iframe src="main.html">
</iframe>
</div>
<div id="content" class="content">
<iframe src="content.html">
</iframe>
</div>
<div id="system" class="system">
<iframe src="system.html">
</iframe>
</div>
</div>
css
body{
overflow: hidden;
}
#container {
height: 100vh !important;
min-height: 100vh !important;
}
#container .company, #container .content, #container .system {
display: block;
height: 100vh !important;
min-height: 100vh !important;
}
#media screen and (max-width:768px) {
#container {
display: block;
white-space: nowrap;
}
#container .company, #container .content, #container .system {
display: inline-block;
}
}
iframe {
width: 100vw !important;
min-width: 100vw !important;
height: 100vh !important;
min-height: 100vh !important;
border: none;
}
What I expected (Chrome desktop)
https://kamalmasrun.files.wordpress.com/2019/01/desktop.jpg
But only comes to this in mobile
https://kamalmasrun.files.wordpress.com/2019/01/screenshot_20190122-120510.png
Your help is much appreciated and I first address a thank you to all for the help =).
Basically, you have a few problems here:
Setting overflow: hidden won't prevent browser on mobile from scrolling (on Firefox it might, but on Chrome or iOS Safari it will not). Blocking scrolling is a hard thing to do on mobile to be honest, and it always is a little bit hacky, so I would not go that way.
To achieve scrolling (or jumping) using links with #content etc, body has to be expanded and browser has to see where this element is. Expanding body will result in ability for user to scroll left/right, which is hard to block as I mentioned before. You have to scroll #container to show new element. You can do this using javascript.
Also, don't forget to add overflow: hidden to #container (this will work on mobile).
If something is still unclear, feel free to ask in comments below this answer :)
The idea of algorithm to achieve your goal:
Listen to hashchange event
Read current hash from window.location
Find element with given hash using document.querySelector
Read element's position inside container
Set scrollLeft property of container to be equal element's position
Some useful links to get you started:
https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange
https://developer.mozilla.org/en-US/docs/Web/API/Window/location
https://developer.mozilla.org/pl/docs/Web/API/Document/querySelector
https://developer.mozilla.org/pl/docs/Web/API/Element/getBoundingClientRect
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
And updated CSS:
body {
overflow: hidden;
margin: 0;
}
#button {
position: fixed;
vertical-align: center;
}
#button .btn1,
.btn2,
.btn3 {
padding: 10px;
display: inline-block;
}
#container .company,
.content,
.system {
display: block;
height: 100vh;
min-height: 100vh;
width: 100vw;
}
#media screen and (max-width:768px) {
#container {
display: flex;
flex-flow: row nowrap;
}
#container .company,
.content,
.system {
display: block;
}
}
iframe {
border: none;
height: 100vh;
min-height: 100vh;
width: 100vw;
}
It's possible that setting min/max width to #container will do the trick.
#container {
min-width: 100vw;
max-width: 100vw;
}
Also, I'd suggest using flex here, as it would suit well and is more modern.
My mobile menu tray is appearing behind my content-
http://kmgp.preview.learningpool.com/
(in tablet view)
The menu tray is appearing at the top and the bottom of the page
The website is an e-learning site on moodle 2.5.
Below is the code from the page and menu tray:
.mobile #page {
overflow: hidden;
}
.mobile #page-header .meta {
background: #F7F7F7;
height: 60px;
overflow: visible !important;
position: fixed;
right: 0;
top: 0;
width: 100%;
z-index: 200;
}
.mobile #page-header .banner {
z-index: 10000;
}
i had hoped that reducing the z-index on the menu tray and adding a higher z-index to the banner would allow the banner to sit tight to the top of the page and hide the content you can see when scrolling.
This is the menu when open, when a user scrolls to go down the page, the menu will appear for about 60px at the top and bottom of the page:
I have four buttons which are right-aligned on the navigation bar and title in center. The title text is bigger and it's overlapping with right buttons. How can I set title width so that it shows the three ellipses when text is overflowing?
You can use CSS like the example below:
#wrapperDiv {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
I arrange a fiddle: https://jsfiddle.net/svpbe351/
I am using wordpress responsive theme ,but one slide isnt responsive ,Text is overlapping the slide.I Tried this code.wpi_slide_image {
width: 100%
max-width: 675px;
But its not working
my Website
Slide is on the home page
Here is the screenshot of slide -http://postimg.org/image/p7oafp57d/
Thank You !
You have to override the following css
.wpi_slide .wpi_slide_image {
background-position:50% 50%;
background-size:cover;
height:100%;
left:0;
position:absolute;
top:0;
width:100%;
}
set the width to 49%!important; and the height to auto!important;
remember to put in the !important after the attributes. Its important - lol.
also override this
.wpi_slide_607 .wpi_slide_image {
-webkit-filter:blur(0px);
background-image:url(cardmart.tk/wp-content/uploads/2015/07/…);
left:0;
opacity:1;
top:0; }
add in z-index:1!important;
also in .wpi_slide_607 and 608 you have to set the width to 49% and height to auto. do this last. step by step.