I created cart modal, when i add multiple items to it, the style looks weird because the firs item cant see in the modal. probably i have some style issue. i am gonna share the code of my modal and styles. The screenshot i took probably has 4 product but shows three
<div onClick={this.props.onClick} className={modalStyles.darkBg}/>
<div className={modalStyles.centered}>
<div className={modalStyles.modal}>
<p className={modalStyles.heading}>
My bags, {this.props.cart.length} items
</p>
{this.props.cart.map((item, index) => (
<div className={modalStyles.modalBody} key={item.id}>
<div className={modalStyles.row1}>
<div className={modalStyles.row2Child}>
<button type="button"onClick={()=> {this.props.addToCartWithQty(item)}}>+
</button>
<p>{item.qty}</p>
<button type="button" onClick={()=> {this.props.removeFromCart(index)}}>-
</button>
</div>
<img src={item.gallery[0]} alt="Avatar"/>
</div>
</div>
))}
</div>
</div>
Styles:
.darkBg {
position: fixed;
background-color: rgba(0, 0, 0, 0.2);
width: 100vw;
height: 100vh;
z-index: 10;
top: 0;
left: 0;
}
.centered {
position: absolute;
top: 35%;
right: 0;
transform: translate(-50%, -50%);
z-index: 10;
}
.modal {
width: 350px;
height: auto;
background: white;
color: white;
z-index: 10;
box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.04);
}
.heading {
margin: 0;
padding: 10px;
color: #2c3e50;
font-weight: 500;
font-size: 18px;
text-align: left;
}
.modalBody {
display: flex;
flex-direction: column;
padding: 10px;
font-size: 14px;
color: #2c3e50;
gap: 10px;
}
On .modal class You need to add max-height instead of height and overflow-y should be set to scroll to be able to scroll not visible elements.
max-height: 80vh;
overflow-y: scroll;
you can wrap items in 1 div and give overflow-y: scroll; it will make that div scrollable with all items in it.
Related
I have set up a carousel with a display flex:1 the idea being to make it take up as much height as available to it which works as intended(can be tested by setting a fixed height for the div(.image-iframeContainer) contained in it). but whenever I try and set this div to be 100% of the carousel height instead of the content scaling to fit the size of the carousel, the carousel will instead scale to the 100% of the size of the content(test this by stretching the aspect ratio). how do I fix/stop this happening?
reactjs
<div className="Cards">
<Carousel
showThumbs={false}
infiniteLoop={true}
swipeable={false}
dynamicHeight={false}
>
<div>
<div className="image-iframeContainer">
<img src={IMG} />
</div>
</div>
<div>
<div className="image-iframeContainer">
<img src={IMG} />
</div>
</div>
<div>
<div className="image-iframeContainer">
<img src={IMG} />
</div>
</div>
</Carousel>
<h1>{Projects.workName}</h1>
{Projects.workTech.map((Tech, index) => {
return <p>Technology used: {Tech}</p>;
})}
<p>{Projects.workDescription}</p>
</div>
Sass
.Cards {
position: absolute;
width: 50%;
height: 80%;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.2);
margin-left: auto;
margin-right: auto;
margin-top: 10%;
left: 0;
right: 0;
border-radius: 7px;
overflow: hidden;
background: #7510f7;
display: flex;
flex-direction: column;
.image-iframeContainer {
display: flex;
width: 100%;
//setting a fixed height for this div allows for flex scaling of the carousel
height: 400px;
//height: 100%;
background: greenyellow;
overflow: hidden;
img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: cover;
background-repeat: no-repeat;
margin: auto;
}
iframe {
position: absolute;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100px;
border: 0;
}
}
.carousel-root{
flex:1;
}
.carousel {
z-index: 0;
}
.carousel, .slider-wrapper, .slider {
height: 100%;
}
.slide{
display: flex;
justify-content: center;
}
.carousel.carousel-slider {
.control-arrow {
padding: 15%;
opacity: 0%;
}
}
}
sandbox link
https://codesandbox.io/s/sleepy-sunset-jqjst?file=/src/styles.scss:478-500
To avoid confusion these are swipe cards layered on top of each other hence the absolute positioning, in my actual project images are injected dynamically I do not want to crop or stretch images this is why I've picked this implementation with borders the containing div will give back colour to the bezels around the picture.
I've tried putting together a simple scenario with css for a card style layout.
It looks ok on a 22 inch monitor, but when viewed on my samsung tv 1920x1080 resolution it does not look good.
It looks like the border has a white gap in it caused by anti-aliasing.
html
<main>
<div class="card-holder">
<div class="card-header">
<div class="card-icon">
<span class="icon icon-bell"></span>
</div>
<span class="card-title">Title</span>
</div>
<div class="card-about">
<span>Some about text.</span>
</div>
</div>
</main>
css
.card-holder {
border-radius: 10px 10px 0px 0px;
border: 3px solid rgb(0, 0, 0);
border-spacing: 0;
overflow: hidden;
width: 300px;
}
.card-header {
display: flex;
align-items: center;
padding: 5px;
background-color: rgb(0, 64, 255);
color: #fff;
overflow: hidden;
}
.card-title {
display: inline-block;
flex-grow: 1;
text-align: center;
}
.card-about {
display: block;
}
.card-icon {
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background-color: white;
overflow: hidden;
height: 64px;
width: 64px;
}
.icon {
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
height: 48px;
width: 48px;
vertical-align: middle;
}
.icon-bell {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bell-black.svg);
}
When I zoom the browser to 80% then a white line appears at the right hand side of the card.
Is there a recommended approach to make this scenario work nicely across different zoom levels and monitor resolutions?
I've been tearing my hair out.
Update
I made a codepen here
You're mixing relative and fixed units. Things like em and % will be different based on the browser, device, and zoom. Try using all relative or all fixed so the browser isn't trying to interpret them differently.
Example:
border-radius: 10px 10px 0 0;
vs
border-radius: 1em 1em 0px 0px;
I have a page that will display an image (just a green div placeholder for now). I want to slide a div in from the right which will be a comments box and keep the image centred in the remaining space. If the image is too large for this remaining space I want to allow the user to scroll over the image horizontally.
I have this:
var showingComments = false;
$("#clickme").click(function() {
if (showingComments == false) {
showingComments = true;
$(this).parent().animate({
right: '0px'
}, {
queue: false,
duration: 500
});
} else {
showingComments = false;
$(this).parent().animate({
right: '-150px'
}, {
queue: false,
duration: 500
});
}
});
#Picture_container {
width: auto;
background-color: yellow;
overflow-x: auto;
}
#thePicture {
height: 300px;
width: 400px;
/* this will change when the page loads */
background-color: green;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
}
#commentsBox {
background: #00FFFF;
position: absolute;
width: 150px;
height: 400px;
right: -150px;
top: 10px;
}
#clickme {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 400px;
background: #5F9EA0;
text-align: center;
transform: rotate(90deg);
transform-origin: left top 0;
}
#comments {
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='Picture_container'>
picture container
<div id='thePicture'>
the picture goes here
</div>
</div>
<div id="commentsBox">
<div id="comments">
I am a sticky-out comments box
</div>
<div id="clickme">
click me!
</div>
</div>
Example: https://jsfiddle.net/fwwfe2q6/
As you can see the comments box pops out but it overlaps the image holder div instead of making it move left. Can you suggest how to centre the green div (representing the image) in both the expanded and collapsed state of the comments box, and have the green div horizontally scrollable when it is too large to fit the window along with the expanded comments box?
You may use flex and rethink structure:
body {margin:0;}
#Picture_container {
display: flex;
flex-wrap: wrap;
height: 100vh;
max-width: 700px;
transition: 0.5s;
margin: auto;
background: yellow;
text-align: center;
}
#thePicture {
display: flex;
flex-wrap: wrap;
flex: 1;
overflow: auto;
}
#thePicture img {
flex-shrink: 0;
margin: auto;
max-height: 75vh;
}
p, [for="mw100"] {
width: 100%;
}
p {
background: turquoise;
padding: 1em;
margin: 0;
}
#commentsBox {
display: flex;
background: tomato;
overflow: hidden;
}
#test,
#full,
#mw100 {
position: absolute;
right: 100%;
}
#commentsBox label {
display: block;
background: tomato;
width: 2em;
margin: 1em 0 0 0em;
white-space: nowrap;
transform: rotate(90deg);
cursor: pointer;
}
#commentsBox label:before {
content: '';
position: absolute;
width: 2em;
height: 100vh;
display: block;
}
#clickme {
background: purple;
width: 200px;
margin-right: -200px;
transition: 0.1s;
}
label {
font-size: 1.2em;
font-weight: bold;
color: white;
text-shadow: 0 0 2px black;
}
#test:checked~#clickme {
margin-right: 0;
}
#full:checked~#Picture_container {
max-width: 100%;
}
#mw100:checked~img {
max-width: 95%;
}
<input type="checkbox" id="full" />
<div id='Picture_container'>
<p>picture container <label for="full">Toggle me full or 700px width</label></p>
<div id='thePicture'>
<input id="mw100" type="checkbox" /><label for="mw100">toggle image overflow</label>
<img src="http://dummyimage.com/1800x1000/00ff00&text=the picture goes here" />
</div>
<div id="commentsBox">
<input type="checkbox" id="test" />
<div id="comments">
<label for="test">To show comments- click me!</label>
</div>
<div id="clickme">
Shown comments here.
</div>
</div>
Snippet propose a few option depending on expected result.
full width or max-width on container
container holding image overflowing or image with max-width
labels and imputs only for demo, use js for the slidding box .
a tutorial/reminder about flex i find usefull : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I have a set of 3 promo-boxes
.promo-boxes .promo-box {
width: 49.5% !important;
margin-right: 0.3% !important;
margin-top: 1% !important;
position: relative !important;
float: none !important;
}
.promo-boxes .promo-box.second,
.promo-boxes .promo-box.last {
margin-right: 0 !important;
}
So as you can see I've tried using position and float as well as other text-left etc to no success.
I want these to be centered anything i'm missing?
you can solve this using flexbox.
.promo-boxes {
width: 100%;
display: flex;
justify-content: space-around;
background-color:white;
margin-top: 20px;
border: solid 1px #ccc;
}
.spacebetween {
justify-content: space-between;
}
.promo-box {
width: 100px;
height: 50px;
border: solid 1px #ccc;
background-color:red;
}
<div class="promo-boxes">
<div class="promo-box">
promo box
</div>
<div class="promo-box">
promo box
</div>
<div class="promo-box">
promo box
</div>
</div>
<div class="promo-boxes spacebetween">
<div class="promo-box">
promo box
</div>
<div class="promo-box">
promo box
</div>
<div class="promo-box">
promo box
</div>
</div>
Try something like this:
div {
width: 100px;
height: 100px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
try:
.promo-boxes .promo-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
You may need to define a width, unless you want it to be as big as its content. Also, don't use !important unless you have no other choice, whatsoever!
.c-container {
background-color: coral;
display: flex;
margin: 0 auto;
width: 90%;
}
.c-column {
position: relative;
}
.c-column--left, .c-column--right {
flex: 0 0 auto;
width: 344px;
max-width: 344px;
min-width: 344px;
}
.c-column--left {
order: -1;
}
.c-column--center {
flex: 1 1 auto;
display: flex;
flex-direction: column;
background-color: #ff5213;
}
.c-topic__header, .c-topic__footer {
padding: 24px;
background-color: #e93f00;
}
.c-topic__body {
position: relative;
}
.c-message {
padding: 24px;
position: relative;
}
.c-message__list {
padding: 0;
position: relative;
display: flex;
flex-direction: column;
list-style: none;
}
.c-message__item {
background-color: skyblue;
border-radius: 3px;
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
padding: 24px;
min-width: 0%;
margin-bottom: 5px;
flex: 1 1 auto;
}
.c-message__item--right {
align-self: flex-end;
margin-left: 10%;
}
.c-message__item--left {
align-self: flex-start;
margin-right: 10%;
}
.o-box {
padding: 24px;
}
.u-relative {
position: relative;
}
<div class='c-container'>
<div class='c-column c-column--center'>
<div class='c-topic__header'>
Header: flex-child
</div>
<div class='c-topic__body'>
<div class='c-message'>
<ul class='c-message__list'>
<li class='c-message__item c-message__item--right'>
Hi, I'm a message placed on the right side and I'm quite wide
</li>
<li class='c-message__item c-message__item--left'>
How swell. I'm on the left and a bit shorter.
</li>
</ul>
</div>
</div>
<div class='c-topic__footer'>
Footer: flex-child
</div>
</div>
<div class='c-column c-column--left'>
<div class='o-box u-relative'>
<span>Left column: 344px</span>
</div>
</div>
<div class='c-column c-column--right'>
<div class='o-box u-relative'>
<span>Right Column: 344px</span>
</div>
</div>
</div>
Recently I've been working on implementing flexbox into a webapp interface. One page consists of three columns, with the left and right column having a fixed width, and the center being flexible.
The center column in turn consists of 3 flexed children. A fixed height header and footer, with a flexible center. This column-center (hence CC) gets a vertical scrollbar if the content it holds overflows.
Inside the CC, there is a wrapper with a padding. This is there because javascript doesn't handle the scrolling well with the padding being on the CC item itself.
The problem is that in IE10 the text inside the blue blocks doesn't wrap when the viewport gets smaller. Safari, Chrome and Firefox all don't have this issue. Does anyone know how to get IE10 to behave like the rest?
An example of the problem can be found here:
http://codepen.io/csssavvy/pen/qOgjmN
Tl;dr. IE10 flexbox text overflow not working. Need help. Code example: http://codepen.io/csssavvy/pen/qOgjmN
Thanks for the answers. Fixed this issue this afternoon:
Changes on .c-message__item:
Add max-width: 90%; Remove min-width: 0%;.
Changes on .c-column--center:
Add min-width: 0%;
See the codepen for the updated version: codepen.io/csssavvy/pen/qOgjmN