How can I get the border to offset slightly like in the picture?
I have tried styling inline and on css sheet, and nothing changes the border. I am having trouble determining where I can even alter the border, I have tried changing the colour and can't even do that.
HTML:
<TextField
id="search"
className="search-bar"
variant="outlined"
fullWidth
label="Search in Cree or English"
autoComplete="off" //prevents history from popping up
//styling for label text
InputLabelProps={
{
shrink: false, //prevents label text from hopping to top of search bar on focus
style:{
fontStyle: "italic",
fontFamily: "Calibri", //other acceptable fonts? - Tahoma, Segoe UI, Microsoft PhagsPa, Microsoft YaHei, Nirmala UI
fontSize: "170%",
marginTop: "-9px",
color: "gray"
}
}
}
size="small"
InputProps={{
endAdornment: (
<InputAdornment position="end">
<Button onClick={handleMagGlassClick} className="mag-glass-btn">
<FontAwesomeIcon icon={faMagnifyingGlass} size="xl" color="gray"> </FontAwesomeIcon>
</Button>
</InputAdornment>
),
style: {backgroundColor: "white", fontStyle: "normal", borderRadius: "15px"}, //look of searchbar
}}
onKeyUp={handleSearchKey}
onChange={handleSearchText}
onKeyDown={eraseLabel}
></TextField>
Related
I've been struggling to change the background color of the NextUI navbar. I'm using NextUI's navbar component in my react js project. I suppose there is some property / attribute for that but even after researching quite a lot, I'm not aware of it. Please help me.
import { Navbar, Input } from "#nextui-org/react";
import { SearchIcon } from "./SearchIcon.js";
import './Header.css'
function Header() {
return (
<Navbar isBordered variant="sticky">
<Navbar.Brand css={{ mr: "$4" }}>
<h5>ABC</h5>
</Navbar.Brand>
<Navbar.Content
css={{
"#xsMax": {
w: "70%",
jc: "space-between",
},
}}
>
<Navbar.Item
css={{
"#xsMax": {
w: "100%",
jc: "right",
},
}}
>
<Input
clearable
contentLeft={
<SearchIcon fill="var(--nextui-colors-accents6)" size={16} />
}
contentLeftStyling={false}
css={{
w: "100%",
"#xsMax": {
mw: "300px",
},
"& .nextui-input-content--left": {
h: "100%",
ml: "$4",
dflex: "center",
},
}}
placeholder="Search"
/>
</Navbar.Item>
</Navbar.Content>
</Navbar>
);
}
export default Header;
Background color and background blur color are applied in the div with class nextui-navbar-container, which, as I understood, appears there automatically and you can't affect it directly as an component. But you can override css class nextui-navbar-container, or you can use css variables --nextui--navbarBackgroundColor and --nextui--navbarBlurBackgroundColor in the css property of Navbar component like this:
<Navbar css={{
$$navbarBackgroundColor: "transparent",
$$navbarBlurBackgroundColor: "transparent"
}}>
I have a Material UI Textfield time input and I want to change dropdown list color from blue to red on select. For example, I want to change the dropdown select of blue to red.
I'm using Material UI in ReactJS.
Here is the image:
<TextField
id="time"
type="time"
style={{
width: "148px",
marginLeft: 4,
marginRight: 6,
padding: "2px 0px 3px 6px",
}}
defaultValue="07:30"
iconComponent={ExpandMoreIcon}
className={classes.textField}
color="secondary"
InputProps={{
disableUnderline: true,
endAdornment: <ExpandMoreIcon />,
// className: classes.input,
}}
/>;
I want to change the dropdown list color on select from blue to red.
Is there a way to change it??
I'm working with Chakra UI and i needed to customize the scrollbar style using the css pseudo element ::-webkit-scrollbar, but Chakra UI doesn't seen to have this pseudo element and a I don't know where I can style this specific component without creating a global css class.
Here is a sample of my code:
<Box
overflowX="auto"
maxW="100vw"
h="100%"
whiteSpace="nowrap"
pb="17px"
color="white"
px="32px"
// the ::-webkit-scrollbar property should goes here
>
<!-- content -->
</Box>
Try css prop:
<Box
overflowY="auto"
css={{
'&::-webkit-scrollbar': {
width: '4px',
},
'&::-webkit-scrollbar-track': {
width: '6px',
},
'&::-webkit-scrollbar-thumb': {
background: scrollbarColor,
borderRadius: '24px',
},
}}
>
Use Chakra sx prop here.
<Box
overflowX="auto"
maxW="100vw"
h="100%"
whiteSpace="nowrap"
pb="17px"
color="white"
px="32px"
sx={
{
'::-webkit-scrollbar':{
display:'none'
}
}
}
>
<!-- content -->
</Box>
To know more about Chakra sx prop, refer docs
its not gonna work with just css you need to __css
<Box
overflowY="auto"
__css={{
'&::-webkit-scrollbar': {
w: '2',
},
'&::-webkit-scrollbar-track': {
w: '6',
},
'&::-webkit-scrollbar-thumb': {
borderRadius: '10',
bg: `gray.100`,
},
}}
>
It worked for me you can use overflow="scroll" and with this the prop sx={}
<Flex
mt="20px"
overflow="scroll"
sx={{
"::-webkit-scrollbar": {
display: "none",
},
}}
/>
I am working on a project in which i need to write a number over a icon.
I am using MaterialUI ModeComment icon and i want to write some text over it .
I tried the following things but didn't worked .
<ModeComment color='primary'>
<Typography>2</Typography>
</ModeComment>
<ModeComment color='primary'>
<span>2</span>
</ModeComment>
How can I do this? Thanks in Advance
Unfortunately, passing a children prop like you did will not work for material-ui's Icon component. It expects the children to be the name of the icon font ligature.
A possible solution would be to create a custom component for your requirements - a ModeCommentIconWithNumber component maybe? Then it would have predefined styles to position its icon and number elements.
Below code would help you achieve what you want. You could modify this component, like accepting an icon prop to render or maybe a color prop that defines the color of the icon.
...
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles({
root: {
position: "relative",
display: "inline-flex",
justifyContent: "center",
alignItems: "center"
},
icon: {
fontSize: "2.5em"
},
count: {
position: "absolute",
lineHeight: 1,
color: "#fff",
top: "0.5em",
fontSize: "1em"
}
});
function ModeCommentIconWithNumber({ size = 16, count = 0 }) {
const classes = useStyles();
return (
<div className={classes.root} style={{ fontSize: size }}>
<ModeCommentIcon color="primary" className={classes.icon} />
<Typography component="span" className={classes.count}>
{count}
</Typography>
</div>
);
}
You can use Badge of material ui. link
<Badge
badgeContent={4}
anchorOrigin={{
vertical: 'center',
horizontal: 'center',
}}
color="white">
<ModeComment />
</Badge>
Ciao, there is no way to put text in icon (like a child as you did). You could put Typography outside the icon and use some css. Something like:
const styles = {
typography: {
color: "white",
fontSize: 13,
position: "absolute",
top: "1.2%",
left: "2%"
}
};
function TextIcon() {
return (
<div>
<Typography style={styles.typography}>2</Typography>
<ModeComment color="primary" />
</div>
);
}
Here a codesandbox example.
I don't think Mui provide such customization. You could write text in parallel to icon and align it over the top of it using absolute position.
I am trying to design a custom accordion with these fancy red lines connecting parent and children (see photo).
I am using Grommet components here but in summary, the layout it's just a bunch of divs (the Box tag) and a collapsible panel component for the children(the Collapsible tag). Children panels can be opened and show more content.
After a couple of tries, what I did to connect parent and children is to wrap the outer box with a left-border and then remove the extra border on the bottom using a white box on top of it (the Stack tag of the second example code). The horizontal line connecting the card and the left-border is just a styled div placed next to the Child tab ( inside the SubMenuElement component ).
I think this is quite an intricate solution ( also because I need to make the white box responsive ) but I couldn't think about a simpler one.
Do you have any suggestion on how can I improve or re-do the red connections?
Thanks in advance for the help!
Please note that I am aware all the panels are using the same variables on click
<MenuButton
open={openMenu}
label="PARENT TAB-XYZ"
onClick={() => {
const newOpenMenu = !openMenu;
setOpenMenu(newOpenMenu);
setOpenSubmenu1(!newOpenMenu ? false : openSubmenu1);
}}
/>
<Collapsible open={openMenu}>
<Box background="antiquewhite" margin={{ left: 'small' }} border={{ side: 'left', size: '2px', color: 'red' }}>
{Tabs.map(el => {
return (
<SubMenuElement
key={el.title}
open={openSubmenu1}
label={el.title}
onClick={() => setOpenSubmenu1(!openSubmenu1)}
/>
);
})}
</Box>
</Collapsible>
<MenuButton
open={openMenu}
label="PARENT TAB-POU"
onClick={() => {
const newOpenMenu = !openMenu;
setOpenMenu(newOpenMenu);
setOpenSubmenu1(!newOpenMenu ? false : openSubmenu1);
}}
/>
<Collapsible open={openMenu}>
<Stack anchor="bottom-left">
<Box
background="antiquewhite"
margin={{ left: 'small' }}
border={{ side: 'left', size: '2px', color: 'red' }}
>
{Tabs.map(el => {
return (
<SubMenuElement
key={el.title}
open={openSubmenu1}
label={el.title}
onClick={() => setOpenSubmenu1(!openSubmenu1)}
/>
);
})}
</Box>
<Box background="white" height="39px" width="35px"></Box>
</Stack>
</Collapsible>
</Box>
);
Based on one of my answer for someone who needed a divider, I can propose you something like that: repro on Stackblitz
You will find the original divider code on the first link. for your needs, i modified it a little so it just add the link on the left of the content. There is still a border-left on the content wrapper tho, it seems the easiest solution for me.
Your main file :
import React, { Component } from "react";
import { render } from "react-dom";
import Divider from "./divider";
import "./style.css";
const App = () => {
const toggleAccordion = e => {
e.target.classList.toggle("hidden");
};
return (
<>
<div className="accordion hidden" onClick={toggleAccordion}>
accordion header
<div className="accordion-content-wrapper">
<Divider>
<div>Content</div>
</Divider>
<Divider>
<div>Content</div>
</Divider>
<Divider>
<div>Content</div>
</Divider>
</div>
</div>
</>
);
};
render(<App />, document.getElementById("root"));
My accordion css (your component already have this feature i guess, i just made a minimal reproduction):
.accordion.hidden {
height: 18px;
overflow: hidden;
}
.accordion-content-wrapper{
margin-left: 10px;
border-left: 1px solid black;
}
And for the divider, there not a lot of change from my original answer, here is the code:
import React from 'react';
const Divider = ({ children }) => {
return (
<div className="divider-component">
<div className="container">
<div className="border" />
<span className="content">{children}</span>
</div>
</div>
);
};
export default Divider;
css:
.divider-component .container{
display: flex;
align-items: center;
}
.divider-component .border{
border-bottom: 1px solid black;
width: 15px;
}
.divider-component .content {
width: 100%;
}
Even if you'll have to edit it to fit your needs, the idea is to add a flex container so you can add the little link on the left of your content, correctly aligned with your content.
For whoever will encounter the same issue, I ended up using two 50% height flexboxes inside a div that replace the horizontal line. This allows managing the responsive resize automatically while giving flexibility on the last item border.
const SubMenuElement = ({ last, label, open, onClick }: { last?: boolean; label: string; open: any; onClick: any }) => {
return (
<Box direction="row">
<Line last={last} />
<Box width="100%" margin={{ vertical: 'small' }}>
<Card background="white" onClick={onClick}>
....
</Card>
</Box>
</Box>
);
};
Where the Line is
const Line = ({ last }: { last?: boolean }) => (
<Box direction="column" width="20px" flex="grow">
<Box height="50%" style={{ borderLeft: '1px solid red', borderBottom: '1px solid red' }} />
<Box height="50%" style={last ? {} : { borderLeft: '1px solid red' }} />
</Box>
);