I'm trying to style a modal in ReactJS and would like some help. I'm facing difficulty in trying to center align the content modal. In addition, when styling the modal, is it possible to assign a className and style it in the css page? I've tried doing that but it doesn't work. So I just decided to do inline styling but I can't center align my modal.
<button onClick={()=> SEOsetModalIsOpen(true)} className="viewmore">
View More
<ArrowIcon className="arrowright"/>
</button>
<Modal
isOpen={SEOmodalIsOpen}
shouldCloseOnOverlayClick={true}
onRequestClose={()=>SEOsetModalIsOpen(false)}
style={{
overlay: {
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
opacity: 1,
},
content: {
position: 'absolute',
width: '500px',
height: '300px',
top: '200px',
left: '500px',
right: '500px',
bottom: '200px',
border: '1px solid #ccc',
background: 'blue',
overflow: 'auto',
WebkitOverflowScrolling: 'touch',
borderRadius: '4px',
outline: 'none',
padding: '20px'
}
}}
>
<h2>Search Engine Optimisation</h2>
<p>Hello World</p>
<button onClick={()=>SEOsetModalIsOpen(false)}>Close</button>
</Modal>
</div>
You could use this to center it with absolute positioning:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
instead of setting top, left, bottom, right to center your content, you can set
{
display: "flex",
justifyContent: "center",
alignItems: "center",
}
Related
I am using Radix UI to create a modal window:
<Dialog.Root>
<Dialog.Trigger asChild>
<button className="Button violet" size="large">
Edit profile
</button>
</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Content className="DialogContent" style={{ width: "unset" }}>
<Dialog.Title className="DialogTitle">Edit profile</Dialog.Title>
<div
style={{ maxWidth: "300px", maxHeight: "150px", overflow: "auto" }}
>
<h1>teashabsjkdhkja</h1>
<h1>teashabsjkdhkja</h1>
<h1>teashabsjkdhkja</h1>
<h1>teashabsjkdhkja</h1>
<h1>teashabsjkdhkja</h1>
<h1>teashabsjkdhkja</h1>
<h1>teashabsjkdhkja</h1>
<h1>teashabsjkdhkja</h1>
<h1>teashabsjkdhkja</h1>
</div>
<div
style={{ display: "flex", marginTop: 25, justifyContent: "flex-end" }}
>
<Dialog.Close asChild>
<button className="Button green">Save changes</button>
</Dialog.Close>
</div>
<Dialog.Close asChild>
<button className="IconButton" aria-label="Close">
<Cross2Icon />
</button>
</Dialog.Close>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
When i resize the window from bottom to top over the modal, the Save changes button remains outside the modal, but i want to drag it at the top with the bottom window border. Question: How to solve the issue?
demoL: https://codesandbox.io/s/flamboyant-hamilton-3bx0h3
Assuming that the goal is to contain Button when resizing the window, perhaps try add display: flex and flex-direction: column to the DialogContent class in styles.css:
.DialogContent {
display: flex;
flex-direction: column;
background-color: white;
border-radius: 6px;
box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90vw;
max-width: 450px;
max-height: 85vh;
padding: 25px;
animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
In Bootstrap 5 I have a video on the index page that plays below the navigation. I'd like to keep the 16x9 aspect ratio and allow for text to be centered overlayed on the video but I'm running into an issue when I try set a maximum height.
HTML:
<section className="hero-video">
<div className="ratio ratio-16x9">
<div className="overlay-text">
<h1>Foo Bar</h1>
</div>
<iframe
src="https://youtube.com/embed/wxL8bVJhXCM?controls=0&autoplay=1&mute=1&modestbranding=0&showinfo=0"
frameBorder="0"
allow="autoplay; encrypted-media"
title="video"
style={{
position: 'absolute',
bottom: 0,
width: '100%',
height: '100%',
margin: '0 auto',
}}
></iframe>
</div>
</section>
CSS:
.hero-video {
position: relative;
overflow: hidden;
max-height: 600px;
}
.overlay-text {
position: absolute;
background-color: rgba(58, 57, 57, 0.5);
z-index: 10;
width: 100%;
height: 100%;
overflow: hidden;
}
.overlay-text h1 {
color: #fff;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
Full Component:
import React from 'react'
import { useStaticQuery, graphql } from 'gatsby'
const Hero = () => {
const { site } = useStaticQuery(
graphql`
query {
site {
siteMetadata {
description
hero
}
}
}
`,
)
const description = site?.siteMetadata?.description
const hero = site?.siteMetadata?.hero
return (
<section className="hero-video">
<div className="ratio ratio-16x9">
<div className="overlay-text">
<h1>{description}</h1>
</div>
<iframe
src={`https://youtube.com/embed/${hero}?controls=0&autoplay=1&mute=1&modestbranding=0&showinfo=0`}
frameBorder="0"
allow="autoplay; encrypted-media"
title="video"
style={{
position: 'absolute',
bottom: 0,
width: '100%',
height: '100%',
margin: '0 auto',
}}
></iframe>
</div>
</section>
)
}
export default Hero
Research:
How do I set max-width for an image in Bootstrap carousel and keep aspect ratio?
Max height div not working in css and bootstrap 5
set size to responsive iframe in bootstrap
How can I apply a max-height to an iframe but keep it at 100% width?
Question:
In Bootstrap 5 how can I have a max height video, keep centered text from the overlay while snapping the video to the bottom of the div?
With Bootstrap 5, you shouldn't have to add the CSS on the iframe, since you have the class ratio on the parent div. Also I believe you need to change the order of your overlay-text element and add a little bit of CSS, like so:
<section className="hero-video">
<div className="ratio ratio-16x9">
<iframe
src="https://youtube.com/embed/wxL8bVJhXCM?controls=0&autoplay=1&mute=1&modestbranding=0&showinfo=0"
frameBorder="0"
allow="autoplay; encrypted-media"
title="video">
</iframe>
</div>
<div className="overlay-text">
<h1>Foo Bar</h1>
</div>
</section>
Add top/left to overlay-text class as well:
.overlay-text {
position: absolute;
top: 0;
left: 0;
background-color: rgba(58, 57, 57, 0.5);
z-index: 10;
width: 100%;
height: 100%;
overflow: hidden;
}
I have an image element that I'm trying to maintain aspect ratio of. I need it to have responsive width. In other words, the image needs to have 100% width but always have height relative to its responsive width. i.e. the width always needs to be 100% of the parent container (which is using flex) and the height always needs to be 56% of the width. This is what I've tried:
#container {
display: 'flex',
alignContent: 'center',
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'center',
justifyItems: 'center',
padding: theme.spacing(0, 0, 2),
}
#myImg {
width: 100%;
height: 56%;
}
<div class='container'>
<img class='myImg' src='whatever.jpg'>
<div ... other stuff />
</div>
The problem is that this does maintain the aspect ratio as desired, but adds a gap above the image and below the "other stuff", according to the full height of the image if it weren't set to 56%. How do I achieve this without the gaps?
Here is an approach:
Use an outer wrapper-div for the image. Grant aspect ratio by padding-top. Position image in the wrapper by position: absolute, center it and hide parts which are larger than aspect ratio if image does not match aspect ratio on its own.
See example/demo:
#container {
display: 'flex',
alignContent: 'center',
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'center',
justifyItems: 'center',
padding: theme.spacing(0, 0, 2),
}
.img-wrapper {
width: 100%;
padding-top: 56%;
position: relative;
overflow: hidden;
border: 1px solid red;
}
.img-wrapper img {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100%;
height: auto;
}
<div class='container'>
<div class="img-wrapper">
<img class='myImg' src='https://dummyimage.com/600x400/0000ff/fff&text=-image-'>
</div>
</div>
I'd like the top level div with message "This is a test message" pinned to top so it always on top and overlay the following div even (with black background) when i scroll
The "position: fixed" does not seem to make it work
function App() {
return (
<div>
<div
style={{
top: "0px",
position: "fixed",
width: "100%",
overflow: "hidden"
}}
>
<p>this is a test message</p>
</div>
<div
className="App"
style={{
marginTop: "50px",
height: "2000px",
width: "30px",
background: "black"
}}
></div>
</div>
);
}
I did not have to change anything to your code, I just added a few colors and some height: https://react-zda8ht.stackblitz.io
Link to the editor: https://stackblitz.com/edit/react-zda8ht
Isn't that what you're looking for?
If i understand you correctly, this is something you need
<div id="app">
The APP
</div>
<div id=message>
This is a test message
</div>
#app {
margin: 50px auto 0px auto;
padding: 10px;
width: 300px;
height: 2000px;
background-color: black;
color: white;
}
#message {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
padding: 10px;
background-color: red;
color: white;
}
the jsfiddle example link
.root{
top: 0px;
position: fixed;
overflow: hidden;
width: 100%;
height: 50px;
background: darkcyan;
color:white;
}
.inner{
margin-top: 60px;
height: 1000vh;
width: 30px;
background: black;
}
<div>
<div class="root">
<p>this is a test message</p>
</div>
<div class="inner"></div>
</div>
I have a div nested in a div. I am trying to display some text and that works. However what I want is that the text is center aligned i.e. it has a left: -50%. But it does nothing. But when I do something like left: 20px then the text moves left by 20px. How can I achieve moving my div left by 50%?
Even with position relative I have no change
.currentText{
position: relative;
margin-left: -50px;
}
using float destroys my display
.currentText{
float: left;
margin-left: -50px;
}
My html (jsx in my case) is:
<div style={{ marginLeft: `${currentPer}%`, marginRight: `${100 - currentPer}%` }}>
<div className={s.currentText}>
{intl.formatMessage(messages.boo)}
</div>
</div>
<div style={{ marginLeft: `${currentPer}%`, marginRight: `${100 - currentPer}%` }}>
<div
className={s.down}
/>
</div>
Do you want to get something like that ? :
https://jsfiddle.net/nL7bjgbx/20/
i've used jQuery to get the witdh of the child div & offset it of half the value
var widthDiv = $(".childDiv").css('width');
var rule = '-'+(widthDiv.replace("px", "")/2)+'px';
$(".childDiv").css('margin-left', rule);
If you want just the text to be aligned center add this .targetText { text-align: center }
If you have nested divs, you could use positioning like below.
.outer {
width: 300px;
height: 100px;
background: #ccc;
position: relative;
}
.inner {
width: 150px;
height: 50px;
background: #f0f;
position: absolute;
left: 50%;
margin-left: -75px;
top: 50%;
margin-top: -25px;
text-align: center;
}
<div class="outer">
<div class="inner">Text</div>
</div>