I am designing some cards in React. The sizing of different elements needs to be dynamic as the title and description can vary in length.
The basic structure of the card is (vertically) Title, info, description
<div className={styles.sample}>
<div className={styles.textContainer}>
<h1 className={styles.title}>{title}</h1>
<div className={styles.info}>
<span>
By: {author}
</span>
</div>
<div className={styles.description}>
<span>{description}</span>
</div>
</div>
<ButtonPrimary
classes={styles.button}
onClick={() => function}
text="READ ARTICLE"
/>
</div>
Both my .title and .description css class have overflow: hidden. This is always causing the title block to hide content before the description block.
What I want is for my title block to occupy at most 2 lines of content before hiding any extra content. Sometime the title will be short and in these cases the title should only occupy one line.
My scss
.sample {
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
.textContainer {
display: flex;
flex-direction: column;
overflow-y: hidden;
margin-bottom: 25px;
.title {
#include font-rubik(26px, $black, 700);
line-height: 30px;
vertical-align: top;
height: 60px;
// min-height: 30px;
height: fit-content;
overflow:hidden;
white-space: normal;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
}
.info {
#include font-rubik(12px, #B3B3B3, 300);
margin-bottom: 11px
}
.description {
#include font-rubik(14px, $black, 400);
overflow: hidden;
}
}
}
Related
I have these three icons, could be more, with tooltips which have the position: absolute;, and the whole icon part is aligned to the right. When hovering the icon, a tooltip appears, and in the case of the short text, it looks fine. However there is a problem, especially with the last tooltip, if there is a longer text.
It overflows to the right or just appears in a bad way, and what I'm trying to achieve is that when there is a long text, the tooltip should shift the position somehow to the left, so it's entirely visible... It would be great if this could be done in CSS only, but any working solution would be great. Thanks for any tips.
.container {
background: darkgrey;
padding: 20px 20px 50px;
display: flex;
width: 400px;
justify-content: flex-end;
}
.icon {
font-size: 20px;
color: white;
margin-right: 20px;
position: relative;
display: flex;
justify-content: center;
}
.container .icon:hover .tooltip {
visibility: visible;
}
.tooltip {
color: #fff;
position: absolute;
visibility: hidden;
font-size: 12px;
top: 30px;
min-width: 200px;
text-align: center;
}
<div class="container">
ICON <span class="tooltip">text1</span>
ICON <span class="tooltip">a bit longer tooltip text</span>
ICON <span class="tooltip">very long tooltip text goes here, and it should not overflow to the side</span>
</div>
I think you can use element.scrollWidth | element.clientWidth and element.getBoundingClientRect() to calculate if the tooltips go out of the window but i makes a lot of calculation for a simple probleme
Maybe you can juste create a class tooltip-left where element are moved to the right :
.container {
background: darkgrey;
padding: 20px 20px 50px;
display: flex;
width: 400px;
justify-content: flex-end;
}
.icon {
font-size: 20px;
color: white;
margin-right: 20px;
position: relative;
display: flex;
justify-content: center;
}
.container .icon:hover .tooltip {
visibility: visible;
}
.tooltip {
color: #fff;
position: absolute;
visibility: hidden;
font-size: 12px;
top: 30px;
min-width: 200px;
text-align: center;
}
.tooltip-left {
right:25%;
text-align: right;
}
<div class="container">
ICON <span class="tooltip">text1</span>
ICON <span class="tooltip">a bit longer tooltip text</span>
ICON <span class="tooltip tooltip-left">very long tooltip text goes here, and it should not overflow to the side</span>
</div>
I have a parent component who has three child components. The display is set to flex and flex-direction to row.
here is the code
JS part:
<div className='Container'>
<div className='Text1'>26 Dec 22</div>
<div className='Text2'>Lorem ipsum dolor sit amet</div>
<div className='Text3'>128K</div>
</div>
CSS part:
.Container{
display: flex;
flex-direction: row;
background-color: white;
padding: 20px 20px 20px 20px;
justify-content: space-evenly;
gap:10px;
}
.Text1{
width: 100px;
white-space: nowrap;
}
.Text2{
text-align: left;
width: 400px;
}
.Text3{
width: 100px;
}
Here is the image of the output:
When I change from desktop view to mobile view I want my result to be like this
As one can see only the middle component text was eliminated and ... was added.
In my above code when I change the view I get the result as
Please guide me on how to decrease the width of only the middle component and also add ... when part of the middle component disappears.
In your case, you need the text-overflow: ellipsis; CSS property and use it on the middle element.
The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('…'), or display a custom string. MDN documentation
.Container {
display: flex;
flex-direction: row;
background-color: white;
padding: 20px 20px 20px 20px;
justify-content: space-evenly;
gap: 10px;
}
.Text1 {
width: 100px;
white-space: nowrap;
}
.Text2 {
text-align: left;
width: 400px;
text-overflow: ellipsis; /* new line */
overflow: hidden; /* new line */
white-space: nowrap; /* new line */
}
.Text3 {
width: 100px;
}
<div class="Container">
<div class="Text1">26 Dec 22</div>
<div class="Text2">Lorem ipsum dolor sit amet</div>
<div class="Text3">128K</div>
</div>
I've been stuck on this problem for hours.
This is my Header.js
<div className="navbar-inner">
<h2>Text1</h2>
<h3>Text2</h3>
</div>
This is my Header.css file:
.navbar-inner {
margin: 0 auto;
color: #fff;
display: flex;
width: 87vw;
background-color: red;
justify-content: space-between;
vertical-align: sub;
}
This is what is shown:
I would like Text1 and Text2 to be aligned on the same y-line:
You can give flex on h2 and h3 tag.
h2, h3 {
display: flex;
align-items: center;
}
align-items is what you need for vertically aligning text when using flex box.
I also removed the margin from the h2 and h3 elements (it is there by default).
.navbar-inner {
margin: 0 auto;
color: #fff;
display: flex;
width: 87vw;
background-color: red;
justify-content: space-between;
/* New styles */
align-items: flex-end;
padding: 5px;
}
h2, h3 {
margin: 0;
}
You will probably need to adjust the padding to align it how you actually want it in terms of how close the text should be to the edges.
So,I don't know how to make divs overlap eachother in such a way and I'm curious to find out if it's even possible. If it is, is it also possible to make something like that responsive too, using bootstrap or some other library? If yes, wouldn't it be needed for the divs to completely change configuration so the content still makes sense? (like in the pic below)
If something like that can't happen (referring to the responsiveness) is there a way to make the entire thing disappear and show something else instead?
This might give you somewhere to start?
You'll need to use a combination of #media queries and flex.
Look into #media queries here: CSS #media Rule
Look into flex box here: A Complete Guide to Flexbox
This code might be of some help! (Resize the output window to see the results)
See here: JSFiddle
.panel-container {
}
.container {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.panel {
}
.col {
display: flex;
flex-direction: row;
justify-content: space-around;
}
#a1 {
background-color: blue;
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
}
#a2 {
background-color: blue;
height: 100px;
width: 100px;
border-radius: 50%;
line-height: 100px;
text-align: center;
}
#a3 {
background-color: blue;
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
}
#b1 {
background-color: red;
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
}
#b2 {
background-color: red;
height: 100px;
width: 100px;
border-radius: 50%;
line-height: 100px;
text-align: center;
}
#b3 {
background-color: red;
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
}
#media only screen and (max-width: 600px) {
.container {
display: flex;
flex-direction: column;
}
.col {
display: flex;
flex-direction: column;
}
}
<div class="container">
<div class="col">
<div id="a1">A1</div>
<div id="a2">A2</div>
<div id="a3">A3</div>
</div>
<div class="col">
<div id="b1">B1</div>
<div id="b2">B2</div>
<div id="b3">B3</div>
</div>
</div>
<div class="panel-container">
<div id="lhs" class="panel"></div>
<div id="rhs" class="panel"></div>
</div>
its possible. use CSS flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
youll want to switch the flex direction of the container element with a css media query and so on... this is a more html/css related problem than javascript
I have a flex container in which I have two boxes which are side by side (and collapse in one column when the screen is too small).
Now, when boxes are side by side, I've set that they have the same height, like in the following image.
Now, what I want to achieve is to put the EDIT button of both boxes at the bottom (this means that only the EDIT button of the box with less content will need to move).
I've searched, but the solution are to use position absolute, because one of the two boxes won't need it, and if I put position absolute on both EDIT button, the box on the right will have less height because it won't count the EDIT button anymore.
I tried to play with flex, but I rather not set the boxes as display flex.
There may be some solution with Jquery, I've read something about it, but it was just something like "You could achieve that with Jquery!" but.. I honestly don't know how.
#parent {
flex-flow: row wrap;
display: flex;
align-items: stretch;
}
.box {
margin: 10px;
padding: 15px;
flex: 0 1 calc(50% - 50px);
}
.box:last-of-type {
background-color: green;
}
.box:first-of-type {
background-color: red;
}
.cool-form {
display: flex;
flex-direction: column;
}
.button-container {
display: block;
margin-left: 5px;
margin-top: auto;
align-self: center;
}
.button {
background-color: white;
display: inline-block;
width: 120px;
height: 48px;
line-height: 48px;
border: 1px solid black;
text-align: center;
cursor: pointer;
}
<div id="parent">
<div class="box">
<form class="cool-form">
<h1>Box on left</h1>
<p>This is a shorter box</p>
<span class="button-container">
<span class="button">EDIT</span>
</span>
</form>
</div>
<div class="box">
<form class="cool-form">
<h1>Box on right</h1>
<p>This is</p>
<p>a</p>
<p>bigger</p>
<p>waaay bigger</p>
<p>Box</p>
<span class="button-container">
<span class="button">EDIT</span>
</span>
</form>
</div>
</div>
Adding flexbox to these divs (using flex-direction:column) seems minimally invasive (which was, perhaps a concern).
.box {
display: flex;
flex-direction: column;
}
Then you can give the button container margin-top:auto and it's auomatically pushed to the bottom.
Then it's just a matter of aligning it horizontally/centrally
.button-container {
margin-top: auto;
align-self: center;
}
#parent {
flex-flow: row wrap;
display: flex;
align-items: stretch;
}
.box {
margin: 10px;
padding: 15px;
flex: 0 1 calc(50% - 50px);
display: flex;
flex-direction: column;
}
.box:last-of-type {
background-color: green;
}
.box:first-of-type {
background-color: red;
}
.button-container {
display: block;
margin-left: 5px;
margin-top: auto;
align-self: center;
}
.button {
background-color: white;
display: inline-block;
width: 120px;
height: 48px;
line-height: 48px;
border: 1px solid black;
text-align: center;
cursor: pointer;
}
<div id="parent">
<div class="box">
<h1>Box on left</h1>
<p>This is a shorter box</p>
<span class="button-container">
<span class="button">EDIT</span>
</span>
</div>
<div class="box">
<h1>Box on right</h1>
<p>This is</p>
<p>a</p>
<p>bigger</p>
<p>waaay bigger</p>
<p>Box</p>
<span class="button-container">
<span class="button">EDIT</span>
</span>
</div>
</div>