Trouble Styling HTML Input in Next.js - javascript

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.

Related

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>

Unable to apply media specific styling to the error page that appears when Javascript is Disabled

I have a website and I want to add a custom error page when javascript is disabled. I added a component inside inside _document.js
<body>
<noscript>
<ErrorPage />
</noscript>
</body>
Then that page is defined like this
function ErrorPage() {
const requiredMsg = 'Javascript Required'
const errorText = 'We’re sorry, but the page does not work without JavaScript enabled. Please enable JavaScript on your browser.'
return (
<div style={{ width: '100%', textAlign: 'center' }} >
<img style={{ width: '100%' }} src={ 'img.svg' } />
<Typography component='h1' style={{ fontFamily: 'lato, sans-serif', color: '#1074C3' }}>{requiredMsg}</Typography>
</div>
)
}
export default ErrorPage
It looks good, but I need to add some media specific styling and elements to the page.
Like it needs to take up entire space in mobile, while in desktop, it should just occupy the middle 200 px height, and rest should have a faded background.
How is that possible? Can this be achieved?
I was able to achieve this by placing the styles within inside _document
<Html>
<noscript>
<style>{`
div.errorPage {
background-color: rgba(0,0,0,0.3);
}
/* This is mobile */
#media (max-width:600px) {
div.errorPage {
background-color: none;
width: 100%;
text-align: center;
height: auto;
}
}
`}</style>
</noscript>

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.

change color of button text with makeStyles

Previously, I was styling my button like this:
style={{
background: '#6c74cc',
borderRadius: 3,
border: 0,
color: 'white',
height: 48,
padding: '0 30px',
}}>
This worked well. The text color was white while the background color was the color of the button. However, now I am using this:
className={classes.button}>
export const useStyles = makeStyles((theme: Theme) =>
createStyles({
button: {
background: '#6c74cc',
borderRadius: 3,
border: 0,
color: 'white',
height: 48,
padding: '0 30px',
//fontStyle: 'red',
},
}),
);
While the background color is correct, the text color is not white (when the button is disabled). When the button is not disabled then its fine. Otherwise, it's not. How can I fix this?
You have set color value as 'red', try changing it to white. It should work.
It'd be helpful to see a codesandbox example, but I suspect that the material button has a color attribute set for disabled elements and thats why the text color is wrong.
Material-ui uses makestyles which uses jss to create style sheets - so if you create a pseudo selector for its disabled state e.g.
export const useStyles = makeStyles((theme: Theme) =>
createStyles({
button: {
background: '#6c74cc',
borderRadius: 3,
border: 0,
height: 48,
padding: '0 30px',
'&:disabled': {
color: 'white',
}
},
}),
);
You should find that the correct color is applied.
If not reply with a minimal code sandbox and I'll be happy to take a look :)

React/css Flexbox with stylable rows

i have a specific use case, and i am not sure what component or technology i can use for that.
I have a set of items in a wrapped flexbox:
xxx|xxxxxxxx|xx|xxxxxxxxx|
x|xxxxxx|xxxxxxxxxxxxxxx|xxx|
xxxxx|xxxxxxxxxx|XXXX|xxxx
xxxx|xxxxx|xxxxxxxxx
The items have different widths, but fixed heights. And their should be wrapped, so that there is no horizontal overflow. And there is alway one "active" item, which has a diffent style.
For now flexbox works perfecly fine for me. Here's a demo:
.wpr {
width: 150px;
display:flex;
flex-flow: row wrap;
border: 1px solid green;
}
span {
position: relative;
display: inline-block;
padding: 0 2px;
}
span:after {
content: '';
position: absolute;
right: 0;
width: 1px;
height: 16px;
background-color: #111;
}
.special {
color: green;
}
<div class="wpr">
<span>xxx</span>
<span>xxxxxx</span>
<span>xxx</span>
<span>xxxxx</span>
<span>xxx</span>
<span>xxxxx</span>
<span class="special">XXX</span>
<span>xx</span>
<span>xxxxxxxx</span>
<span>xx</span>
</div>
But now i want to also highlight the complete row of the active item. The problem is, that i dont what items are in which row, because flexbox ist handling that.
For example:
xxx|xxxxxxxx|xx|xxxxxxxxx|
x|xxxxxx|xxxxxxxxxxxxxxx|xxx|
xxxxx|xxxxxxxxxx|XXXX|xxxx
xxxx|xxxxx|xxxxxxxxx
Just to see also in which row the active item is.
I am using React and Flexbox. But im not sure if thats possible with flexbox.
I could render every single item into a hidden DOM element to get its size and calculate the row-number by myself, but this is very hacky....
Do you know a trick to do that? Or maybe a different layout system, which is able to do that?
Edit: Examplecode:
<div style={{ display: "flex", flexWrap: "wrap", maxWidth: "960px" }}>
{this.state.myItems.map((w, i) => (
<div className={`${i !== this.state.activeIndex ? "playerword" : "playerword-active"}`} style={{ marginTop: "15px", fontSize: "1.3em", cursor: "pointer" }}>
<div className="olBack" style={{ padding: "3px" }}>
{w[0]}
</div>
</div>
))}
</div>
-Alexander

Categories

Resources