I am trying to align the items in a div (that is within an MUI Select styled component):
const SelectStyle = styled(Select)(({ theme }) => ({
width: WIDTH,
border: `1px solid ${theme.palette.grey[400]}`,
borderRadius: 3,
fontSize: '1.2rem',
'&:hover': {
backgroundColor: theme.palette.grey[300],
border: `1px solid ${theme.palette.grey[500]}`,
},
'&:focus': {
backgroundColor: theme.palette.grey[700],
border: `1px solid ${theme.palette.grey[700]}`,
},
'& .MuiSelect-select': {
paddingTop: 5,
paddingBottom: 5,
fontSize: '1.2rem',
alignItems: 'center',
display: 'inline-flex'
},
}));
I can see that the effect has been applied to the parent div:
However, I still see that the text and the icon don't look center aligned ("Text" looks higher than the icon):
Is there a reason for this? And how do I make it more center aligned?
Related
I have a project that builds a Dashboard using Material UI, the dashboard can have plots and different content inside a Material UI Card.
When there is enough y-space the content works just fine like this:
But when the vertical space is not enough the content overflow kinda breaks and places some items on the right instead of overflowing vertically.
The idea is that the plot will use any available space and the text will use just what it needs.
All the code for this is here: https://github.com/danielfrg/jupyter-flex/blob/main/js/src/Card/index.js
But I will put some pieces here to help.
This is the Card:
<Grid
item
container
className={`card ${cardsClsName} ${customClsNames}`}
direction="column"
alignItems="stretch"
xs={size}
>
{header ? <Grid item>{header}</Grid> : null}
<Grid
item
component={MaterialCard}
className={`${boxClsName} ${
verticalLayout == "scroll" ? classes.boxVLScroll : ""
}`}
variant="outlined"
xs
>
<Grid
item
container
direction="column"
component={CardContent}
className={cardContentClsName}
xs
>
{bodyComponents}
</Grid>
</Grid>
{footerComponents.length > 0 ? (
<Grid
item
container
component={CardActions}
className={classes.cardFooter}
>
{footerComponents}
</Grid>
) : null}
</Grid>
And the Material Styles that I apply to these:
const styles = (theme) => ({
card: {},
cardInColumn: {},
cardInRow: {},
cardInTabs: {
maxWidth: "100%",
height: "100%",
},
cardInSidebar: {
maxWidth: "100%",
height: "100%",
padding: 8,
},
cardHeader: {
padding: "6px 8px",
},
cardTitle: {
padding: "5px 0",
fontSize: "1.05em",
fontWeight: 600,
},
space: {
flexGrow: 1,
},
box: {},
boxVLScroll: {
flexBasis: "auto",
},
boxInSidebar: {
flexGrow: 1,
border: "none",
},
cardContent: {
maxWidth: "100%",
minHeight: "100%",
height: "100%",
overflow: "auto",
},
cardContentInSidebar: {
height: "100%",
display: "flex",
flex: "1 1 auto",
flexDirection: "column",
padding: "0 8px",
},
cardFooter: {
padding: "0 8px 8px",
},
empty: {
margin: "auto",
padding: theme.spacing(2),
textAlign: "center",
color: theme.palette.text.secondary,
},
});
I appreciate any pointers I am not the best when it comes to CSS.
Thanks!
I'm working on an image upload component, and the design breaks when I put iphone 5 / se
But my css are breaking out, I want to force the design to respect the limits, iphone 6 and others are good, but when I change to the iphone 5, well, the print says everything.
This is the CSS code:
import { fontTitle, fontSizeInput, gradient, shadow, primaryColor, grayColor3, grayColor4 } from './theme'
export const
dropzone = {
display: 'grid',
margin: 'auto',
alignContent: 'center',
justifyItems: 'center',
gridRowGap: '15px',
border: `2px dashed ${grayColor3}`,
borderRadius: '6px',
color: primaryColor,
textAlign: 'center',
},
instructions = {
marginTop: '20px'
},
button = {
display: 'block', // necessary for link version
WebkitAppearance: 'none',
WebkitTapHighlightColor: 'rgba(0,0,0,0)',
MozAppearance: 'none',
outline: 'none',
cursor: 'pointer',
width: '90%',
padding: '10px 0px',
border: 'none',
borderRadius: '20px',
fontFamily: fontTitle,
fontSize: fontSizeInput,
color: '#FFF',
background: gradient,
boxShadow: `${shadow}`
},
btnDisabled = {
...button,
cursor: 'initial',
color: primaryColor,
background: 'none',
backgroundColor: grayColor4,
boxShadow: 'none'
},
input = {
opacity: 0
},
styleTag = `
.dropzone {
height: 100%;
height: -webkit-fill-available;
height: -moz-available;
}
`
This is the print of how it looks:
I am using react-select and have generated few dropdowns. However, when I click on the top div, its pushing the bottom one below. I am using flex to display them inline. Could someone please help with my below issues. Really appreciate your help!
Opening/closing a div should not affect the other div. The expanded dropdown should overlay the botton div
Selecting an option from one drop down is selecting from the rest as well
Dropdowns are not getting clicked at times
I am very new to CSS/React. Please help me. Below is the code:
const customStyles = {
control: (provided, state)=> ({
...provided,
width: 210,
position: 'relative',
top: 40,
// height: 25,
// minHeight: 10,
// overflow:'hidden'
}),
menu: (provided, state) => ({
...provided,
width: 210,
position: 'relative',
top: 40
}),
menulist: (provided, state) => ({
...provided,
width: 210,
}),
option: (provided, state) => ({
...provided,
width: 210,
height: 24,
minHeight: 15,
paddingTop:0,
fontSize: '0.8em',
}),
placeholder: (provided, state) => ({
...provided,
fontSize: '0.8em',
color: colourOptions[1].color,
fontWeight: 400,
// position: 'relative',
// top: 2,
overflow:'hidden'
}),
multiValue: (styles, { data }) => {
const color = colourOptions[0].color;
return {
...styles,
backgroundColor: colourOptions[0].color
};
},
multiValueLabel: (styles, { data }) => ({
...styles,
color: 'white',
height: 18,
minHeight: 15,
fontSize:12,
paddingTop:0
}),
multiValueRemove: (styles, { data }) => ({
...styles,
color: colourOptions[1].color,
':hover': {
backgroundColor: colourOptions[0].color,
color: 'white',
},
}),
dropdownIndicator : (styles, { data }) => ({
...styles,
color: colourOptions[1].color,
size:6,
':hover': {
color: colourOptions[0].color,
},
}),
};
class DefectsContainer extends Component {
state = {
teams: [{ value: 'a', label: 'Alpha' },
{ value: 'b', label: 'Beta' },
{ value: 'c', label: 'Gamma' }],
selectedOption:null
};
handleChange = selectedOption => {
this.setState(
{ selectedOption },
() => console.log(`Option selected:`, this.state.selectedOption)
);
};
render() {
const { selectedOption } = this.state;
return (
<div className="defect-dashboard-main-div">
<div className="defect-dashboard-container">
<div className="filterContainer">
<div className="filterChildDiv">
<label className="filterHeader">Project</label>
<Select className="select-teams" closeMenuOnSelect={false} isMulti options={this.state.teams}
autosize={false} value={selectedOption} onChange={this.handleChange} styles={customStyles}
placeholder="Select Project(s)..." theme={theme => ({
...theme,
borderRadius: 3,
borderColor: colourOptions[0].color,
colors: {
...theme.colors,
primary25: 'hotpink'
}
})}
/>
</div>
<div className="filterChildDiv">
<label className="filterHeader">Category</label>
<Select className="select-teams" closeMenuOnSelect={false} isMulti options={this.state.teams}
autosize={false} value={selectedOption} onChange={this.handleChange} styles={customStyles}
placeholder="Select Category..." theme={theme => ({
...theme,
borderRadius: 3,
borderColor: colourOptions[0].color,
colors: {
...theme.colors,
primary25: 'hotpink'
}
})}
/>
</div>
....
My css file:
.filterContainer{
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
}
.filterChildDiv{
flex: 1;
/* float: left; */
margin-right: 20px;
}
.defect-dashboard-table-env-main{
width:1400px!important;
height: 1050px!important;
position: absolute;
top:40px;
left:120px;
}
By default, the select menu is styled with absolute position, which allows it to overlay other elements by removing the element from the document flow. In your custom styles, you set menu position to relative, so the other relatively positioned elements move when the menu is opened and inserted into the document flow. Removing position: relative from the object returned by your customStyles.menu function will fix the issue.
The dropdown menu has css position: absolute, so it's bound to the parent container. As a result the dropdown menu changes the height of the parent container which is problematic in some cases, e.g. if the parent container is some kind modal dialog.
In those cases the dropdown menu should mimic the original behavior of selects where it overlaps other elements on the page. In order to achieve this behavior the dropdown menu must have position:fixed and the positioning (top, left, right) must be handled manually. It has to be attached to the position of the select control and the position must be manually change when scrolling the viewport.
const selectStyles = {
valueContainer: () => ({
padding: 10,
display: "flex",
alignItems: "center"
}),
menu: () => ({
zIndex: 50,
position: "fixed",
backgroundColor: "#fff"
}),
}
<Select
styles={selectStyles}
//...
/>
const SearchBar = (text, onChange) => {
return (
<div>
<div style={{flexWrap: "wrap", background: 'red', border: "1px solid", borderRadius: 10}}>
<Search style={{background: 'blue', verticalAlign: 'bottom'}}/>
<input style={{background: 'blue', verticalAlign: 'bottom'}}
text={text} onChange={onChange}/>
</div>
</div>
);
};
export default SearchBar;
Here is my search bar code.
The result is
but, I want it to appear like this.
How can I get the result?
In your Search component make the width to be 100%.
<Search style={{background: 'blue', verticalAlign: 'bottom', width:'100%'}}/>
First import FaSearch then replace your code with below mentioned.
import { FaSearch } from "react-icons/fa";
const App =(text, onChange)=> {
return (
<>
<div style={styles.mainStyle}>
<Search />
<input style={styles.inputStyle} text={"text"} onChange={null} />
</div>
</>
);
}
const Search = () => <FaSearch style={styles.search} />;
const styles = {
mainStyle: {
display: "flex",
flexWrap: "wrap",
borderRadius: 10,
alignItems: "center",
border: "1px solid",
overflow: "hidden"
},
inputStyle: {
flex: 1,
border: "none",
height: 30
},
search: {
fontSize: 30,
padding: "0px 10px",
cursor: "pointer",
borderRight: '1px solid grey'
}
};
I have a drop down menu button that sits in a span:
Don't mind that it's not horizontally centered (that's just a poor screen shot). What I want to do is vertically center it, but not by using position. Instead I would like to shift it down by a pixel or two. How can I do this?
Here's my styling:
<span
className={ 'arrow-down' }
style={{
float: 'right',
display: 'block',
height: '12px',
lineHeight: '12px',
width: '12px',
borderRadius: '30px',
backgroundColor: '#ffbf44',
color: 'black',
textAlign: 'top',
fontSize: '1.25em',
}}/>
You can use margin-top:
<span
className={ 'arrow-down' }
style={{
float: 'right',
display: 'block',
height: '12px',
lineHeight: '12px',
width: '12px',
borderRadius: '30px',
backgroundColor: '#ffbf44',
color: 'black',
textAlign: 'top',
fontSize: '1.25em',
marginTop: '2px'
}}/>
This is effectively what #AllanJiang proposed with paddingTop, but margin won't affect the clickable size of the element, if that's an issue.
You can try use flex box positioning:
spanStyle: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
paddingTop: 2, <--- in case you want to adjust the position manually
}