I am trying to do the following in the image: The top div will contain text of variable length. The bottom div is fixed in place and should respond by resizing its height to avoid the overlap, while overflowing the text if needed. Is there a way to do this in CSS? I have attached the jsfiddle.
https://jsfiddle.net/0nr3g7kq/123/
* {
font-family: Arial, Helvetica, sans-serif;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
margin: 20px;
padding: 5px;
width: 300px;
height: 145px;
position: relative;
}
.content1,
.content2 {
border-style: dotted;
border-width: 2px;
border-color: blue;
margin: 1px;
width: 268px;
}
.content2 {
position: absolute;
bottom: 20px;
}
.title {
font-weight: bold;
}
.desc {}
<div class="card">
<div class="content1">
<span class="title">
This top div should compress the bottom div downwards without changing its position.
</span>
</div>
<div class="content2">
<span class="desc">
This bottom div should respond by being compressed and show 1 less visible line with text overflow but not change position
</span>
</div>
</div>
Just add min-width:268px; to .content1, .content2 it will solve current problem
put max-width: instead of width: in .content1, .content2 and remove .content2 { position: absolute; bottom: 20px; }
Related
I'm building a React Chat app. My background of messages works fine with a short text. The background responsively changes according to text-content.
With longer text, when I scale the browser, there are certain points where the background appears larger than the fit-content. Below are the pictures of the same message.
No Gap
With Gap
Here is my React code:
<div className={`chatMessage ${message.sender._id === state._id && "myMessage"}`}>
<div className="messageHeader">
<span className="chatName"> {message.sender.name} </span>
<span className="timeStamp"> {message.timestamp.substring(0, 10)} </span>
</div>
<div className="messageContent">
<span>{message.message}</span>
<small className="timeStamp"> {message.timestamp.substring(12, 20)} </small>
</div>
</div>
Here is my CSS:
.chatMessage {
display: flex;
height: auto;
position: relative;
font-size: 16px;
padding: 2px 10px 0px 10px;
max-width: 350px;
margin-bottom: 10px;
}
.myMessage > .messageContent {
background-color: #dcf8c6 !important;
}
.chatMessage > .messageContent {
background-color: rgb(221, 221, 221);
}
.messageContent {
position: relative;
bottom: 25px;
padding: 2px 10px 0px 10px;
border-radius: 10px;
right: -5px;
}
I believe the max-width property is causing the problem. But I can't figure out how to work around it.
I'd like to have text appear on the top of a div that has a border that also has a white background so you don't see the border line going through the text. I've tried adding z-index to the text but I believe since position: relative it doesn't matter. I'm also open to other suggestions as to how to accomplish and would prefer not to use a fieldset and legend.
Fiddle
#large-div-text {
padding: 20px;
border: 1px solid rgba(64, 189, 233, 0.42);
position: relative;
margin-top: -10px;
}
#why {
background-color: #FFF;
text-align: center;
z-index: 1000;
}
<div id="why">
No line behind me, please!
</div>
<div id="large-div-text">
Large div text
</div>
You have the right idea about setting a z-index. However, note that in order for a z-index to apply, you need to specify a position property other than the default of static. That will have your #why element sit on top. From here, it's just a matter of giving it a fixed width (along with margin: 0 auto for alignment) so that the rest of the border gets shown.
This can be seen in the following:
#large-div-text {
padding: 20px;
border: 1px solid rgba(64, 189, 233, 0.42);
position: relative;
margin-top: -10px;
}
#why {
background-color: #FFF;
text-align: center;
position: relative;
z-index: 1000;
width: 250px;
margin: 0 auto;
}
<div id="why">
No line behind me, please!
</div>
<div id="large-div-text">
Large div text
</div>
Note that the width property denotes just how much of the border is shown - feel free to adapt to suit! If you want it to perfectly wrap around the text, I'd recommend using a <span> tag instead of a <div>.
Actually, you don't need to use absolute or z index something.
The div#why is block, you dont want to make it block, instead make it inline-block so it consume it's normal width, not 100%.
The problem now is how you can center the div#why, i used position:relative, and transformX.
Cheers!
#large-div-text {
padding: 20px;
border: 1px solid rgba(64,189,233,0.42);
position: relative;
margin-top: -10px;
}
#why {
background-color: #FFF;
text-align: center;
z-index: 1000;
display: inline-block;
transform: translateX(-50%);
left: 50%;
position: relative;
}
<div id="why">
No line behind me, please!
</div>
<div id="large-div-text">
Large div text
</div>
You must use a position attribute for z-index to work. And you can use a span element to set the background of the text. The span is an inline element ulike div, and will change its width depending on the content.
#large-div-text {
padding: 20px;
border: 1px solid rgba(64, 189, 233, 0.42);
position: relative;
margin-top: -10px;
z-index: 0;
}
#why {
text-align: center;
z-index: 1000;
position: relative;
}
.whitebg {
background-color: white;
padding: 0.5em;
}
<div id="why">
<span class=whitebg>No line behind me, please!</span>
</div>
<div id="large-div-text">
Large div text
</div>
You can simply add some margin
#large-div-text {
padding: 20px;
border: 1px solid rgba(64, 189, 233, 0.42);
position: relative;
margin-top: -10px;
}
#why {
background-color: #FFF;
text-align: center;
z-index: 1000;
margin: 10px;
}
<div id="why">
<span class=whitebg>No line behind me, please!</span>
</div>
<div id="large-div-text">
Large div text
</div>
I have two inline elements within a div. One element is floated to the left and the other to the right. I have used absolute positioning to place the block containing inline elements at the bottom of a DIV.
Problem: The element floating to the right skews out of its container. How can I fix this so that it stays within its container? Here is the CodePen.
HTML
<div class="posts__post">
<article>
<a class="posts__post--preview" href=""><img src="http://lorempixel.com/470/310/food" /></a>
<a class="posts__post--title" href=""><h1>Bryce Canyon A Stunning U.S Travel Destination</h1></a>
<div class="posts__post--meta">
<a class="posts__post__timestamp"><i class="fa fa-clock-o" aria-hidden="true"></i>10 days ago</a>
<a class="posts__post__tag">Motivation</a> <!-- element floating out --->
</div>
</article>
</div>
SCSS
.posts__post{
height: 400px;
width: 310px;
margin: 40px auto;
//margin-bottom: 40px;
position: relative;
text-align: left;
background-color: white;
border-radius: 5px 5px 5px 5px;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);
.posts__post--preview img{
width: 100%;
height: auto;
border-radius: 5px 5px 0px 0px;
}
.posts__post--tag{
font-size: em(15);
font-weight: bold;
color: $light-grey;
}
.posts__post--meta{
color: $light-grey;
position: absolute;
bottom: 25px;
left: 0;
display: block;
}
.posts__post--title, .posts__post--tag, .posts__post--meta{
margin: 0 25px;
display: inline-block;
text-docoration: none;
}
.posts__post__timestamp{
float:left;
}
.posts__post__tag{
float:right;
}
}
This is because of margin that you have given to posts__post--meta, instead of using margin use padding, and box-sizing:border-box
.posts__post--meta{
padding: 0 25px;
display: inline-block;
text-docoration: none;
width: 100%;
box-sizing: border-box;
}
For more info about box-sizing
.posts__post--meta{
color: $light-grey;
position: absolute;
bottom: 25px;
left: 0;
right:0; //add this
display: block;
}
Just to add a note I have noticed while I'm working on a php application. Using float within a <div> is overridding the whole div. to clarify my point. if you have <div class="page-wrapper"> and within it you have <div id="img-align"> and it has a float, it override the "page-wrapper" and stand alone. don't use it unless you really need it. Thanks
I am working on trying to make a chat app and need chat bubbles to tightly fit around their content. It works alright for text, but when I have an image in the bubble it gets problematic. Here is the HTML that I am using
<div class="fromMe msgBubble">
<img src="{{image.location}}" style="width:50%;">
<br>
<span class="msgDate">2011-01-26 01:52:16</span>
</div>
<div class="clearfix"></div>
However, when I load the image I have a whole bunch of padding off to the side of the image, and the div doesn't tightly wrap around the image. It looks like this:
http://imgur.com/R3j7yO2
UPDATE: I posted a JS Fiddle with the code and CSS.
https://jsfiddle.net/dw9aek2y/
How can I tight fit the chat bubble div around the picture?
Thanks!
Remove width and add max-width and every thing will be fine
#messageBubbleArea {
font: 14px Arial;
margin-top: 20px;
padding: 0 10px;
width: 99%;
}
.fromMe::before {
border-bottom: 9px solid #0b93f6;
border-right: 9px solid rgba(0, 0, 0, 0);
bottom: 0;
content: "";
position: absolute;
right: -8px;
}
*::after, *::before {
box-sizing: border-box;
}
.fromMe {
background-color: #0b93f6;
border-radius: 8px 8px 0;
color: white;
float: right;
margin-left: auto;
text-align: right;
}
.fromThem, .fromMe {
clear: both;
margin-top: 20px;
max-width: 80%;
padding: 5px 9px;
position: relative;
}
<div id="messageBubbleArea">
<div class="fromMe msgBubble">Hey babe<br>
<span class="msgDate">2011-01-26 00:09:30</span>
</div>
<div class="clearfix"></div>
<div class="fromMe msgBubble">
<img style=" max-width:200px;" src="http://images.clipartpanda.com/rainbow-clip-art-rainbow.gif"><br>
<span class="msgDate">2011-01-26 01:52:16</span>
</div>
<div class="clearfix"></div>
</div>
https://jsfiddle.net/0Lfzbzc5/2/
in here I am trying to make the notification box on top of the body class div but couldn't do it the logic says positioned elements should be on top of the not positioned elements but that isn't happenning
tried even making body class div relative and giving it z-index but failed too
structure of notification box is an absolute element in relative element in absolute element (for CSS animation issues)
HTML
<div class="notiIcon glyphicon glyphicon-globe">
</div>
<div class='notiAbs '>
<div class='notiContainer'>
<div class="notiBox">
<div class="notiHeader">
<span class="notiHeaderSpan">notifications</span>
</div>
<div class="notiBody">
<div class="notiElement">Collaboratively enable high-quality imperatives before ubiquitous paradigms.
</div>
<div class="notiElement">Credibly productize customized services whereas.</div>
<div class="notiElement">Efficiently embrace real-time markets without.</div>
<div class="notiElement">Synergistically simplify collaborative web services.</div>
<div class="notiElement">Intrinsicly evisculate magnetic e-services through.</div>
<div class="notiElement">Holisticly build customer directed technologies.</div>
<div class="notiElement">Phosfluorescently synthesize team driven strategic.</div>
</div>
<div class="notiFooter"><span class="notiHeaderSpan">See All</span></div>
</div>
</div>
</div>
<div class="body">aasdasdasdasdasdasdas</div>
CSS
.notiAbs{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
/* overflow-y: hidden; */
height: 500px;
width: 500px;
/* overflow-x: hidden; */
overflow-y: hidden;
margin: 0 auto;
padding-left: 50px;
}
.notiContainer{
position: relative;
}
.notiIcon{
z-index: 5;
position: relative;
width:100%;
text-align: center;
font-size: 25;
cursor: pointer;
padding-top: 10px;
}
.notiIconNumber{
position: relative;
font-size: 15px;
color: white;
background-color: red;
top: -10;
left: -9;
padding: 2px;
}
.notiBox{
z-index: 4;
position: absolute;
height: 400px;
width: 400px;
display: block;
padding-top: 10px;
box-shadow: rgba(0, 0, 0, 0.298039) 0px 4px 7px;
}
.notiElement{
overflow-wrap:break-word;
font-size: 17px;
padding: 10 0px;
border-bottom-style: solid;
border-bottom-width: thin;
border-bottom-color: lightgray;
}
.notiHeader,.notiFooter{
text-align: center;
font-size: 20px;
font-weight: bold;
height: 15%;
display: table;
width: 100%;
}
.notiHeaderSpan,.notiFooterSpan{
display: table-cell;
vertical-align: middle;
}
.notiFooter{
box-shadow: 0px -4px 7px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.notiHeader{
box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.1);
}
.notiBody{
padding: 20px;
overflow: auto;
height:70%;
}
.body{
}
It is on top but the background is transparent so it makes the illusion that it's not. Just set a background color as follows :
.notiBox{
z-index: 4;
position: absolute;
height: 400px;
width: 400px;
padding-top: 10px;
border-style:solid;
background:#666;
}
Check the Fiddle.
Your notification box which I believe is the element with class "notiBox" is on top. The reason why it appears not to be is because it has an inherited background-color of transparent.
If you set the background-color property to say "yellow" (for examples sake) you will see that it is on top of the element with class "body".
Does that make sense? I can explain further if you need me to.
I've updated my answer as looking at your HTML again i've realised that the element with class "notiBox" is probably the only element (and it's contents) you want to appear on top