I need to show the checkboxes on the right side of each tree node. is possible to change the node label and checkbox distribution?
I just got it works with custom styles:
.ui-treenode-content {
display: flex;
flex-direction: row-reverse;
}
.ui-treenode-content .ui-treenode-label {
flex: 1 ;
}
.ui-treenode-content .ui-chkbox {
align-self: flex-end;
}
Related
Hoping someone can assist. I am using the MobileStepper component, specifically:
https://mui.com/api/mobile-stepper/
and attempting to use a different background color for this stepper. Looking at the Dev Tools for this component, I found the following:
.MuiMobileStepper-root {
display: flex;
padding: 8px;
background: #fafafa;
align-items: center;
flex-direction: row;
justify-content: space-between;
}
I actually just want to change the background value to:
.MuiMobileStepper-root {
background: #dadada;
}
Unsure how to change this within my React component.
Not sure if it's an overrides/root style change?
This worked for me
<MobileStepper sx={{ bgcolor: 'transparent' }}/>
This problem is costing my sanity.
I want to use the React Fluent UI Carousel component with thumbnails and place it in the middle of my container, everything works fine till I add more than 8 slides. The carousel moves to the left side of the screen and eventually disappears from the viewport.
I am using the default code snippet from Fluent UI IS AVAILABLE HEREFluent ui thumbnail carousel
enter image description here
I have solved the problem, just overwrite the following properties:
.ln {
width: 600px;
}
.ui-carousel__navigation {
margin-top: -55px !important;
position: absolute;
display: flex;
flex-flow: wrap;
justify-content: space-between;
width: 1000px;
margin-left: -200px;
}
.nb {
transform:none !important;
}
.ol {
transform: none !important;
}
.nc {
transform: none !important;
}
I am using react-select dropdown component in my react application. i found one weird issue that when user start typing for searching an item in react-select dropdown, search textbox gets stretch and its not a fixed with dropdown list.
Please see below image.
How can i fix the search textbox width to react-select width?
Just set
autosize={false}
on the component.
I had similar problem. I inspected browser and found out that if I set width to 82%, my problem will be solved. So I added that inside "Select" tag and it works
<Select
value={this.state.passwordExpire}
onChange={this.updatepasswordExpire.bind(this)}
options={optionsDays}
style={{width: '82%'}}
/>
const customStyles={
// control represent the select component
control: (provided)=>({
...provided,
width:'100px'
})
}
<Select
options={options}
styles={customStyles}
></Select>
This method is stated in react-select documentation. You can adjust select width as per your wish.
You can try with this css.
.Select-input {
position: absolute !important;
width: calc(~'100% - 0px');
}
.Select-value-label {
display: none !important;
}
.Select-value {
position: relative !important;
}
.Select-menu-outer {
width: auto;
min-width: 100%;
text-align: left;
}
.Select-option {
white-space: nowrap;
}
.Select-control {
min-width: 100%;
width: auto;
text-align: left;
}
.Select-control {
table-layout: fixed;
}
.Select-input {
overflow: hidden;
max-width: 100%;
}
Here is the Solution..
.Select-input > input {
width: 100% !important;
}
.Select--multi .Select-input {
display: block !important;
}
.Select--multi .Select-multi-value-wrapper {
display: block !important;
}
This is the proper solution in this case. It's working fine.
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;
}
The default position is over the fields, but I want it right from it.
I tried to hide the labels and use <Col>s to show text besides of the inputs, but newforms crashes when I add normal text into <RenderForm>
we've been able to style them directly with css (less) like so:
#id_field {
display: flex;
text-align: center;
margin-bottom: .75em;
li {
flex: 100%;
}
label {
display: block;
input {
display: inline-block;
}
span {
display: block;
}
}
}
when you inspect them you can get their "id" and target them in this way.