This question already has answers here:
Break long word with CSS
(6 answers)
Closed 2 years ago.
The div element which the text is written for is bounded, but the text still extends the boundaries instead of going to the next line. How do I prevent this by not manually inserting <br>s?
Codepen
document.getElementById('commentContent').innerHTML = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
.div-modal{
width: 100%;
height: 100%;
/* size: 10rem; */
overflow: hidden; /* anything in it will not surpass this div's dimensions */
background-color: rgba(0, 0, 0, 0.7);
position: fixed; /* to make it relative to the browser window*/
top: 0;
display: flex;
/* display: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); */
justify-content: center;
align-items: center;
filter: blur(0px);
}
.div-content{
background-color: #f4f4f4;
width: 600px;
height: 550px;
border-radius: 6px;
text-align: center;
padding: 18px;
padding-top: 13px;
margin-top: 0px;
position: absolute; /* controlling the position of it with top/left/right/bottom to make it fit*/
top: 30px;
}
#commentContent{
margin: 30px;
margin-top: 50px;
margin-right: 50px;
height: 300px;
justify-content: center;
align-items: center;
}
<div class="div-modal" id="commentModal">
<div class="div-content">
<span class="closeBtn" id="closeBtnComment">×</span>
<p id="comments"></p>
<div id="commentContent">
</div>
</div>
</div>
Consider using spaces, or use word-wrap:break-word
document.getElementById('commentContent').innerHTML = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
.div-modal{
width: 100%;
height: 100%;
/* size: 10rem; */
overflow: hidden; /* anything in it will not surpass this div's dimensions */
background-color: rgba(0, 0, 0, 0.7);
position: fixed; /* to make it relative to the browser window*/
top: 0;
display: flex;
/* display: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); */
justify-content: center;
align-items: center;
filter: blur(0px);
}
.div-content{
background-color: #f4f4f4;
width: 600px;
height: 550px;
border-radius: 6px;
text-align: center;
padding: 18px;
padding-top: 13px;
margin-top: 0px;
position: absolute; /* controlling the position of it with top/left/right/bottom to make it fit*/
top: 30px;
}
#commentContent{
margin: 30px;
margin-top: 50px;
margin-right: 50px;
height: 300px;
justify-content: center;
align-items: center;
word-wrap:break-word
}
<div class="div-modal" id="commentModal">
<div class="div-content">
<span class="closeBtn" id="closeBtnComment">×</span>
<p id="comments"></p>
<div id="commentContent">
</div>
</div>
</div>
I solved it like this:
#commentContent{
margin: 30px;
margin-top: 50px;
margin-right: 50px;
height: 300px;
word-break: break-word;
text-align: left;
}
Here, 'word-break' will break the long lines inside the inner div("#commentContent").
• You can use text-align: Left for aligning the inside contents, instead of using:
justify-content: center;
align-items: center;
Related
I am trying to create this simple landing page where there is one row, which contains two <div class="image">, which are container div's which hold the image, the image title, and the image description.
I am trying to get it to be responsive so that when a user on mobile device access the page, the two images will be on one column as opposed to one row. I have started over and over adjusting CSS trying to get what I want, and the closest I have gotten is the example provided in the below snippet.
CSS Stylings I have tried but failed:
#media (min-width: ){} to change max/min size when the screen goes above/below certain pixels
Set a minimum size for the image itself
Tried the same for the container of the image
I couldn't get any of the above to make my landing page responsive.
.container1 {
display: flex;
justify-content: center;
position: relative;
margin-left: 160px;
margin-right: 180px;
}
.container1 p {
text-align: center;
margin: 0;
padding-top: -10px;
}
.container1 h3 {
margin: 10px;
padding: 0;
}
.armycontracts {
width: 100%;
text-align: center;
padding-left: 20px;
}
.armycontracts h3 {
font-size: 15px;
font-weight: bold;
}
.usmccontracts h3 {
font-size: 15px;
font-weight: bold;
}
.usmccontracts {
width: 100%;
margin: 0 auto;
text-align: center;
}
.landinghead {
text-align: center;
font-size: 25px;
font-weight: bold;
}
.projectInfo {
text-align: center;
font-size: 15px;
margin-top: 0px;
}
#contentRow {
margin-top: -50px;
}
.container {
display: flex;
justify-content: center;
position: relative;
}
.ms-core-pageTitle {
display: none;
}
.row-one {
width: 100%;
text-align: center;
padding: 20px;
}
#media (min-width: 400px) {
.row-one {
display: flex;
justify-content: center;
}
}
.image {
position: relative;
width: 100%;
max-width: 400px;
min-width: 200px;
min-height: auto;
margin-left: 40px;
margin-right: 40px;
padding: 20px;
height: auto;
}
.image__img {
display: block;
width: 100%;
height: 100%;
border-radius: 5px;
}
.image__overlay {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
font-family: 'Quicksand', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.25s;
border-radius: 0px;
}
.image__overlay>* {
transform: translateY(20px);
transition: transform 0.25s;
}
.image__overlay:hover {
opacity: 1;
}
.image__overlay:hover>* {
transform: translateY(0);
}
.image__title {
font-size: 2em;
font-weight: bold;
}
.image__description {
font-size: 1.25em;
margin-top: 0.25em;
}
#contentRow {
overflow-y: hidden;
}
#sideNavBox {
DISPLAY: none
}
#contentBox {
margin-left: 0px
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
background-color: #ffffff;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projects Landing Page</title>
</head>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<div id="particles-js"></div>
<body>
<h3 class="landinghead">Projects Landing Page</h3>
<p class="projectInfo">Here you will find a collection of Active/Ongoing Projects</p>
<div class="row-one">
<div class="image">
<a href="https://www.google.com" target="_blank">
<img class="image__img" src="https://api.army.mil/e2/c/images/2021/01/26/4c5cde5d/max1200.jpg" alt="Army" />
<div class="image__overlay">
<div class="image__title">Team 1 Contracts</div>
<p class="image__description">
- Contr. 1 <br>
- Contr. 2 <br>
- Contr. 3 <br>
</p>
</div>
</a>
</div>
<div class="image">
<a href="https://www.google.com" target="_blank">
<img class="image__img" src="https://media.defense.gov/2021/Feb/01/2002574582/-1/-1/0/210124-M-WH885-1032.JPG" alt="Usmc" />
<div class="image__overlay">
<div class="image__title">Team 2 Contracts</div>
<p class="image__description">
- Contr. 1 <br>
- Contr. 2 <br>
- Contr. 3
</p>
</div>
</a>
</div>
</div>
</body>
.row-one{
width: 80%;
text-align: center;
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.image{
flex: 1 45%;
position: relative;
width: 100%;
max-width: 400px;
min-width: 200px;
margin-left: 40px;
margin-right: 40px;
padding: 20px;
height: auto;
}
This works. JSFiddle
You can use 'flex-direction' to achieve what you want.
This page has pretty good information about it.
https://css-tricks.com/almanac/properties/f/flex-direction/
Apply a flex-direction to your 'row-image' class. Set it to 'column' when you want your elements to stack, set it to 'row' when the elements should flow in a line.
I have this piece of code that has the profile card in the middle of screen regardless what the screen size is. It often appears too small for any type of screen. How can I position the profile card to almost fill the screen?
#import url("https://fonts.googleapis.com/css?family=Montserrat");
#import url("https://fonts.googleapis.com/css?family=Open+Sans");
body, html {
width: 100%;
height: 100%;
font-family: "Montserrat";
color: #303633;
background-color: #C8D9E7;
overflow: hidden;
font-size: 1em;
font-style: normal;
-webkit-appearance: none;
outline: none;
text-rendering: geometricPrecision;
perspective: 1000px;
}
a {
position: relative;
display: inline-block;
padding: 12px 35px;
margin: 0 0 20px;
background-color: #e1306c;
color: white;
border-radius: 5px;
transition: all 0.3s;
letter-spacing: 2px;
font-size: 0.85em;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
box-shadow: 0 2px 30px rgba(225, 48, 108, 0.4);
}
a:hover {
background-color: #e75d8c;
}
.content-wrapper {
width: 300px;
max-height: 530px;
border-radius: 5px;
box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
background: #fbfcee;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow-y: scroll;
overflow-x: hidden;
text-align: center;
}
.content-wrapper .img {
width: 302px;
height: 350px;
position: relative;
overflow: hidden;
}
.content-wrapper img {
/*
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
object-fit: contain;
*/
width: 100%;
height: 100%;
object-fit: cover;
}
.profile--info {
text-align: left;
padding-top: 10px;
}
.profile--info span {
font-family: "Open Sans", "Adobe Blank";
z-index: 1;
left: 15px;
top: 15px;
font-size: 0.575em;
color: rgba(84, 95, 89, 0.75);
display: block;
}
.profile--info span.username {
font-weight: 700;
font-style: normal;
font-size: 1em;
color: black;
}
.profile--info span.userquote {
margin-top: -15px;
font-size: 0.7em;
color: rgba(84, 95, 89, 0.75);
}
.user {
background-color: white;
width: 100%;
margin-top: 0;
max-height: 600px;
position: relative;
padding: 0 30px;
box-sizing: border-box;
}
.user-social-wrapper {
display: flex;
justify-content: space-around;
position: relative;
padding: 5px 0;
padding-bottom: 15px;
}
.user-social-wrapper .user-info {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-weight: 200;
flex: 1 1;
}
.user-social-wrapper .user-info span:first-child {
font-size: 1.25em;
}
.user-social-wrapper .user-info span:last-child {
font-size: 0.75em;
color: rgba(84, 95, 89, 0.75);
}
.shots {
width: calc(100% + 60px);
margin-left: -30px;
position: relative;
display: flex;
flex-wrap: wrap;
}
.shots .shot {
overflow: hidden;
position: relative;
width: 100px;
height: 100px;
}
.shots .shot img {
transition: all 0.255s;
width: 102px;
}
<div class="content-wrapper">
<div class="user">
<div class="shots">
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/fcc951ea7fb4756657e6a7d042bf28f3/5CB41E95/t51.2885-15/e35/44305549_353634695394272_4379074065337998962_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxMjA0MDQ0OTAyMTY1Njc4Mg%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/cc7f49ae37334eff4a2e844ffbebaa21/5CB841C6/t51.2885-15/e35/41336764_2309590515939856_3014107714986624367_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg3Nzg1Mjk1Njk0NDkwNTAwMg%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/d8b9d0e098128aad6eac6c39c19439cb/5CD059B2/t51.2885-15/e35/46699770_789255231412285_7247415646102729111_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkyMjcyMTIwOTQyODk0Mjc5NQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/a0efc75790b1d1a20306b4b9ee8c0d31/5C9D1D98/t51.2885-15/e35/42593422_668756993510074_548785136612309253_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4MjI5MDk5MzYyODEwOTk0Mw%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/fa49d4e551525ac7a288784e0866f7cf/5CD53EA6/t51.2885-15/e35/44442144_2039456152959656_8454847146314760657_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxMTEwMTUwMTEzOTEzMzk4MA%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/845ad7174d012da1d1b62ac375d2b466/5CD46203/t51.2885-15/e35/43816352_986229031581012_2433270463824730761_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg5NTQwODg2MDE5NjA5OTA1NQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/7d4877bc850a66d5aeb539c5510add7e/5C9BD445/t51.2885-15/e35/43621864_2280294755587222_1177965970195440793_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4NjY0MTkwODQ0MTE4MDcyOQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/5252d016bae25d4ef4bca9e0c0a0306b/5CCFD742/t51.2885-15/e35/42927631_265838184102659_8658034749053379565_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxNjkzMDk2MDM3NTMwNTUzOA%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/880acf9db110584cb44b3b69ad0a366f/5CB3E901/t51.2885-15/e35/41866047_1814622118587789_2219135764187038727_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4NDI5OTEwNzU1ODU4OTEzMg%3D%3D.2"></div>
</div>
<div class="profile--info"><span class="username">ʏɪɴʀᴜɪ ᴅᴇɴɢ</span><span>☺#bobby_dyr</span><br/><span class="userquote">In 2018, ʏɪɴʀᴜɪ ᴅᴇɴɢ received 164❤️, 7✉️ per post by average, and a total of</span></div>
<div class="user-social-wrapper">
<div class="user-info user-posts"><span>104</span><span>Shots</span></div>
<div class="user-info user-followers"><span>16,964</span><span>Likes</span></div>
<div class="user-info user-following"><span>643</span><span>Comments</span></div>
</div>
</div>
I have this piece of code that has the profile card in the middle of screen regardless what the screen size is. It often appears too small for any type of screen. How can I position the profile card to almost fill the screen?
Basically what should I do to adjust it from (too small)to this (ideal)
Just change it:
.shots .shot {
overflow: hidden;
position: relative;
width: 33%; // <-- change it
height: 100px;
flex-grow: 1; // <-- add
}
I would use media queries and target the classes you want to amend on the different screen sizes to make it fit as you need. Some useful links:
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
In your case, you would need to amend the width of the card to 100% on mobile to achieve the design on your screenshot. Hope that makes sense! :)
I would like to layer multiple DIVs on top of one another while using flexbox to vertically and horizontally center them both.
In the example below, I would like both .whitebox and .bluebox to be vertically and horizontally centered inside of the container, overlapping one another. Currently .whitebox is positioned with absolute position. Is this possible?
.container {
height: 16px;
width: 16px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.bluebox {
height: 16px;
width: 16px;
background-color: #0073FF;
border-radius: 4px;
position: absolute;
top: 0;
left: 0;
}
.whitebox {
height: 8px;
width: 8px;
background-color: white;
border-radius: 4px;
position: absolute;
top: 0;
left: 0;
}
<div class="container">
<div class="bluebox"></div>
<div class="whitebox"></div>
</div>
No need to position the top and left. Just applying absolute positioning is enough because that "pops" the elements into their own layers, so they can be placed at will without affecting other elements in that layer. Once you do that, the align-items and justify-content will do their jobs.
.container {
height: 16px;
width: 16px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.bluebox {
height: 16px;
width: 16px;
background-color: #0073FF;
border-radius: 4px;
position: absolute;
}
.whitebox {
height: 8px;
width: 8px;
background-color: white;
border-radius: 4px;
position: absolute;
}
.border {
height: 16px;
width: 16px;
border-radius: 4px;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
position: absolute;
top: 0;
left: 0;
}
<div class="container">
<div class="bluebox"></div>
<div class="whitebox"></div>
<div class="border"></div>
</div>
You can just remove the offsets like below, it will get the small box centered with the existing rules you set on everything else.
.whitebox {
...
/* top: 0; */
/* left: 0; */
}
Edit: The above works in Chrome, but doesn't seem to be working in Firefox.
In fact, I would simplify the entire code as follows. It should work everywhere where flexbox is supported.
.bluebox {
display: flex;
align-items: center;
justify-content: center;
height: 16px;
width: 16px;
background-color: #0073FF;
border-radius: 4px;
}
.whitebox {
height: 8px;
width: 8px;
background-color: white;
border-radius: 4px;
}
<div class="bluebox">
<div class="whitebox"></div>
</div>
I would rather use the usual method for centering: The container gets position: relative and defined width and height, the elements to-be-centered inside the container get this CSS:
.centered-element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Plus z-index values for the order in which they are above each other, and possibly opacity so they all can be seen simultaneously...
So in your example, that would be
.container {
height: 16px;
width: 16px;
background-color: white;
border-radius: 4px;
position: relative;
}
.bluebox {
height: 16px;
width: 16px;
background-color: #0073FF;
border-radius: 4px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.whitebox {
height: 8px;
width: 8px;
background-color: white;
border-radius: 4px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<div class="bluebox"></div>
<div class="whitebox"></div>
</div>
The flexbox properties are superfluous when you do it this way.
Set your divs up like this:
<div class="parent">
<div class="wrapper">
<div class="whitebox"></div>
<div class="bluebox"></div>
</div>
</div>
Then apply this css:
.parent{
display: flex;
align-items: center;
justify-content: center;
}
.wrapper{
position:relative
}
.whitebox, .bluebox{
position:absolute;
top:0;
left:0;
}
You can use margin-left and margin-top because you know the height and width of your element.
Explanation:
Move your element from top 50% and from left 50%.
Move your element 4px from right and 4px from bottom.
.container {
height: 16px;
width: 16px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.bluebox {
height: 16px;
width: 16px;
background-color: #0073FF;
border-radius: 4px;
position: absolute;
top: 0;
left: 0;
}
.whitebox {
height: 8px;
width: 8px;
background-color: white;
border-radius: 4px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -4px;
margin-top: -4px
}
.border {
height: 16px;
width: 16px;
border-radius: 4px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
position: absolute;
top: 0;
left: 0;
}
<div class="container">
<div class="bluebox"></div>
<div class="whitebox"></div>
<div class="border"></div>
</div>
.q-items-container .q-item-info {
float: left;
position: relative;
width: 30.3rem;
height: 40rem;
margin: 2rem;
background: #ffffff;
cursor: pointer;
/* Add shadows to create the "card" effect */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
}
.q-items-container .q-item-info .q-food-img {
width: 100%;
height: 55%;
}
.q-items-container .q-item-info .q-food-info {
position: absolute;
top: 20px;
left: 20px;
z-index: 10000;
color: white;
}
.q-items-container .q-item-info .q-stars {
background-color: #2eb82e;
padding: 2px;
margin-top: 3px;
border-radius: 3px;
}
.q-items-container .q-item-info .q-separator {
width: 100%;
height: 7px;
background-color: #6c41a6;
}
.q-items-container .q-item-info .comp-container {
width: 100%;
height: 8rem;
position: absolute;
text-align: center;
top: 275px;
/* background-color:black; */
}
.q-items-container .q-item-info .comp-container .q-review {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
.q-items-container .q-item-info .comp-container .q-review .review {
width: 48%;
/* margin:auto; */
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.q-items-container .q-item-info .comp-container .q-review .sep {
width: 4%;
display: flex;
padding: 5px 0 5px 0;
justify-content: center;
align-items: center;
}
.q-items-container .q-item-info .comp-container .q-review .price {
width: 48%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.q-item-info .comp-container .q-company {
width: 8rem;
height: 8rem;
border: 0.8rem solid #6c41a6;
-webkit-border-radius: 2rem;
border-radius: 4rem;
margin: auto;
}
.q-items-container .q-item-info .q-order-now {
position: absolute;
bottom: 0;
width: 100%;
padding: 1rem;
margin-bottom: 0;
height: 4rem;
background: #6c41a6;
color: #fff;
font-size: 1.4rem;
text-align: center;
}
<div class="q-items-container">
<div class="q-item-info">
<div class="q-food-info">
<div>xyz</div>
<div>yzx</div>
</div>
<img style="background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
rgba(0,0,0,0.55);" class="q-food-img" src="https://static.pexels.com/photos/8313/food-eating-potatoes-beer-8313.jpg">
<div class="q-separator"></div>
<div class="comp-container">
<img class="q-company" src="https://n6-img-fp.akamaized.net/free-icon/telegram-logo_318-102687.jpg?size=338c&ext=jpg">
<div class="q-review">
<div class="review">
<span style="color:#4d4d49;">24</span>
<span style="color:#898989;">Reviews</span>
</div>
<div class="sep">
<div style="width:1px;height:100%;background-color:#d7d7d7;"></div>
</div>
<div class="price">
<span style="color:#4d4d49;">$4.99</span>
<span style="color:#898989;">Avg.Price</span>
</div>
<div>
</div>
</div>
</div>
<div class="q-order-now" ng-click="goToListingPage(cart)">
<div ng-show="cart.isOpen">Order Now <span>→</span></div>
<div ng-show="!cart.isOpen && !cart.isClosed">Opens at 8</div>
<div ng-show="cart.isClosed">Closed</div>
</div>
</div>
Now i want to achieve overlay effect like
I tried with linear background gradient , but it did not work out. One thing I want to mention here is, my image is dynamically set. How can I achieve that?
Try to apply the following css, then I believe you'll be able to apply it to the right element in code.
.q-items-container .q-item-info .q-food-info {
background-image: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,1));
width: 100%;
}
Here's my setup, I'm using the library interact.js with vuejs.
Here's my dilemma.
I have a container absolutely positioned on the bottom. Within that container I have another container that holds a list of elements which is cropped with overflow-y: scroll.
Within that .list container I have .item divs which hold the draggable .icon element. The .item has a position: relative.
Because I'm using vue it's not recommended to make changes to the dom directly, so on the dragstart event I create a "clone" .icon with a position of absolute using a vue conditional and drag that around instead.
However because of my aforementioned setup I cannot drag outside of the .list container due to cropping. If I remove the position: relative on the .item div, then the cloned .icon will not behave accordingly due to the scrollTop.
It's far too much code to post here, so I have a working example at codepen.
https://codepen.io/helixion/pen/qPGxPK
body {
margin: 0;
font-family: "roboto", sans-serif;
}
header {
width: 100%;
height: 70px;
background-color: #232323;
position: relative;
}
.container {
width: 100%;
height: 100vh;
display: flex;
}
#main {
position: relative;
min-height: 100%;
height: 100%;
width: calc(100% - 50px);
}
#ctrl-menu {
position: relative;
display: -webkit-flex;
display: flex;
flex-direction: column;
align-items: center;
width: 50px;
background-color: #1d1d1d;
.ctrl {
margin-top: 5px;
border: 2px solid;
padding: 5px;
width: 20px;
height: 20px;
border-radius: 4px;
color: #f1f1f1;
position: relative;
text-align: center;
&:first-child {
margin-top: 30px;
}
&:hover {
color: #ff6961;
.tooltip {
display: block;
color: #f1f1f1;
}
}
.tooltip {
display: none;
background-color: rgba(22, 22, 22, 0.5);
padding: 2px;
position: absolute;
top: 5px;
width: 150px;
left: 48px;
font-size: 12px;
border-radius: 4px;
z-index: 1003;
}
}
}
#navbar {
display: -webkit-flex;
display: flex;
align-items: center;
.logo {
position: relative;
z-index: 1000;
margin-left: 8px;
img {
width: 100%;
height: 100%;
}
}
}
.bottom-menu {
position: absolute;
bottom: 0;
background-color: #232323;
width: 100%;
height: 500px;
z-index: 1001;
#resizer {
height: 17px;
background-color: #1d1d1d;
cursor: ns-resize;
touch-action: none;
}
}
.list {
display: -webkit-flex;
display: flex;
background-color: #222;
width: 100%;
height: 100%;
flex-direction: column;
overflow-y: scroll;
.item {
display: flex;
align-items: center;
width: 100%;
// position: relative;
border-bottom: 1px solid #1d1d1d;
box-shadow: inset 0 1px 1px rgba(55, 55, 55, 0.5),
0 1px 1px rgba(55, 55, 55, 0.5);
min-height: 70px;
.details {
flex: 0 0 calc(100% - 180px);
.name {
color: #cdaf7c;
-webkit-margin-before: unset;
-webkit-margin-after: unset;
}
.desc {
-webkit-margin-before: 0.5em;
-webkit-margin-after: unset;
width: 80%;
font-size: 12px;
color: #f1f1f1;
}
}
.source {
display: flex;
justify-content: flex-end;
align-items: center;
text-align: right;
flex-basis: 100px;
flex-direction: column;
margin-right: 10px;
.name {
color: #cdaf7c;
font-size: 14px;
}
.type {
color: #f1f1f1;
font-size: 12px;
}
}
}
}
.icon {
width: 70px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
touch-action: none;
&.dragging {
position: absolute;
z-index: 1100;
opacity: 0.5;
}
img {
width: 60px;
height: 60px;
}
}
With position relative on the .item turned off everything works fine at scrollTop 0, but once I start scrolling the problems start to happen. If I turn position: relative back on the .item element, I can't drag the "clone" .icon outside of the .list container.
Any suggestions or advice to fix it up so where I can drag the absolute div (.icon which is created by vuejs on a conditional) outside of .list (which has overflow-y:scroll) would be appreciated. Thanks.