I am trying to get the Material UI button NOT to flow OVER my header which is in fixed position. For some reason or another I cannot get it to flow 'under' my header bar. Please find the simplified code below. FYI my current react project where I have this problem renders the header via the routing in the index.js file but that should matter in terms of the css, right?
Code:
import { Button } from "#mui/material";
import "./App.css";
function App() {
return (
<div className="App">
<div className="Header">Henlo</div>
<div className="Randomdiv">
<Button variant="contained">Sure</Button>
</div>
</div>
);
}
export default App;
.App {
background-color: rgb(172, 172, 172);
height: 100%;
min-height: 100vh;
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin-top: 55px;
color: #000000;
overflow: hidden;
}
.Header {
position: fixed;
top: 0px;
padding-left: 10px;
height: 55px;
width: 100%;
background-color: rgb(0, 0, 0);
text-align: left;
color: whitesmoke;
overflow: hidden;
}
.Randomdiv {
height: 250px;
width: 100%;
background-color: cornflowerblue;
}
Try adding
z-index property inside .header class
.Header {
.....
z-index: 99;
}
Related
Hi I think this is very simple question so I apologize in advance for not being able to resolve it myself. I'm trying to make tag disappear by media query when width of window becomes less than 1200px. But it doesn't disappear. I think it's a matter of inheritance. I'd appreciate if you let me know how to solve this.
this is NaviSearch.jsx file. I want to make top tag disappear
import React from "react";
import "../navi.css";
import pencil from "./images/pencil.png";
import { Link } from "react-router-dom";
function NaviRecent (props) {
return (
<Link to="/login" style={{textDecoration : 'none'}}>
<button id="NaviRecent">
<img src={pencil} id="NaviRecentImage"/>
<span id="NaviRecentText">최근강의</span>
</button>
</Link>
);
}
export default NaviRecent;
and this file is css file. I only brought what seemed relevant
#Navi {
position: sticky;
background-color: #fff;
width: 100%;
height: 64px;
top: -1px;
z-index: 5;
box-shadow: 0 2px 4px 0 hsl(0deg 0% 81% / 50%);
width: 1263.330;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
}
#NaviRecent {
border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
right: 20px;
width: 100px;
height: 30px;
padding: 8px;
background: #00c471;
color: #fff;
border-radius: 4px;
}
#NaviHiddenLogo {
display: none;
}
#NaviRecentText {
box-sizing: border-box;
color: white;
cursor: pointer;
font-family: Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,Helvetica Neue,Segoe UI,Apple SD Gothic Neo,Noto Sans KR,Malgun Gothic,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,sans-serif;
font-size: 16px;
font-weight: 600;
margin-left: 4px;
}
#NaviRecentImage {
width: 15px;
height: 15px;
}
#media screen and (max-width: 1020px) {
#NaviRecent {
display: none;
}
}
you should wrap into a tag like this :
import React from "react";
import "../navi.css";
import pencil from "./images/pencil.png";
import { BrowserRouter as Router, Link } from "react-router-dom";
function NaviRecent(props) {
return (
<Router>
<Link to="/login" style={{ textDecoration: "none" }}>
<button id="NaviRecent">
<img src={pencil} id="NaviRecentImage"/>
<span id="NaviRecentText">최근강의</span>
</button>
</Link>
</Router>
);
}
export default NaviRecent;
Be carefull, in your css file max-width is 1020px and not 1200px as you mentioned in your statement.
Hope it will help.
I have this going in react bootstrap. I have movie cards which consist of a picture, some text and a button. I need all of the cards to be equal height but the data inside keeps overflowing. It is built with bootstrap because it was a bootcamp project and I need to polish it up. I am trying to use flexbox for the cards but am having trouble.
EDIT:
I want the cards to remain the same so the text can overflow but it needs to stay hidden and not show partial text.
What I want (Notice how the text cuts off and there is no partial text showing)
<Card className="cardClass">
<div style={{textAlign: 'center'}}>
<Card.Img className="card-image" variant="top" src={movie.ImagePath} />
</div>
<Card.Body>
<div className="card-text-body">
<Card.Title>{movie.Title}</Card.Title>
<Card.Text>{movie.Genre.Name}</Card.Text>
<Card.Text className='card-description'>{movie.Description}</Card.Text>
<Link to={`/movies/${movie._id}`}>
<Button className="movieCard-btn" variant="primary">View Movie</Button>
</Link>
</div>
</Card.Body>
</Card>
.card {
margin-bottom: 4rem;
background-color: rgb(247, 247, 247);
}
.cardClass {
max-width: 100%;
height: 400px;
}
.card-image{
width: 100px;
height: 150px;
object-fit: cover;
text-align: center;
}
.card-title {
font-weight: 900;
}
.card-text-body {
display: flex;
flex-direction: column;
min-width: 0;
}
.card-description {
font-size: 13px;
overflow: hidden;
}
.card-body {
font-weight: 400;
}
.movieCard-btn {
width: 100%;
margin-top: 1rem;
}
.btn .btn-primary {
text-align: center!important;
}
.btn-primary {
color: black;
background-color: goldenrod;
border-color: black;
}
.btn-primary:hover {
color: black;
background-color: goldenrod;
border-color: black;
}
a {
text-decoration: none!important;
}
Two approaches here:
First
Limit the description characters, something like:
let description = movie.description;
if (description.length > 120) {
description = description.substring(0, 120);
}
Or
Card must be 100% height to fill remaining space.
Your title set to flex-grow: 1, in order to push everything down below.
Don't forget to set height on description box and also overflow: hidden;
.card {
margin-bottom: 4rem;
background-color: rgb(247, 247, 247);
height: 100%;
}
.card-title {
font-weight: 900;
flex-grow: 1;
}
.card-description {
font-size: 13px;
overflow: hidden;
height: 100px;
}
I am using the react-multi-carousel library in conjuction with the react select library like this:
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
<Carousel
swipeable={false}
draggable={false}
showDots={true}
responsive={responsive}
ssr={true} // means to render carousel on server-side.
infinite={true}
autoPlaySpeed={1000}
keyBoardControl={true}
customTransition="all .5"
transitionDuration={500}
containerClass="carousel-container"
removeArrowOnDeviceType={["tablet", "mobile"]}
dotListClass="custom-dot-list-style"
itemClass="carousel-item-padding-40-px"
centerMode={true}
renderDotsOutside={true}
>
{dmtfs.map((fl) => <div>{(ivrDests.length !== 0) && <StoryCarouselItem key={fl.value} dest_id={fl.value} ivr_dests={ivrDests} options={props.options} />}</div>)}
</Carousel>
StoryCarouselItem rendering:
return (
<div className="StoryCarouselItem">
<div className="StoryCarouselItemCounter">
<div className="StoryCarouselItemCounterText">
{dtmf}
</div>
</div>
<div className="StoryCarouselItemName">
{name}
</div>
<div className="StoryDropdown">
<Select styles={customStyles}
options={props.options}
placeholder={IVRSound}
value={selectedIVROption}
onChange={updateIVR}
/>
</div>
</div>
The code above works fine and looks good before dropping down as you can see below:
Carousel
However, when I click the dropdown, it does not overflow outside of the div and spill into other sections to reveal the whole dropdown like I want it to. Instead, it gets caught within the dropdown and only shows a little bit.
Example:
Carousel 2
Any idea how I can change the styling to accommodate this change?
Here's the relevant styling I have right now:
.StorySelection{
color: #392F5A;
font-family: 'Poppins';
font-weight: 700;
font-size: 20px;
margin-top: 5%;
}
.StoryCarousel{
margin-top: 5%;
padding-bottom: 10%;
padding-left: 5%;
padding-right: 5%;
}
.StoryCarouselBorder{
background: #fff;
border-style: solid;
border-color: #ABABAB;
border-width: 10px;
padding-top: 2.3%;
padding-bottom: 1.3%;
}
.StoryCarouselItem{
height: 20%;
width: 75%;
margin-top: 5%;
background: #392F5A;
}
.StoryCarouselItemCounter {
margin-top: 10%;
height: 60px;
width: 60px;
background-color: #EEC8E0;
border-radius: 50%;
display: inline-block;
}
.StoryCarouselItemCounterText{
color: #fff;
font-size: 24px;
text-align: center;
margin-top: 20%;
}
.StoryCarouselItemName {
color: #fff;
margin-top: 8%;
}
.StoryDropdown{
padding-bottom: 10%;
z-index: 20;
overflow: visible;
}
.react-multi-carousel-dot-list {
position: static !important;
margin-top: 1% !important;
margin-bottom: 0 !important;
}
Use the menuPortalTaget prop to portal the menu. This will allow it to overflow outside of the div. Other than that you may require a custom MenuList component to adjust the listing styling.
I am trying to add text to center of the page. Even if a user try to resize the page, text in the page should be aligned to center. I am close to the solution but missing some position in the code. Here is my code. Any help would be highly appreciated.
html code
<div class="errorMessageContainer">
<div class="errorMessageIcon">
:(
</div>
<div class="errorMessageHeaderContainer">
<div class="errorMessageHeader">
I am trying to center me in a page.
</div>
<div class="errorMessageText">
<span class="errorMessageSubHeader">I want to float.</span>Even if page is restored or forced minimized. <span class="errorContact">Please </span> help me on this.
</div>
</div>
</div>
css code
body {
background-color: #666666;
}
.errorMessageContainer {
width: 620px;
margin: 200px 0 0 300px;
}
.errorMessageIcon {
font-family: Segoe UI Semibold;
font-size: 72px;
color: #29abe0;
display: inline-block;
vertical-align: top;
}
.errorMessageHeaderContainer {
display: inline-block;
width: 500px;
padding: 20px 0 0 30px;
}
.errorMessageHeader {
font-family: Segoe UI Light;
font-size: 28px;
color: #ffffff;
}
.errorMessageSubHeader {
font-weight: bold;
}
.errorMessageText {
font-family: Segoe UI;
font-size: 13px;
color: #ffffff;
width: 450px;
}
.errorContact a {
color: #ffffff;
text-decoration: underline;
}
this will put your message container in center of the page :
.errorMessageContainer {
width: 620px;
height: 100px;
position: fixed;
top: 50%;
left: 50%;
margin-left: -310px;
margin-top: -50px;
}
see the fiddle
Try this:
.errorMessageContainer {
width: 620px;
margin: 200px auto 0;
}
You can use margin: 200px auto 0 auto; for the .errorMessageContainer see fiddle here: http://jsfiddle.net/DSATE/
.errorMessageContainer{
position: absolute;
height: 200px;
width: 400px;
margin: -100px 0 0 -200px;
top: 50%;
left: 50%;
}
The best approach is to set up your display and margins correctly. Do not set values for this otherwise it will fail if the div changes in size. heres an example I made up using a div wrapper and the value display:table-cell
DEMO http://jsfiddle.net/kevinPHPkevin/DSATE/1/
I am working on WP using a template and I'm trying to get a button to float outside the main container. I went through some already posted questions here, but no luck.
I have tried with padding, margin, overflow, etc. The one thing that seems to work is by setting negative margin, but in that case the div is hidden by the main container.
Here's the HTML:
<div class="purchase_options_meta clearfix">
<div class="purchase_options">
<div id="deal_attributes_wrap" class="section ">
</div>
<div class="buy_button gb_ff font_x_large">
</div>
</div>
</div>
And here's the CSS I'm using:
.container.main {
width: 980px;
padding: 20px;
overflow: visible;
}
.purchase_options {
position: relative;
}
.buy_button {
position: absolute;
background: url(http://topgreekgyms.fitnessforum.gr/wp-content/uploads/2012/12/Button12.png) no-repeat center;
color: white;
height: 100px;
width: 375px;
left: -54px;
top: -16px;
}
.button {
background-color: transparent;
color: #ffffff;
}
.button:hover {
background-color: transparent;
color: #cccccc;
}
.buy_button a {
font-weight: bold;
font-size: 29px;
font-family: arial;
padding: 12px;
display: block;
white-space: nowrap;
position: relative;
margin: 15px 0 0 50px;
}
.buy_button a span {
position: absolute;
right: 33px;
padding: 0 5px;
}
And here's a link to the page. My problem is with the top red button at the left.
I would greatly appreciate any help!
Just in case that helps someone in the future:
I had to add this part of CSS in my code:
#deal_single.clearfix:after {
clear: both !important;
}
Just to be more specific '#deal_single' is the page id.