I have an item has position: absolute in a container. I centered it by left: 50% and transform: translateX(-50%);. This item just contain text and i want it cover it's content and the text will nowrap as much as possible.
As we can see in the snipet below, the item have enough space but it did not increase width. It broke line. I know i can add white-space: nowrap to stop it breaking line but if the text is longer, one line can not wrap all text.
Adding width: 100% to item can not help because I want the width of item is dynamic base on it's content.
.container {
width: 300px;
height: 200px;
border: solid 1px #123;
position: absolute;
}
.item {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
background-color: #303030;
color: #FFF;
border-radius: 20px;
padding: 8px 16px;
}
<div class="container">
<div class="item">
<span>Hello. Its me. How are you?</span>
</div>
</div>
It this what you want? Use left: 0, right: 0 instead to center it then move your other styles in span.
.container {
width: 300px;
height: 200px;
border: solid 1px #123;
position: absolute;
}
.item {
position: absolute;
top: 20px;
left: 0;
right: 0;
text-align: center;
}
.item .content {
display: inline-block;
width: auto;
height: auto;
background-color: #303030;
color: #FFF;
border-radius: 20px;
padding: 8px 16px;
}
<div class="container">
<div class="item">
<div class="content">
<span>Hello. Its me. How are you?</span>
</div>
</div>
</div>
Would flexbox work for you?
.container {
width: 300px;
height: 200px;
border: solid 1px #123;
display: flex;
justify-content: center;
align-items: center;
}
.item {
background-color: #303030;
color: #FFF;
border-radius: 20px;
padding: 8px 16px;
}
<div class="container">
<div class="item">
<span>Hello. Its me. How are you? Hello. Its me. How are you? Hello. Its me. How are you? </span>
</div>
</div>
Please try this.
.container {
width: 300px;
height: 200px;
border: solid 1px #123;
position: relative;
}
.item {
margin-top: 20px;
display: flex;
justify-content: center;
}
.item span{
background-color: #303030;
color: #FFF;
border-radius: 20px;
padding: 8px 16px;
}
<div class="container">
<div class="item">
<span>Hello. Its me. How are you?</span>
</div>
</div>
Try adding center align for span tag
.container {
width: 300px;
height: 200px;
border: solid 1px #123;
position: absolute;
}
.item {
position: absolute;
top: 20px;
left: 0;
right: 0;
width: auto;
text-align: center;
}
.item .itemInner {
background-color: #303030;
color: #FFF;
border-radius: 20px;
padding: 8px 16px;
text-align: left;
margin: 0 auto;
}
<html>
<head>
</head>
<body>
<div class="container">
<div class="item">
<span class="itemInner">Hello. Its me.</span>
</div>
</div>
</body>
</html>
Related
In a css/html element on a webpage I've made, if a user zooms in or out on their browser, artifacts emerge showing a line. Here is a code pen of the issue. Zoom in or out on your browser to see the red line at top emerge like below:
I've read that these problems can emerge because a browser can set the zoom to 1.5x, thus creating rounding issues for pixels. See slack post here. But I'm not sure what the appropriate fix should be. In my case I want the triangles at each end of my rectangle element which I create via css styling. Besides recreating the graphic via svg, is there any good tricks?
Here is the html/css in codepen:
#root {
display: block;
width: 100%;
height: 100%;
background-color: lightgrey;
padding: 24px;
max-width: 400px;
float: center;
position: relative;
}
#gridRoot {
display: flex;
flex-flow: column wrap;
top: 50%;
left: 50%;
align-content: center;
}
#LegendContainer {
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
width: 100%;
align-items: center;
justify-content: space-between;
}
#container {
background-color: grey;
postion: relative;
height: 120px;
justify-content: center;
left: calc(50% - 60px);
text-align: center;
top: calc(50% - 60px);
}
#circle {
transform: rotate(7.39deg);
}
#jss {
display: flex;
position: absolute;
background: red;
top: 40px;
width: 110px;
opacity: 80%;
height: 20px;
}
#jss::before {
left: 0;
width: 0;
bottom: 0;
height: 0;
content: '';
position: absolute;
transform: rotate(180deg);
border-top: 10px solid white;
border-left: 10px solid #00007f;
border-bottom: 10px solid white;
}
#jss::after {
right: 0;
width: 0;
bottom: 0;
height: 0;
content: '';
position: absolute;
border-top: 10px solid white;
border-left: 10px solid #7f0000;
border-bottom: 10px solid white;
}
<div id="root">
<div id="gridRoot">
<div id="LegendContainer">
<div id="container">
<div id="circle">
</div>
<div id="jss">
</div>
</div>
</div>
</div>
</div>
The ::before and ::after elements seemed to be causing the issue. Solution;
body {
margin: 0;
}
#container {
background-color: grey;
position: relative;
display: flex;
height: 120px;
justify-content: center;
text-align: center;
}
#jss {
display: flex;
position: absolute;
top: 40px;
width: 110px;
opacity: 80%;
height: 20px;
}
#jss-internal {
background: red;
width: 100%;
}
#jss-before {
content: '';
transform: rotate(180deg);
border-top: 10px solid white;
border-left: 10px solid #00007f;
border-bottom: 10px solid white;
}
#jss-after {
border-top: 10px solid white;
border-left: 10px solid #7f0000;
border-bottom: 10px solid white;
}
<div id="root">
<div id="LegendContainer">
<div id="container">
<div id="circle">
</div>
<div id="jss">
<div id="jss-before">
</div>
<div id="jss-internal">
</div>
<div id="jss-after">
</div>
</div>
</div>
</div>
</div>
I have an HTML structure where I can't seem to get the CSS position sticky working.
I think it because it's within the aside container. If I make aside stick it works.
I want the .product-info div to be sticky and when it hits the div .content-other it unsticks.
Unless with flex I could move out .personal-info and .product-info from within the aside and have them sit to the right on top of each other? Like
content | Personal info
| Product info
Then not bother having the wrapping aside? Not sure how to stack these like this though with flex.
body {
padding: 20px;
}
.container {
margin-left: auto;
margin-right: auto;
position: relative;
padding-bottom: 16px;
padding-top: 16px;
width: 100%;
display: flex;
}
.content {
position: relative;
max-width: 100%;
flex-basis: 74%;
border: 1px solid black;
width: 300px;
margin-right: 20px;
height: 540px;
}
.right-side {
align-self: flex-start;
background-color: #ffffff;
border: 2px solid #e8e8e3;
border-radius: 0 4px 4px 4px;
flex: 1 1;
flex-basis: 40%;
min-width: 338px;
padding: 16px 16px 0;
display: block;
width: 400px;
}
.personal-info {
height: 250px;
}
.product-info {
position: sticky;
position: -webkit-sticky;
top: 24px;
border: 1px solid red;
}
.content-other {
width: 100%;
background: #f5f5f5;
height: 400px;
}
<div class="container">
<div class="content">content area here</div>
<aside class="right-side">
<div class="personal-info">some info</div>
<div class="product-info">sticky info</div>
</aside>
</div>
<div class="content-other">.product-info unsticks when it hits here</div>
Cheers
Simply remove align-self: flex-start;
body {
padding: 20px;
}
.container {
margin-left: auto;
margin-right: auto;
position: relative;
padding-bottom: 16px;
padding-top: 16px;
width: 100%;
display: flex;
}
.content {
position: relative;
max-width: 100%;
flex-basis: 74%;
border: 1px solid black;
width: 300px;
margin-right: 20px;
height: 540px;
}
.right-side {
/*align-self: flex-start;*/
background-color: #ffffff;
border: 2px solid #e8e8e3;
border-radius: 0 4px 4px 4px;
flex: 1 1;
flex-basis: 40%;
min-width: 338px;
padding: 16px 16px 0;
display: block;
width: 400px;
}
.personal-info {
height: 250px;
}
.product-info {
position: sticky;
position: -webkit-sticky;
top: 24px;
border: 1px solid red;
}
.content-other {
width: 100%;
background: #f5f5f5;
height: 400px;
}
<div class="container">
<div class="content">content area here</div>
<aside class="right-side">
<div class="personal-info">some info</div>
<div class="product-info">sticky info</div>
</aside>
</div>
<div class="content-other">.product-info unsticks when it hits here</div>
I have an HTML structure where I can't seem to get the CSS position sticky working.
I think it because it's within the aside container. If I make aside stick it works.
I want the .product-info div to be sticky and when it hits the div .content-other it unsticks.
Unless with flex I could move out .personal-info and .product-info from within the aside and have them sit to the right on top of each other? Like
content | Personal info
| Product info
Then not bother having the wrapping aside? Not sure how to stack these like this though with flex.
body {
padding: 20px;
}
.container {
margin-left: auto;
margin-right: auto;
position: relative;
padding-bottom: 16px;
padding-top: 16px;
width: 100%;
display: flex;
}
.content {
position: relative;
max-width: 100%;
flex-basis: 74%;
border: 1px solid black;
width: 300px;
margin-right: 20px;
height: 540px;
}
.right-side {
align-self: flex-start;
background-color: #ffffff;
border: 2px solid #e8e8e3;
border-radius: 0 4px 4px 4px;
flex: 1 1;
flex-basis: 40%;
min-width: 338px;
padding: 16px 16px 0;
display: block;
width: 400px;
}
.personal-info {
height: 250px;
}
.product-info {
position: sticky;
position: -webkit-sticky;
top: 24px;
border: 1px solid red;
}
.content-other {
width: 100%;
background: #f5f5f5;
height: 400px;
}
<div class="container">
<div class="content">content area here</div>
<aside class="right-side">
<div class="personal-info">some info</div>
<div class="product-info">sticky info</div>
</aside>
</div>
<div class="content-other">.product-info unsticks when it hits here</div>
Cheers
Simply remove align-self: flex-start;
body {
padding: 20px;
}
.container {
margin-left: auto;
margin-right: auto;
position: relative;
padding-bottom: 16px;
padding-top: 16px;
width: 100%;
display: flex;
}
.content {
position: relative;
max-width: 100%;
flex-basis: 74%;
border: 1px solid black;
width: 300px;
margin-right: 20px;
height: 540px;
}
.right-side {
/*align-self: flex-start;*/
background-color: #ffffff;
border: 2px solid #e8e8e3;
border-radius: 0 4px 4px 4px;
flex: 1 1;
flex-basis: 40%;
min-width: 338px;
padding: 16px 16px 0;
display: block;
width: 400px;
}
.personal-info {
height: 250px;
}
.product-info {
position: sticky;
position: -webkit-sticky;
top: 24px;
border: 1px solid red;
}
.content-other {
width: 100%;
background: #f5f5f5;
height: 400px;
}
<div class="container">
<div class="content">content area here</div>
<aside class="right-side">
<div class="personal-info">some info</div>
<div class="product-info">sticky info</div>
</aside>
</div>
<div class="content-other">.product-info unsticks when it hits here</div>
Does anyone know why the image breaks onto a new line when the bubbles sides are constrained?
If I change the bubbles max-width to calc(100% - 70px) the image doesn't break although I get the last word on a new line, which also breaks the style.
body {
background: #f0f3f6;
}
.messages {
width: 100%;
margin-top: 65px;
margin-bottom: 70px;
padding-bottom: 15px;
}
.scrolling {
display: inline-flex;
flex: auto;
overflow-y: auto;
overflow-x: hidden;
}
.scrolled {
flex: 0 1 auto;
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
width: 100%;
height: 100%;
margin: 0 15px;
}
.message {
line-height: 1em;
display: block;
margin: 18px 0;
position: relative;
}
.message .image {
position: relative;
display: inline-block;
width: 25px;
}
.message img {
display: block;
width: 100%;
border-radius: 150px;
}
.message .bubble {
font-weight: 300;
position: relative;
vertical-align: text-top;
display: inline-block;
font-size: 0.9em;
padding: 12px 14px;
margin-top: -16px;
margin-left: 20px;
margin-right: 20px;
border-radius: 4px;
max-width: 100%;
}
.message .bubble::after {
content: '';
position: absolute;
top: 12px;
width: 0;
height: 0;
}
.message .time {
color: #838689;
font-weight: 500;
font-size: 0.7em;
position: absolute;
bottom: -1.9em;
width: 100%;
}
.message-left {
flex: 1;
align-self: flex-start;
}
.message-left .time {
left: 50px;
}
.message-left .bubble {
color: #343434;
background-color: #fff;
margin-left: 20px;
}
.message-left .bubble::after {
position: absolute;
left: -5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid #fff;
}
.message-right {
flex: 0;
align-self: flex-end;
float: right;
}
.message-right .time {
text-align: right;
right: 50px;
}
.message-right .bubble {
color: #fff;
margin-right: 20px;
background-color: #0084ff;
}
.message-right .bubble::after {
position: absolute;
right: -5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #0084ff;
}
<div ref="messages" class="messages scrolling">
<div class="scrolled">
<div class="message message-left">
<span class="time">1 min ago</span>
<div class="image">
<img src="https://scontent-lht6-1.xx.fbcdn.net/v/t1.0-9/15492548_1291266807563287_6299338365875926813_n.jpg?oh=b2c7a59d1666247350753be9002e6884&oe=5AB71F93" />
</div>
<div class="bubble">
This message has the same problem.
</div>
</div>
<div class="message message-right">
<span class="time">1 min ago</span>
<div class="bubble">
A small comment.
</div>
<div class="image">
<img src="https://scontent-lht6-1.xx.fbcdn.net/v/t1.0-9/15492548_1291266807563287_6299338365875926813_n.jpg?oh=b2c7a59d1666247350753be9002e6884&oe=5AB71F93" />
</div>
</div>
<div class="message message-right">
<span class="time">1 min ago</span>
<div class="bubble">
A really long message, designed to be big enough to create a multi-line comment.
</div>
<div class="image">
<img src="https://scontent-lht6-1.xx.fbcdn.net/v/t1.0-9/15492548_1291266807563287_6299338365875926813_n.jpg?oh=b2c7a59d1666247350753be9002e6884&oe=5AB71F93" />
</div>
</div>
</div>
</div>
Original JSFiddle
The message element is display: block.
If you use display: flex instead, the image and text are forced to remain on a single line (because a default setting of a flex container is flex-wrap: nowrap).
revised demo 1
If you don't want the images to shrink, add flex-shrink: 0 to the items. (By default, flex items are set to flex-shrink: 1, allowing them to shrink so they don't overflow the container).
revised demo 2
I am trying to set three divs side by side with each equal width and height.
I am unable to remove that extra space at right at right most div. If I set its margin-right to 0 the rightmost div becomes bigger than other two.
Here is the fiddle.
Css:
.recordpopup {
position: fixed;
z-index: 10000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba( 0, 0, 0, .8);
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
}
.recordpopup .retry {
background-color: black;
border: 1px solid white;
xborder-radius: 8px;
box-sizing: border-box;
color: white;
font-family: ProximaNova-Regular;
font-size: 16px;
font-weight: bold;
xheight: 50px;
margin-left: auto;
margin-right: auto;
padding-top: 0px;
position: relative;
text-align: center;
top: 30%;
width: 40%;
z-index: 15000;
border-radius: 8px;
padding: 20px 10px;
background-image: url('images/gray_bar.png');
background-repeat: repeat-x;
background-color: white;
}
#product-wrapper {
overflow: hidden;
margin-top: 25px;
}
.product {
float: left;
width: 33%;
display: table-cell;
width: 33.33333333%;
}
.product .container {
margin-right: 10px;
padding: 10px;
background-color: #000;
}
.product .container img {
display: block;
margin: 0 auto;
width: 100%;
}
#closeRecord {
background: black none repeat scroll 0 0;
border: 2px solid white;
border-radius: 50%;
color: white;
cursor: pointer;
height: 25px;
right: -15px;
left: right;
position: absolute;
top: -10px;
width: 25px;
}
Html:
<div class="recordpopup">
<div class="retry">
<div id="closeRecord">x</div>
<div style="width: 100%;text-align: left;margin: 5px 0;font-size: 12px;color:#333;"><span class="TitleText">Lorem Ipsum Lorem Ipsum</span> </div>
<div id="product-wrapper">
<div class="product">
<div class="container">
<img src="images/circle.png">
<p>Dummy</p>
</div>
</div>
<div class="product">
<div class="container">
<img src="images/circle.png">
<p>Dummy</p>
</div>
</div>
<div class="product">
<div class="container">
<img src="images/circle.png">
<p>Dummy</p>
</div>
</div>
</div>
</div>
</div>
Here is my solution.
The key is removing the margin-right: 10px and adding
.product:nth-child(1) .container{
margin-right:5px;
}
.product:nth-child(2) .container{
margin: 0 5px 0 5px;
}
.product:nth-child(3) .container{
margin-left: 5px;
}
JSFiddle ===> https://jsfiddle.net/kjkk3f9d/1/
The margin-right: 10px was pushing out your divs, replace it with margin: 0 5px to give a uniform look
.product .container {
margin: 0px 5px;
padding: 10px;
background-color: #000;
}
https://jsfiddle.net/kjkk3f9d/3/
check out my fiddle:
https://jsfiddle.net/kjkk3f9d/2/
the important styles are
#product-wrapper {
overflow: hidden;
margin-top: 25px;
display: flex;
justify-content: space-between;
}
.product {
flex-basis:0;
flex: 1 1 auto;
margin: 5px;
}