How to show right side first on mobil? I know in flexbox I could set flex-direction: column-reverse;. What about in Bootstrap?
const PostUC = (props: PostUCProps) => {
return (
<>
<section className="section-base">
<div className="container">
<div
className="row"
style={{
display: 'flex',
alignItems: 'center',
}}
>
<div className="col-lg-6 col-md-12">
</div>
<div
className="col-lg-6 col-md-12 fade-right"
style={{
aspectRatio: '525/480',
position: 'relative',
height: '100%',
display: 'block',
}}
>
</div>
</div>
</div>
</section>
</>
)
}
I tried based on this: https://www.w3schools.com/bootstrap4/bootstrap_flex.asp
flex-column-reverse, but it does not help.
return (
<>
<section className="section-base">
<div className="container">
<div
className="row flex-column-reverse"
Related
I am using a react-to-print library to print some reports that are dynamic. The problem is I need a fixed footer on every page while printing and I have a fixed footer which overlaps the content before going to new page . I know how position:fixed works and would have solved if reports weren't dynamic. What can be the possible fix here?
My PrintingComponenet is
<div className="page-footer">
<hr />
<p className="pt-1">For screening purposes only. Not for use in diagnostic procedures</p>
<div className="flex w-full items-center justify-between">
<div>
Printed By ( <span className="text-primary-700">{!isServer && window.location.hostname}</span>{" "}
) on {moment(new Date()).format("MMM Do YYYY, h:mm:ss A")}
</div>
<span>{member.member_code}</span>
</div>
</div>
<div className="w-full">
{Object.keys(test).map((el, index) => (
<div key={el}>
<div style={{ height: "100px" }} />
<div className=" bg-gray-700 mt-4 px-3 capitalize py-4 text-xl text-white font-medium space-y-2 whitespace-nowrap">
{el} Test Report
</div>
{el === "Body Mass Index" ? (
<>
<div className="flex mt-3 border-b pb-3">
<div className="text-gray-600 flex-1 text-2xl">Test Date</div>
<div className="text-gray-600 flex-1 text-2xl">Temperature</div>
<div className="text-gray-600 flex-1 text-2xl">Test Result</div>
</div>
{test[el].map((el: any, index: number) => (
<div key={el.test_date} className="flex mt-4 border-b pb-2 last:border-0 ">
<div className=" flex-1 text-xl">
<span className="block">{moment(utcDateToLocal(el.test_date)).format("MM/DD/YYYY")}</span>
<span className="block">{moment(utcDateToLocal(el.test_date)).format("h:mm A")}</span>
</div>
<div className=" flex-1 text-xl">
{el.temperature} {el.temperature && <>° F</>}{" "}
</div>
<div className=" flex-1 text-xl ">Test</div>
</div>
))}
</>
) : (
<>
<div className="flex mt-3 border-b pb-3">
<div className="text-gray-600 flex-1 text-2xl">Test Date</div>
<div className="text-gray-600 flex-1 text-2xl ">Test Result</div>
</div>
{test[el].map((el: any, index: number) => (
<div key={el.test_date} className="flex mt-4 border-b pb-2 last:border-0 ">
<div className=" flex-1 text-xl">
<span className="block">{moment(utcDateToLocal(el.test_date)).format("MM/DD/YYYY")}</span>
<span className="block">{moment(utcDateToLocal(el.test_date)).format("h:mm A")}</span>
</div>
<div className=" flex-1 text-xl ">
<div>Test Result</div>
<div>Test Result</div>
<div>Test Result</div>
<div>Test Result</div>
<div>Test Result</div>
</div>
</div>
))}
</>
)}
</div>
CSS for footer is
.page-footer {
height: 30px;
position: fixed;
bottom: 0;
width: 100%;
}
#media print {
.page-footer {
page-break-after: always;
}
}
I am trying to display list images that have a fixed width and use the original height of the image that is 100%.
Similar question here with no answer.
I have read these answers here and tried them out. The images are there in the dom but out of the screen and does not show up.
The size of images varies eg. 1280x15141, 1280x14333.
This is what I am trying to do from the docs example.
<main className="mx-auto max-w-7xl ">
<section className="flex flex-col">
{chapter.images.map((img) => (
<div key={img} style={{ position: 'relative', width: '768px', height: '100%' }}>
<Image alt="Mountains" src={img} layout="fill" objectFit="contain" />
</div>
))}
</section>
</main>
This ends up displaying no image but they are present in the dom.
Update:
As per suggestion I have added height.
<section className="flex flex-col">
{chapter.images.map((img) => (
<div key={img} style={{ position: 'relative', width: '768px', height: '100px' }}>
<Image alt="Mountains" src={img} layout="fill" objectFit="contain" />
</div>
))}
</section>
Plain img tag approach.
But if i use the images in <img> instead.
I am able to see the image and apply width to it with the height as the default.
<section className="flex flex-col gap-2">
{chapter.images.map((img) => (
<div key={img} className="mx-auto md:w-4/5">
<img alt="Mountains" src={img} />
</div>
))}
</section>
But I want to use NextJs Image.
How can I do that?
I believe you're import path is incorrect
import mountains from '../../public/mountains.jpg'
I am using react-full-page in my project. But while adding the Footer in the routes, the footer on visible in the second section of the page and is not going at the bottom of the page.
CodeSandbox
I have included 2 routes, one "/"for home and the other "/about" for about.
Your Footer component is after your fullPage element (you can see in inspect), but your fullPage element has a static height and your footer is after that, if you want your footer being after all element, in this case, you must add your footer into fullPage,
Like this,
function Home() {
return (
<>
<FullPage>
<Slide>
<div style={{ height: "100vh" }}>
<h1>Hi</h1>
</div>
</Slide>
<Slide>
<div style={{ height: "100vh" }}>
<h1>Test Me</h1>
</div>
</Slide>
<Slide>
<div style={{ height: "100vh" }}>
<h1>I am Home</h1>
</div>
</Slide>
<Slide>
<div style={{ height: "100vh" }}>
<h1>I am Home</h1>
</div>
</Slide>
<Slide>
<Footer />
</Slide>
</FullPage>
</>
);
}
So I have created this app that lets me get data from API and display them like this:
So as u can see the images and title are perfectly centered but the images are not well organized u can see they are not centered under each others properly how can I fix this?
code:
<div className="container text-center">
<div className="row">
{newPhotosLocally.map(picture =>{
return(
<div className="col-lg-4 col-md-6 col-sm-12">
<PostItem
key={picture.id}
src={picture.thumbnailUrl}
thumbnailUrl={picture.thumbnailUrl}
onClick={() => showPicture(picture.url,picture.id,picture.title)}
title={picture.title}/>
</div>
)
})}
</div>
</div>
PostItem.js:
<div>
<div className="container text-center">
<div className="row">
<div className="col-lg-4 "></div>
<div className="item">
<img src={src} onClick={onClick} alt="small post"></img>
<div className="caption">{title}</div>
</div>
</div>
</div>
</div>
css code:
div.item {
vertical-align: top;
/* display: inline-block; */
text-align: center;
/* width: 120px; */
}
.caption {
display: block;
}
I have two inputs ("email" and "password") centered horizontally. Now, I want to put an item to right of them, but keeping them (email and password) centered.
<div style={{ display: "flex", justifyContent: "center" }}>
<div className="col-md-6 row">
<div className="col-md-6">
<input placeholder="email" />
</div>
<div className="col-md-6">
<input placeholder="password" />
</div>
</div>
<button text="Entrar" />
</div>
If I remove <button>, inputs are centered when I put the button all three items are centered, but I just want center email and password inputs.
The easiest way would just be to give the element you want on the right position: absolute (to take it out of the flow) and then use left and top to position it where you want it (noting that these values can be percentage-based). This means you may have to play around with values to get it exactly where you want it, but will keep the other element in the vertical center:
button {
position: absolute;
top: 5%;
left: 75%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div style='display: flex; justify-content: center;'>
<div class="col-md-6 row" style='background-color: yellow;'>
<div class="col-md-6">
<input placeholder="email" />
</div>
<div class="col-md-6">
<input placeholder="password" />
</div>
</div>
<button>Entrar</button>
</div>
I would change a bit your code.
This answer asumes that you want the bellow the fields and right aligned.
Like this.
<div style={{ display: "flex", justifyContent: "center" }}>
<div className="col-md-6 row">
<div className="col-md-6">
<input placeholder="email" />
</div>
<div className="col-md-6">
<input placeholder="password" />
</div>
</div>
<div className="col-md-6 row">
<button class="pull-right" text="Entrar" />
</div>