How to add a Badge for an Icon in Ant Design? - javascript

I'm using the Icon and Badge from Ant Design. I want to add the Badge for the Icon:
<VscBell
size={30}
style={{ marginRight: '10px', float: 'right' }}
>
<Badge count={5}>
<a href="#" className="head-example" />
</Badge>
</VscBell>
I have import 'antd/dist/antd.css'; imported and the Badge works without the Icon. The Icon is from reacticons and it is displayed properly. I want to add the Badge to the top right of the Icon. But it does not show at all when included in the Icon.

Put them both in a View Tag (if you are react-native) or div
and then take this styles to the badge:
position: absolute;
right: 0px;
top: 0px;
Something like this:
<div>
<VscBell
size={30}
style={{ marginRight: '10px', float: 'right' }}
>
</VscBell>
<Badge count={5} style={{ position: 'absolute', right: 0, top: 0 }}>
<a href="#" className="head-example" />
</Badge>
</div>

Related

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.

Align button to the bottom of the page using MUI v5 in React

I'm trying to position the button exactly at the center bottom of the page irrespective of the content height in that page.
Excerpt from my code
const useStyles = makeStyles({
button: {
bottom: 0,
right: 0,
position: "absolute"
}
});
export default function Home() {
const classes = useStyles();
return (
<div>
<Box>
<Box>
<Paper elevation={2} sx={{ width: "100%", height: "50vh" }}>
Some data
</Paper>
</Box>
<Box textAlign="center">
<Button
className={classes.button}
variant="contained"
sx={{ width: "200px" }}
>
Submit
</Button>
</Box>
</Box>
</div>
);
}
I created a working example using CodeSandbox. Could anyone please help?
This is more css related (see other post) but you as you manually set the width of the Button you can position it 50% from the left and then subtracting half of its width from its left margin:
bottom: 0,
left: "50%",
marginLeft: -100,
position: "absolute"
see exemple

CenterText in doughnut in react

centerText: {
display: true,
text: `${income}`,
fontSize : 10
}
I'm not able to see center text using about code in option of doughnut chart.
Anyone know why?
Thank you in advance
It was sometime ago when I was researching about adding centering text in react-chartjs-2's Doughnut, and I briefly remembered the easiest way to achieve center text in Doughnut is actually using relative and absolute positioning to add a layer to the doughnut.
<div style={{ width: '200px', height: '200px', position: 'relative'}}>
<Doughnut data={data} options={options} width={200} height={200}/>
<div style={{ position: 'absolute', width: '100%', top: '50%', left: 0, textAlign: 'center', marginTop: '-28px', lineHeight: '20px'}}>
<span>Text here</span> //may use text-align here to center text
</div>
</div>

React Native Modal styling

So, I have a modal in react native which takes my whole screen, I do not want this to happen, any ideea how to configure it?
I have the following structure
<Modal visible={props.display} animationType="slide" style={{
width: '50%',
height: '50%'}}>
<Wrapper>
<ShiftDeclinedWrapper>
<CenterText padding="20px">{props.data}</CenterText>
<Footer>
<ButtonWrapper>
<Button
isDisabled={props.isLoading}
onPress={() => props.declineAccept()}
textColor="white"
color={theme.color.red}>
Decline
</Button>
</ButtonWrapper>
<ButtonWrapper>
<Button
isDisabled={props.isLoading}
onPress={props.declineBack}
textColor="white"
color={theme.color.green}>
No, thanks
</Button>
</ButtonWrapper>
</Footer>
</ShiftDeclinedWrapper>
</Wrapper>
</Modal>
The Wrapper component structure is
export const Wrapper = styled.View`
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
flex: 1;
`;
ShiftDeclineWrapper is just
export const ShiftDeclinedWrapper = styled.View`
text-align: center;
`;
I have tried putting 50% width/height just so i can make sure it works so i can style it how i want, I tried putting it on the modal, wrapper, also shiftdeclinewrapper too nothing worked
From the Modal documentation here, you can't use the style prop for this.
You can add the styles to your <Wrapper> element and add the prop transparent to your Modal to get a transparent background (instead of the default white).
<Modal visible={props.display} animationType="slide" transparent>
<Wrapper style={{width: '50%', height: '50%'}}>
You also have to use the style props over on your <Wrapper> component.
This worked for me!
<Modal
presentationStyle="overFullScreen"
transparent
visible={true}
>
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
}}>
<View style={{
backgroundColor: "#fff",
width: 300,
height: 300,
}}>
<Text>MY TEXT </Text>
</View>
</View>
</Modal>

ReactJS + Redux - Material-UI: How to make <Toolbar/> floatable?

Using: http://www.material-ui.com/#/components/toolbar , how can I make floatable when scrolling down?
I was able to do it with with the following:
textAlign:'center', position: 'fixed', top: 0
but when I do it with the <Toolbar/>, it resizes weirdly.
Have you tried setting the width to 100%? This worked for me:
<Toolbar
style={{
position: 'fixed',
top: 0,
width: '100%'
}}>
// Content
</Toolbar>
Or:
<Toolbar
style={{
position: 'fixed',
top: 0,
left: 0,
right: 0,
}}>
// Content
</Toolbar>

Categories

Resources