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;
}
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 have made a transparent background tabbar on my ionic/angular app. I have the following code in my app.scss
.tabbar {
background: transparent !important;
border: none !important;
}
.tabs-ios .tabbar {
background: transparent !important;
border: none !important;
}
.ion-tabs {
background: transparent !important;
border: none !important;
}
It works fine when I test in the browser, but when I test with ionic view app, there is still a stock tabbar showing on the first page loaded by tabs page. Tabs are transparent on every other page, except the first one that is the "home" page.
Does anyone know why this is? Is this just a bug in the exceptionally unreliable Ionic View app or a problem I should be trying to fix?
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
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 application where i need to hide the default dot indicator on the carousel control, and instead for default indicator i have to replace it with customized images?
To hide the default dot indicator in Ext.carousel.Carousel component, use this,
indicator: false
I guess you can inspect the CSS for the indicator object.
For instance, go to the Kitchen Sink > User Interface > Carousel and inspect one of the dots :
.x-carousel-indicator span {
display: block;
width: .5em;
height: .5em;
-webkit-border-radius: .25em;
border-radius: .25em;
margin: .2em;
}
Then, you just need to override that CSS class