I needed to use a divider to the MUI MenuItem and it adds an extra border to the item where the divider has been added. THe highlighted item on the image is the item where I set the divider= true and the border is visible. How can this be handled so that it doesn't add the border?
THe issue was that when the menu item divider has been set to true, it was adding some margin to the the <li> item. So setting it to zero only when the divider is on fixed the issue.
It is fixed by adding the following check on the <MenuItem>:
<MenuItem
...
divider={divider}
sx={{ ...(divider && { margin: 0 }) }}
>
Related
We currently have a select made in React with ReactSelect that has a fixed 16 options in the table. Currently, when the control is clicked, the menu appears which shows 11 items and has a vertical scroll to scroll down to show the remaining 5 items.
This would be better if all 16 items showed when menu appeared, with no vertical scroll. We have tried to create the following custom style:
menu: (provided) => ({
...provided,
background: '#DDDDDD',
marginTop: '-1px',
zIndex: 10,
height: // what to put here? we've tried "auto", "fit-content", "100%" and none are good...
}),
is there another element in the select (other than menu) that we should be styling, or is there a better way to style the menu such that all options show?
Thanks!
First, I used the most upvoted answer in this post to inspect the ReactSelect menu (which I wasn't able to do previously). I discovered that menuList has a default maxHeight of 300px, which was preventing the menu from growing larger.
This then did the trick for me:
menuList: (provided) => ({
...provided,
maxHeight: null
}),
Is there any Clarity element to wrap the container of clr-datagrid element in html? Please suggest me the solution to wrap the clr-datagrid using clarity element.
In the below instead of "div" element, i want to use clarity element. So that clrDgLoading will work. Here now it is not working as div is not known to clrDgLoading.
<div [clrDgLoading]="loading">
<clr-datagrid *ngIf="some condition which i need">
....................
</clr-datagrid>
</div>
I want loader to work first and then i will add my condition to clr-datagrid whether to show/hide the table or not(depends on the data presence).
I would suggest to use a spinner like the angular material spinner or the ngx-spinner for progress before loading the datagrid.
Example material spinner:
<mat-spinner></mat-spinner>
Example ngx-spinner:
<ngx-spinner
bdOpacity = 0.9bdColor = "#333"size = "medium"color = "#fff"type = "line-spin-clockwise-fade"[fullScreen] = "false"
>
<p style="color: white" > Loading... </p>
DEMO ngx-spinner
Go to https://snack.expo.io/HJV601djf and open login_screen/components/Form.js. As you can see, the textInput has the style
textInput: {
flex:1,
height: 50,
marginBottom: 20
}
You can see that the user icons are not aligned with the text input. If I take marginBottom out, everything goes ok, but with marginBottom: 20 the icons get dealigned. I can probably fix that by making the text input get aligned vertically too, but I'll not know the cause of the problem.
How can marginBottom affect the insides of UserInput if it's supposed to add space only on the outside?
Printscreen if you don't want to wait to load the app:
This is happening because , in your UserInput.js, you are trying to merge the styles for the textInput while the Image / Icon styles are remaining the same, therefore it is misaligned.
The optimum way to solve this would be to add a textInputContainer style to the component and set the margin to it as
TextInput.js
<View style={mergeObjects(this.props.containerStyle ? StyleSheet.flatten(this.props.containerStyle) : {}, StyleSheet.flatten(styles.inputWrapper))}>
Form.js
<UserInput
containerStyle={styles.textInputContainer}
style={styles.textInput}
source={{uri:'http://www.free-icons-download.net/images/user-icon-74490.png'}}
placeholder="e-mail"
autoCapitalize={'none'}
returnKeyType={'done'}
autoCorrect={false}
/>
and the styles
textInputContainer : {
marginBottom: 20
},
Here's the snack for the same
I wanted to add some padding to my TextField component so I applied that to the root 'style' property.
But now the underline isn't staying within that area and is overflowing out to the right by the padding amount. It also seems to ignore any padding left or right I try and apply to it and just goes full 100% width of the container element.
I can fix it's width using the underlineStyle prop, so for now I've just set it to 95%, however this can get a bit ugly as the width gets a lot wider. But I can't for the life of me figure out how to express 'width: '100% - 5px' ' in JSX??
Is this possible? I'm sure I just have some syntax wrong.
Thanks in advance
<TextField
inputStyle={styles.inputStyle}
value={props.messageValue}
name={props.name}
onChange={props.handleFieldChange}
errorText={props.messageError}
floatingLabelText={props.floatingLabelText}
underlineStyle={styles.underlineStyle}
floatingLabelStyle={styles.floatingLabelStyle}
floatingLabelFocusStyle={styles.floatingLabelFocusStyle}
**underlineFocusStyle={styles.underlineFocusStyle}**
style={styles.fieldStyle}
>
{props.children}
</TextField>
underlineFocusStyle: {
borderBottom: 'solid 1px',
borderColor: grey50,
width: '95%'
},
width: 'calc(100% - 5px)' should work.
I want to relocate my bootstrap popover in the left side, i.e. I want to move the whole popover in the left side, while the white arrow would stay in one place.
I would like to have the effect which is on google.com website, when you click blue icon you see popover but its content is relocated while the white arrow is located under the user.
I know that I can use something like this:
.popover {
top:0 !important;
margin-top:10px;
}
Unfortunately, it relocates the whole popover altogether with white arrow.
What I have now (popover is on the right side and there's no place between screen edge and my popover)
What I want to have (small distance between popover and monitor's edge):
“I want to change the position of content of this popover so that this
arrow will be placed further on the left„
When the popover is shown the arrow position is calculated in Tooltip.prototype.replaceArrow based on width/height and placement. You can force a specific position with this CSS :
.popover .arrow {
left: 90px !important; /* or 45% etc */
}
But that will affect all popovers. Popovers is injected and removed to and from the DOM, and there is by default no way to target visible popovers individually. If you want to style the arrow on a specific popover, a workaround is to hook into the shown.bs.popover event, detect which popover that is being shown, and style the arrow for that popover if needed. Example :
.on('shown.bs.popover', function() {
var $popover = $('.popover')[0];
switch ($(this).attr('id')) {
case 'a' : $popover.find('.arrow').css('left', '10px');break;
case 'b' : $popover.find('.arrow').css('left', '40%');break;
case 'c' : $popover.find('.arrow').css('left', '180px');break;
default : break;
}
})
To get this to work, there must be only one popover shown at a time (see fiddle). It can be worked out with multiple visible popovers also, but then we need to add some HTML to the popover content.
see demo -> http://jsfiddle.net/uteatyyz/
As what I have understood so far, you want to achieve the popover to the left of the button.
Please check this Plunker Link
HTML Code:
<div class="pull-right">
<button type="button" mypopover data-placement="left" title="title">Click here</button>
</div>
Angular Code:
var options = {
content: popOverContent,
placement: "bottom",
html: true,
date: scope.date,
trigger: 'focus'
};
I have edited the answer as per the images that you have shown.
If this is not is answer, then please comment below.
Regards D.