Thanks for any thoughts on the subject.
I'm trying to work with the Material-UI Modal component. As shown in the picture below, there is always a black border on render.
I have tried
removing it with custom useStyles and applying it to Paper, Modal, as well as the inner divs
default CSS, (border:0 etc) with Paper, Modal etc.
The interesting thing is that when I click on the inspect tools, or when I focus the modal, the border disappears and leaves me with the style I desire until I re-render.
I greatly appreciate any suggestions or feedback, I'm new to Material UI and I'm not sure where I'm going wrong.
Thanks!
This borders are added by browser, another one is defined in paper.
const useStyles = makeStyles((theme) => ({
paper: {
position: 'absolute',
width: 400,
backgroundColor: theme.palette.background.paper,
outline: 0, // Disable browser on-focus borders
//border: '2px solid #000', // Remove black border of css
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3),
},
}));
With this changes I have removed them from the sandbox sample.
Related
Minimal Reproducible Example
I have a Select with an Input as a filter. The Input has a framer-motion label, that is animated when you click the filter. The problem is now that the label flies in from outside the page when you open the Select.
I have animated the component by using the layout prop.
pseudo code
const SelectUl = styled(motion.div)<{open: boolean}>`
open ? "display: block" : "display: none";
`;
const Label = styled(motion.div)<{clicked: boolean}>`
clicked ? "padding-top: 0.1em" : "padding-top: 0.5em";
`
const Select () => (
<SelectHead onClick={openSelectUl}
<SelectUl onOpen={clickLabel}>
<Label layout />
I found one workaround where I would use opacity: 0; pointer-events: none instead of display: none, but that doesn't seem to be a good solution...
Currently I am facing an awkward situation:
I want to make the dialogContent's overflow: auto so my modal becomes scrollable if the content exceed the height of the dialog. However, there's a dropdown menu that I'd like it to display normally, but because overflow: auto, I have to not only scroll down the dropdown menu, but also the dialog itself. Can someone help me with this?
const dialogStyle = makeStyles((theme: Theme) =>
createStyles({
root: {
width: '100vw',
},
dialog: {
overflow: 'visible',
},
dialogContent: {
overflow: 'auto',
},
}),
)
For anyone who might have the same issue - I figured the answer myself.
So.. The best way to resolve this, is to add an attribute: <Dialog scroll='body' /> and keep the both dialog and dialogContent's overflow as visible.
I have a little problem with react-select component restyling. If you take a look on their official doc you'll see all the attributes that can be restyled. The problem I have is that around the text I write there's blue borders, and can't remove them. Also around the container.
If I inspect it here's what I get:
It has as id react-select-3-input and can't remove that even if I write directly on chrome inspection let alone doing it in the code.
I am using nextjs as framework and I added a file style.css and import it into _app.tsx. I tried adding this to see what happens:
#react-select-2-input {
background-color: red;
color: red;
font-size: 40;
background-color: red;
}
But nothing happens.
How do you think I can fix this?
If you read the documentation for react-select you can see that the docs steer you towards using emotion more than straight forward CSS.
When implementing this you work should do something like this:
const reactSelectStyles = {
singleValue: (provided, state) => ({
...provided,
color: 'inherit',
}),
menu: (provided, state) => ({
...provided,
'z-index': 9,
}),
multiValue: (provided, state) => ({
...provided,
color: state.isDisabled ? "#000" : "#fff",
}),
};
This will create an object that you then can use for styling
<Select
styles={reactSelectStyles}
/>
Provided in the code above makes sure that the default styling is included (so you can omit it if you want to) and the state can be used to do render different styles depending on the state of the react-select.
I would say that you overall will have a harder time solving this using regular CSS since react-select (using emotion) will generate dynamic CSS classes that does not collide with each other.
I am trying to remove the button outline when a button is clicked in React Bootstrap. I managed to remove the outline by using:
.btn:focus, .btn:active {
box-shadow: none;
}
however this didn't fix the active state, if the button is held down the outline is still visible. I also tried this fix:
.btn:focus,.btn:active:focus,.btn.active:focus,
.btn.focus,.btn:active.focus,.btn.active.focus {
box-shadow: none;
outline: none;
}
The result is the same, the border still appears when the button is held down. Is there anything I can do to remove this?
I recommend not doing this. CSS outlines on hover and focus tend to help with accessibility. See the following post: Quick tip: Never remove CSS outlines
.
Removing outlines in CSS creates issues for people navigating the web with a keyboard. Using the CSS rule :focus { outline: none; } to remove an outline on an object causes the link or control to be focusable, but removes any visible indication of focus for keyboard users. Methods to remove it such as onfocus="blur()" result in keyboard users being unable to interact with the link or control.
The article provides a few options for handling this issue in a more accessibility-friendly way:
Style the outline
Style the element itself
Move outlines for mouse users only, if you truly must do so
The question is how to do accomplish. Attempting to answer the question ...
I did so within the component itself. I wanted the same thing for a button group that mashed the buttons altogether, which I did not like. Adding a style = { boxShadow: 'none' } in the component itself, did the trick for me.
Also, I wanted my grouped button separated (mr-1) and with rounded corners (borderRadius).
<ButtonGroup>
{stuffBtnList.map((value, index) => (
<Button
key={index}
variant='primary'
size='sm'
className='mr-1'
style = {{ borderRadius: '.2rem', boxShadow: 'none' }}
onClick={() => setStuff(value)}
>
{value}
</Button>
))}
<DropdownButton
title='Other'
size='sm'
variant='success'
onSelect={(e) => setStuff(e)}
>
other.map((value, index) => (
<Dropdown.Item key={index} eventKey={value}>
{value}
</Dropdown.Item>
))}
</DropdownButton>
</ButtonGroup>
I have a panel in Sencha Touch defined as so:
var albumContainer = Ext.create('Ext.Panel', {
id: 'album_container',
html: '',
flex: 1,
scrollable: 'vertical',
padding: 0,
});
Everything works, however since adding the scrollable property the panel has had a white background, which I'm trying to get rid off, however just setting the background of #album_container, even as !important, does nothing. Any help? Thanks in advance.
Best regards,
Damir H.
For me, I had to change the background color of the items.
items: [{
style: 'background-color:#F00',
layout: 'hbox', padding: '5',
// some other stuff