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:
Related
click one of the card
the card expands and pops up
tried to scroll but only scrolling the background page while I wanted to scroll down to view more text
I already tried overflow:hidden which doesn't scroll ( and the scroll bar is ugly)
How can I solve this ? thank you very much !
https://codesandbox.io/s/framer-motion-animatesharedlayout-app-store-demo-i1kct?from-embed
It looks like a few things are preventing the scroll:
height: auto sizes the container to fit the content.
overflow: hidden instead of scroll.
pointer-events: none prevents the element from getting the scroll events.
Changing this block in styles.css:
.open .card-content {
height: auto;
max-width: 700px;
overflow: hidden;
pointer-events: none;
}
to this:
.open .card-content {
max-width: 700px;
overflow-y: scroll;
}
seems to work.
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.
I am very new to saleforce and playing around to get to know how things work.
How do i remove that home button there and can i move that cases and products menu items to right side?
Can you please help check
You can use a CSS hack to hide the Home icon and option
Click on the Pen icon in the builder and then the CSS button next to the word Branding at the top.
.navigationMenuNode:first-child {
display: none;
visibility: hidden;
}
In the latest version of Salesforce/Experience Builder the following can be used to hide just the home tab or the entire navigation menu which is what I needed.
Home tab
.themeNavContainer:first-child {
visibility: hidden;
display: none;
}
Entire nav menu
nav {
display: none;
visibility: hidden;
}
GO to builder > Theme > Top Right corner > Edit CSS
Here it is source image
.forceCommunityGlobalNavigation .slds-list__item a, .forceCommunityGlobalNavigation .slds-list__item button {
display: none;
}
What I've used and did the trick:
.forceCommunityThemeNav .mainNavItem:first-child {
visibility: hidden;
display: none;
}
All:
Im pretty new to React, I wonder how can I implement a Header Menu + Side Menu component layout in React?
It should be something like:
Click the orange header menu item, according side menu(the dark grey part on the left, there is no the dark grey part shown initial, only show when click according item in the header menu) will show up, click same item again, it will slide left to toggle. And the content area will auto scale.
Any help about how to implement this will be appreciated, it does not have to be a total solution, somethign like how to click and side menu toggle slide out or how scale the right side when left side menu slide out, or something like that.
Thanks
Theres too much in this question to give a full answer. So I'm just going to give a simple layout design with no code. You should be able to write the code yourself with this setup as it should be very straight forward.
you need a main component that renders the Header, Sidebar and Content of the page.
the header main component needs to handle an open or closed state based on the header clicks. so header item onClick(this.props.onClick). the props.onClick is passed to the header component and the main component needs to capture that and set a state.
this.setState({sidebarOpen: !this.state.sidebarOpen}); this will sumulate a toggle effect on the state for the click. now when you render just set a className based on that state.
let sidebarClassname = this.state.sidebarOpen ? 'sidebar open' : 'sidebar';
let contentClassname = this.state.sidebarOpen ? 'content open' : 'content';
and pass that through on the render to your component.
<Sidebar className={sidebarClassname}
<Content className={contentClassname}
from here you should have the components rendering and the sidebar should be getting an active class when you click on the header. then you just need to style it
the layout itself should be fairly simple.
css
.header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60px;
}
.sidebar {
position: absolute;
top: 60px;
left: -300px;
height: 100%;
width: 300px;
transition: left .3s ease-in-out;
}
.content {
position: absolute;
top: 60px;
left: 0;
right: 0;
height: 100%;
transition: left .3s ease-in-out;
}
that should be pretty straight forward. you need to position the sidebar out of the page and the content needs to fill the page
the cool part here is when you get an active class (i.e open) you should be able to adjust the left position to create the slide in effect (because we added the css transition on the left property.
.sidebar.open {
left: 0;
}
.content.open {
left: 300px;
}
Sample Fiddle
I'm building a SPA with Ionic and Angular. My map shows up just fine when it takes up the full screen (i.e., ion header + map only) but in one of my screens, I'm trying to show the ion header + a form + the map so that the map would only occupy ~50% (~325px) of the screen. My issue is that, for this screen, the map still takes on the full screen height (~625px) so that ~50% of the map exists off-screen.
My current structure looks as follows:
ionic nav bar
formContainer div (height determined by contents) wraps the form
mapContainer div (height set to fill the rest of the visible screen via flex box) wraps the map
I think that my issue is caused by this css styling:
.angular-google-map {
height: 100%;
}
.angular-google-map-container {
position: absolute;
height: 100%;
width: 100%;
}
My hypothesis is that the height gets set to 100% (~625px) before the mapContainer div can determine its height (~325px). Has anyone had any luck wrapping a map so that its height only takes up the visible div?
Try to set top and left. Also remember that ionic adds a new scroll class to your content
.map-container .scroll{
height: 100%;
}
.angular-google-map-container {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}