I am using react bootstrap v1.0.0-beta.5 which uses bootstrap 4.
I am trying to create a header that aligns text on one side and an ellipsis on the other that will drop down actions when you click it.
I have attemped to use
<FaEllipsisH className="justify-content-end"/>
What should I be doing?
<Card style={{ width: '22rem' }} className="pCard" border="dark">
<Card.Header>
<FaAmazon/> {product.content}
<FaEllipsisH className="justify-content-end"/>
</Card.Header>
<Card.Body>
<Card.Title> <FaFileInvoice/> <span className="Home orderNo"><a href={`/products/${product.productId}`}>{product.productId}</a></span></Card.Title>
<Card.Text>Item</Card.Text>
</Card.Body>
</Card>
Associated CSS
.Home .pCard {
font-size: 0.8em;
margin-bottom: 10px;
margin-top: 5px;
display: flex;
}
Use the justify-content: space-between from flexbox. You can use Bootstrap's flex utility classes:
<Card.Header className="d-flex justify-content-between">
Related
I am developing an app with a page that displays an overlay over a map. I want the view on this overlay to be scaled to a percentage of screen height (30%). I want the contents of this view to be flex elements that span its entire height.
This is my current implementation:
function MyOverlay () {
return (
<Overlay isVisible={true}>
<View id='container' style={{height: '30%', alignItems: 'stretch'}}>
<Text id='title' style={{flex: 1}, styles.titleText}>Menu</Text>
<View id='options' style={{flex: 3}}>
<Button containerStyle={{borderWidth: 2, flex: 1}}>
Option 1
</Button>
<Button containerStyle={{borderWidth: 2, flex: 1}}>
Option 2
</Button>
<Button containerStyle={{borderWidth: 2, flex: 1}}>
Option 3
</Button>
</View>
</View>
</Overlay>
);
};
In this implementation, container has height=30%, which is reflected in the screenshot below. I want the title and options child components to fill the entire parent height. After reading other answers, I added alignItems: 'stretch' to container. This isn't working as intended, as seen in the screenshot.
Any idea how I could get the behavior that I want?
I recreated your example in my own markup, and abstracted away the styles for readability. Most of the styles you can ignore, but the important stuff is:
On the parent container:
display: flex;
flex-direction: column;
On the option wrapper:
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
And that's it! No need to add any flex properties to the children.
.container {
border: 1px solid black;
height: 80%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
<div class="container">
<h1>Menu</h1>
<div class="wrapper">
<button>Option 1</button>
<button>Option 2</button>
<button>Option 3</button>
</div>
</div>
I have installed slick slider and have it operational.
However I am having difficulty with centering items inside the slide[
Please refer to the attached image,
As you can see only "Dog" is centered cause I used <p style={{ textAlign: "center" }}>Dog</p> directly inside the div. This can't be my solution cause it is not text I will be displaying.
What I have attempted is to locate the slick-slide and attempt to center in the css.
However this has not worked.
Please refer to my attached code, any assistance is appreciated.
CSS
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
textAlign: center;
justifyContent: center;
alignItems: center;
}
SLIDER
<Slider {...settings}>
<div>
<p style={{ textAlign: "center" }}>Dog</p>
</div>
<div>
<p>Fish</p>
<a href="https://www.google.com" target="_blank">
<img src="https://www.google.com" alt="test" />
</a>
</div>
<div>
<p>CCat</p>
</div>
Add to your divs inside <Slider/> component a class(eg:contentContainer) and apply the next properties to it:
.contentContainer {
display: flex;
justify-content: center
}
Result:
<Slider {...settings}>
<div className="contentContainer">
<p style={{ textAlign: "center" }}>Dog</p>
</div>
<div className="contentContainer">
<p>Fish</p>
<a href="https://www.google.com" target="_blank">
<img src="https://www.google.com" alt="test" />
</a>
</div>
<div className="contentContainer">
<p>CCat</p>
</div>
I'm trying to add the Next Image component to my project.
And I have a problem, the image disappears when I add layout='responsive'.
code:
<Box>
<Link href='/' >
<Image src='/images/logoDark.svg'
alt='navbar-logo'
width={260}
height={56}
layout='responsive'
/>
</Link>
</Box>
Is there a solution? or any other way to optimize images?
Based on what is found here (https://github.com/vercel/next.js/issues/19314), it seems layout='responsive' has no intrinsic size. So you will have to add a width to the containing element.
You need to wrap the next/image into a container with display:block, so that the image will be displayed.
set height and width for the parent of the Image component :
<Box width={263} height={56}>
<Link href='/' >
<Image src='/images/logoDark.svg'
alt='navbar-logo'
width={260}
height={56}
layout='responsive'
/>
</Link>
</Box>
ensure the parent element uses display: block in their stylesheet like Box component or div
Component
<div className="photo">
<Image
width={300}
height={300}
src="https:/images.unsplash.com/photo-1501432377862-3d0432b87a14?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
alt="photo"
layout="raw"
/>
</div>
<style jsx>{`
#media (max-width: 768px) {
.photo {
margin: 0 auto;
justify-content: center;
display: flex;
width: 200px;
height: 200px;
}
}
`}</style>
next.config.js
experimental: {
images: {
layoutRaw: true,
},
},
This worked for me, the image doesn't disappear and is responsive,
Container with the icons
i want to display none everything in the container except the Avatar.
code and picture as support
ThanksCode of the Container
<RightContainer>
<IconButton>
<NotificationsIcon style={{ color: "#b1bdb4" }} />
</IconButton>
<IconButton>
<img src="/images/work.svg" alt="" />
</IconButton>
<AvatarProfile src="https://lh3.googleusercontent.com/ogw/ADGmqu92jhn39aYEn_N3jFj7cmQkvGBDfgbz53Lmv_8z3Q=s32-c-mo" />
</RightContainer>
const RightContainer = styled.div`
flex: 0.15;
display: flex;
align-items: center;
justify-content: space-around;
#media (max-width: 520px) {
display: none;
}
`;
I am new to React. I am trying to create react card for profile page like this. Basically, I want avatar component on top of the material-ui card as shown in the image.
How do I do that?
Thanks.
Here is my code so far
// profile.css
.getMoreContainer {
display: inline-flex;
padding: 30px;
height: 25%;
text-align: center;
}
// profile.js
<div className="getMoreContainer">
<Card style={{position: 'relative'}}>
<Avatar src={LikeButton}
style={{ position: 'absolute',
marginTop: '-5%',
marginLeft: '6%',
zIndex: 5}}
/>
Get More Boosts
</Card>
<Card>
<Typography>Get More Potatoes</Typography>
</Card>
</div>