Develop Reference

Material UI React — Select text wrap for long strings in menu (mobile/desktop)?

I have a few long strings in an MUI Select component. Is there any way to add a text-wrap or something similar to make sure the width doesn't exceed and doesn't cut off in mobile.
Desktop:
Mobile:
<FormControl sx={{ m: 1, minWidth: '100%', marginLeft: 0, padding: 0 }}>
<Select
value={prompt}
onChange={handleChange}
displayEmpty
inputProps={{ 'aria-label': 'Without label' }}
sx={{'bgcolor': 'rgba(139, 139, 139, 0.3)', color: 'white', border: '1px solid rgba(255, 255, 255, 0.4)', minWidth: '100%', marginLeft: 0, padding: 0}}
>
{prompts.map((prompt, i) => <MenuItem value={i}>{prompt}</MenuItem>)}
</Select>
prompt is a string[].
How can I style the select menu? Is there any way to make sure the dropdown width doesn't exceed the Select width?

It should be possible to get multi-line / wrapping menu items when setting white-space to normal
in CSS:
white-space: normal;
or as inline style in the Mui component (or via some sx prop I guess)
<MenuItem style={{whiteSpace: 'normal'}} value={i}>{prompt}</MenuItem>

How to set border-radius to ant design Select component

I am using ant design and I want to change border-radius of Select component but it is not working. The code is below. And i tried to classname method but it doesn't work.
import React from 'react'
import { Select } from 'antd'
const { Option } = Select;
const Dropdown = ({placeholder ,...restProps}) => {
return (
<Select
style={style}
{...restProps}
placeholder={placeholder}
>
</Select>
)
}
const style = {
width: 450,
borderRadius: '10px',
margin:3
}
export default Dropdown;

If you inspect the element you could find that the style is going to the div with classname ant-select. But the border is set in the inner div element with classname ant-select-selector.
Ant Design doesnt give any prop to override the style for it, but you can override by using CSS.
you can wrap with a custom div and provide CSS to override the style set by ant.
Example,
<div className="my-select-container">
<Select
style={style}
{...restProps}
placeholder={placeholder}
>
</Select>
</div>
and in CSS file,
.my-select-container .ant-select .ant-select-selector {
border-radius:20px;
}

A bit hacky but works quite nice.
Set bordered={false} in the select component (will remove the default border)
Apply the following style to the select field:
.borderedSelect {
border-radius: 10px !important;
background-color: white;
border: 1px solid darkgray;
&:hover {
border-color: #356796 !important;
border-top-color: rgb(53, 103, 150);
border-right-color: rgb(53, 103, 150);
border-bottom-color: rgb(53, 103, 150);
border-left-color: rgb(53, 103, 150);
}
}

Trouble Styling HTML Input in Next.js

I am having trouble styling html form elements in Next.js. I cannot get the CSS to work using a simple class name from the imported CSS stylesheet, but I have had success with inline styling using
style={{
width: "300px",
height: "50px",
paddingLeft: "10px",
paddingTop: "5px",
border: "none",
}}
The problem is, when I select the form it adds an unwanted inner border. I need to add an input:selected {border: "none"} styling. I read this is a limitation with inline styling and I would have to use a CSS-in-JS library. It just so happens Next.js has a built in library that does this. Unfortunately, using the library is not able to override and style my input. I have tested and have had success on other elements with this library, however, the input element is not working. Here is what I have:
<form className="subscribeInput" style={{ paddingBottom: "100px" }}>
<input
style={{}}
type="text"
id="email"
name="email"
placeholder=" Email Address"
/>
<style jsx>{`
subscribeInput input[type="text"] {
width: "300px";
height: "50px";
padding-left: "10px";
padding-top: "5px";
border: "none";
}
`}</style>
<button
style={{
width: "100px",
height: "50px",
borderColor: "white",
paddingLeft: "10px",
paddingTop: "5px",
backgroundColor: "black",
marginLeft: "20px",
color: "white",
}}
type="submit"
>
{" "}
Signup{" "}
</button>
</form>
Whereas I have tried a few variations of the selector:
subscribeInput {}
subscribeInput input {}
input {}
input[type="text"]
Lastly, in case if this is related, my border box on my submit button will not go fully "white" as instructed. Instead it is white on the top and left borders and light gray on the right and bottom borders. I have included a screenshot with the issues presented. It has the added inline styling with the inner border that presents itself after selected as well as the gray border issue.

In your global css you can add the code below to remove borders on input or textarea focus:
textarea:focus, input:focus{
outline: none;
}

You can make it's color transparent by adding focus:ring-transparent to className.

Cannot Get Element Behind Another With Z-Index and Declaring Position

I have a div I'm using as header/nav menu. This div has a drop shadow. There is a dropdown menu when you hover over menu item "Configuration". I want this dropdown menu to appear behind the drop shadow. I am using declared positions and z-index for all elements. The dropdown is z-index 99 and header div is index 100. The dropdown will not appear behind the header div.
I am using Gatsby, React, and Radium. The syntax for the styling below is because I'm using a "styles" object in Javascript to apply the styles.
headerDiv: {
background: 'white',
marginBottom: '1.45rem',
paddingLeft: '10px',
paddingRight: '10px',
boxShadow: '0px 6px 6px rgba(0,0,0,0.2)',
zIndex: '100',
position: 'relative'
},
dropdownMenu: {
opacity: '1',
position: 'absolute',
top: '95%',
left: '0',
zIndex: '99',
padding: '20px 100px 0px 20px',
whiteSpace: 'nowrap',
float: 'left',
minWidth: '160px',
margin: '2px 0 0',
fontSize: '12px',
textAlign: 'left',
listStyle: 'none',
backgroundColor: 'white',
backgroundClip: 'padding-box',
boxShadow: '0 6px 12px rgba(0,0,0,0.175)'
}

I solved this with a workaround. I turned off z-index on all elements. Then I created an empty div and gave it the drop shadow. I gave this div a z-index of 99 and the header navigation menu a z-index of 99 (so it appears behind the empty div). Now it works as intended.

Pseudo element not showing in React on paragraph tag despite using display block

This pseudo element ::after won't show up in my browser at all. I am using React.js and Material UI makeStyles.
This is the code:
modalTitle: {
borderBottom: '2px solid red',
display: 'block',
margin: '10px 15px',
padding: '0',
width: '100px',
'&::after': {
background: 'green',
content: '',
display: 'block',
height: '2px',
width: '2px',
},
},
Note that the code below modalTitle shows up and works, only the pseudo element doesn't go through. Any thoughts?

This is a tricky one. When you use makeStyles, it accepts a styles object (or a function that returns an object). This object has the class names as keys and objects containing attribute-value pairs as values. These values are strings (like "block", "green", or "10px 15px").
The ::before and ::after pseudo-elements in CSS allows us to insert content onto the page. Every pseudo-element must have a CSS content property, without it the default value of content is set to normal/none, and no content is displayed.
The problem with your code is that you add content: '' in your object, but you need to pass an empty string as the CSS value, like this: content: '""'.
Similarly, if you want to insert some text using content you can't simply add the string, you need to use quotes around the text and pass it as a string:
// ❌ this one doesn't work
{
content: 'some text',
}
// ✅ this one does work
{
content: '"some text"',
}
So, you can use the following and it will add the element:
const useStyles = makeStyles({
modalTitle: {
borderBottom: '2px solid red',
display: 'block',
margin: '10px 15px',
padding: '0',
width: '100px',
'&::after': {
background: 'green',
content: '""',
display: 'block',
height: '2px',
width: '2px',
},
},
});