So I have this very simple grid layout that has 3 columns. The 3rd column has 3 items which are a header, a div and an input element.
Setting the width=100%; for the input I thought it would fit to the 3rd columns actual size but apparently it grows bigger than the div.
I thought it would be the padding of the conversation div but it turns out that even after removing the padding there is still an overlap.
EDIT: The input item should only take the length of the 3rd column.
body {
margin: 0;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 9fr;
}
.directories {
background-color: rgb(17, 200, 110);
}
.chats {
background-color: rgb(220, 220, 120);
height: 100vh;
}
.conversation {
background-color: rgb(220, 20, 120);
padding: 8px;
position: relative;
}
.conversation-head {
position: sticky;
top: 0;
background-color: white;
}
input {
min-width: 100%;
max-width: 100%;
height: 32px;
position: absolute;
bottom: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="directories">
Something Something
</div>
<div class="chats">
Chat Chat Chat
</div>
<div class="conversation">
<div class="conversation-head">
Front-End
</div>
<div class="conversation-txt">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, laboriosam repudiandae perspiciatis possimus minus quam explicabo dolores corrupti asperiores alias saepe, animi cumque mollitia labore atque veniam debitis modi quibusdam.
</div>
<input type="text" placeholder="Enter your message">
</div>
</div>
</body>
</html>
Instead of position:absolute you can rely on a flexbox container where it will be easier to position the input and size it
body {
margin: 0;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 9fr;
}
.directories {
background-color: rgb(17, 200, 110);
}
.chats {
background-color: rgb(220, 220, 120);
height: 100vh;
}
.conversation {
background-color: rgb(220, 20, 120);
padding: 8px;
position: relative;
display:flex; /* added*/
flex-direction:column; /* added*/
}
.conversation-head {
position: sticky;
top: 0;
background-color: white;
}
input {
width: 100%; /* added*/
box-sizing:border-box; /* added*/
height: 32px;
margin:auto 0 5px; /* added*/
}
<div class="wrapper">
<div class="directories">
Something Something
</div>
<div class="chats">
Chat Chat Chat
</div>
<div class="conversation">
<div class="conversation-head">
Front-End
</div>
<div class="conversation-txt">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, laboriosam repudiandae perspiciatis possimus minus quam explicabo dolores corrupti asperiores alias saepe, animi cumque mollitia labore atque veniam debitis modi quibusdam.
</div>
<input type="text" placeholder="Enter your message">
</div>
</div>
You should remove the position:absolute of input , the position absolute is relative to the parent(with position relative) and ignore the padding of the parent element
use this
input{
box-sizing: border-box;
left:0;
right:0;
}
hopefully, this is work
Related
The below code makes the content wrap or makes the div occupy only 50% of the browser's width in windows(thus making the content in to wrap if the content width is more than 50% of the browser width). But it's not happening in mac, it is trying to occupy 100% of the browser's width and wraps if the content width is more than 100% of the browser's width. Why does this difference occur?
see the demo in jsfiddle https://jsfiddle.net/sevenu/egtvc95j/4/
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:#E7E9EB;
}
#myDIV {
height:300px;
background-color:#FFFFFF;
}
.bluediv {
background-color:lightblue;
width: fit-content;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<h1>The width: fit-content position: absolute and left 50%<</h1>
<div id="myDIV">
<div class="bluediv">
Lorem ipsum dolor sit amet. Est quidem eius et nihil modi et omnis commodi et error galisum?
</div>
</div>
</body>
</html>
The issue is the use of left: 50%.
Try like below:
body {
background-color: #E7E9EB;
}
#myDIV {
height: 300px;
background-color: #FFFFFF;
}
.bluediv {
background-color: lightblue;
width: fit-content;
position: absolute;
inset: auto 0; /* left and right = 0*/
margin: auto;
}
<h1>The width: fit-content position: absolute and left 50%</h1>
<div id="myDIV">
<div class="bluediv">
Lorem ipsum dolor sit amet. Est quidem eius et nihil modi et omnis commodi et error galisum?
</div>
</div>
A simple layout that I want to achieve with minimal html tags
Only <img> & <h1> & <p> and no other extra tags
flex + column + wrap
The first column has only one image
The second column contains the title and crossword
The width and height of the parent layer are fixed
The result is that part of the text will overflow
Only add width to <p> to prevent
Is there any way to automatically break text without adding width?
HTML
*{
margin: 0;
padding: 0;
}
.out{
width: 600px;
height: 200px;
border: 1px solid #ccc;
padding: 20px;
margin: 50px auto;
font-family: Verdana;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
img{
/* margin-bottom: 20px; */
margin-right: 20px;
}
p{
line-height: 1.6;
overflow-wrap: break-word;
}
<div class="out">
<img src="https://picsum.photos/id/230/200/200" alt="">
<h1>This is Title</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta iure iusto cupiditate sequi aperiam, nostrum optio ipsam dicta modi officiis eligendi vel. Dignissimos delectus exercitationem nemo. Enim id sed corrupti!</p>
</div>
Another solution as per your expecation:
* {
margin: 0;
padding: 0;
}
.out {
width: 600px;
height: 200px;
border: 1px solid #ccc;
padding: 20px;
margin: 50px auto;
font-family: Verdana;
display: flex;
}
img {
/* margin-bottom: 20px; */
margin-right: 20px;
}
p {
line-height: 1.6;
overflow-wrap: break-word;
margin-left: -200px;
margin-top: auto;
margin-bottom: auto;
}
h1 {
position: relative;
white-space: nowrap;
}
p::before {
content: "";
width: 100%;
}
<div class="out">
<img src="https://picsum.photos/id/230/200/200" alt="">
<h1>This is Title</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta iure iusto cupiditate sequi aperiam, nostrum optio ipsam dicta modi officiis eligendi vel. Dignissimos delectus exercitationem nemo. Enim id sed corrupti!</p>
</div>
Here is my solution
* {
font-family: 'poppins';
}
.card {
display: flex;
padding: 15px;
border: 1px solid #8f8f8f;
}
.content {
margin-left: 10px;
}
.content h6 {
margin-top: 0;
font-size: 32px;
margin-bottom: 5px;
}
<div class="card">
<img src="//via.placeholder.com/150">
<div class="content">
<h6>This is title</h6>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
here, content here', making it look like readable English.</p>
</div>
</div>
What I'm trying to accomplish is a title which fills its available parent div width, but if its copy doesn't fit in the div it should truncate with ellipsis. Additionally it should also have an icon after it, which shouldn't disappear on truncation, but always show after the ellipsis.
Another requirement is that the parent div should have one or more buttons, of not-specific width, that stay on the far right, but if the div is resized it should truncate the long title, allowing the icon to show next to the ellipsis as I described before.
Visually, my desired result looks like this:
Up until now I've achieved the following:
/* Helper styles not relevant to the example */
/* Simple flag object from #csswizardry */
.flag {
display: table;
width: 100%;
}
.flag .flag__section {
display: table-cell;
vertical-align: middle;
}
/* Right float text from bootstrap */
.text-right {
text-align: right !important;
}
/* Colors for better visibility */
.container {
background-color: #55606d;
color: #333;
padding: 20px;
}
.flag__section--a {
background-color: #22d398;
}
.flag__section--b {
background-color: #91c1f8;
}
.fluid-text__icon {
background-color: #fecb52;
}
/* Styles relevant to the example */
.container {
max-width: 700px;
}
.fluid-text {
text-align: left;
}
.fluid-text__inner {
max-width: 100%;
}
.fluid-text__inner,
.fluid-text__copy {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fluid-text__copy,
.fluid-text__icon {
float: left;
}
.fluid-text__copy {
padding-right: 5px;
}
.fluid-text__icon {
margin-top: 30px;
}
/* I'd like to not set explicit max width here */
.title {
max-width: 600px;
}
<div class='container'>
<div class='flag'>
<div class='flag__section flag__section--a fluid-text'>
<div class='fluid-text__inner'>
<h1 class='fluid-text__copy title'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque earum in, voluptas dolorum sit ab modi facere tempora est, sequi molestiae! Commodi vitae sapiente ipsum, nisi facilis impedit aut? Repellendus!
</h1>
<span class='fluid-text__icon'>icon</span>
</div>
</div>
<div class='flag__section flag__section--b text-right'>
<button>ACTION</button>
</div>
</div>
</div>
However, my only concern is that I have to explicitly set .title max-width which is not scalable and I would like to avoid it.
Is there any way to do it without js?
Flexbox can solve this, we just have to expend the ellipsis to the .description div and make a few minor tweaks.
* {
box-sizing: border-box;
}
.parent {
width: 80%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1em;
padding: .5em;
border: 1px solid grey;
}
.description {
display: flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
}
.text {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.icon {
flex: 0 0 auto;
background-color: rebeccapurple;
color: white;
padding: .5em;
margin: 0 .25em;
}
.button {
flex: 0 0 auto;
background-color: #ccc;
padding: .5em;
}
<div class="parent">
<div class="description">
<span class="text">Lorem sit amet, consectetur adipisicing elit doloremque earum in, voluptas dolorum sit ab modi facere tempora est, sequi molestiae! Commodi vitae sapiente ipsum, nisi facilis impedit aut? Repellendus!</span>
<span class="icon">I</span>
<span class="icon">I</span>
<span class="icon">I</span>
<span class="icon">I</span>
</div>
<div class="button">
Button
</div>
</div>
<div class="parent">
<div class="description">
<span class="text">Lorem sit amet</span>
<span class="icon">I</span>
<span class="icon">I</span>
</div>
<div class="button">
Button
</div>
</div>
The following uses flex and relies on the known width of the button which seems like the use-case here. The whole contained can have dynamic size, of course. The icon can be any size, too.
.parent {
width: 400px;
background-color: yellow;
display: flex;
justify-content: space-between;
}
.description {
width: calc(100% - 50px);
display: flex;
}
.text {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.icon {
display: inline-block;
background-color: tomato;
}
.button {
width: 50px;
background-color: blue;
}
<div class="parent">
<div class="description">
<span class="text">Lorem sit amet, consectetur adipisicing elit doloremque earum in, voluptas dolorum sit ab modi facere tempora est, sequi molestiae! Commodi vitae sapiente ipsum, nisi facilis impedit aut? Repellendus!</span>
<span class="icon">ICON</span>
</div>
<div class="button">
Button
</div>
</div>
<div class="parent">
<div class="description">
<span class="text">Lorem sit amet</span>
<span class="icon">ICON</span>
</div>
<div class="button">
Button
</div>
</div>
I'm trying to arrange elements on a z-axis and want to order them. As you can see in the example, the second section looks like if it's above the first element (pink background) but has a lower value on the z-axis (-2500px). What am I missing?
html,
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#content,
#wrapper {
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#wrapper {
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#content {
-moz-perspective: 10000px;
-ms-perspective: 10000px;
-webkit-perspective: 10000px;
perspective: 10000px;
-webkit-transform: translate3d(0, 0, 0) perspective(10000px);
transform: translate3d(0, 0, 0) perspective(10000px);
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
section {
position: absolute;
color: black;
opacity: 0;
left: 0;
top: 0;
overflow: hidden;
}
section.fullscreen {
height: 100%;
width: 100%;
}
section.fullscreen .section-content {
background: pink;
position: absolute;
right: 0;
bottom: 0;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
section:nth-of-type(2) {
color: red;
background: black;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Z-Axis</title>
<link href="zaxis/zaxis.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<div class="initialized" id="wrapper">
<div id="content">
<section style="transform: translate3d(-0.5px, 0px, 0px) scale3d(1, 1, 1); opacity: 1;" id="start" class="fullscreen">
<div class="section-content">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div>Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Accusamus adipisci aliquam aspernatur
atque aut blanditiis consectetur consequuntur delectus fugiat magnam,
necessitatibus nisi, nobis odio optio placeat quia repellendus rerum
sed?
</div>
</div>
</div>
</div>
</div>
</section>
<section style="transform: translate3d(25px, 193.5px, -1500px) scale3d(0.616406, 0.616406, 0.316406); opacity: 0.316406;" id="offer">
<div class="section-content">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div>Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Accusamus adipisci aliquam aspernatur
atque aut blanditiis consectetur consequuntur delectus fugiat magnam,
necessitatibus nisi, nobis odio optio placeat quia repellendus rerum
sed?
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</body>
</html>
The second element is displayed like it is offset by 1500px, but that's all that the 3D transform does. To really put it "behind" the first section and hide it you need to use z-index:
section:nth-of-type(1) { z-index: 2; }
section:nth-of-type(2) { z-index: 1; }
See JSFiddle.
I have a containing DIV, that I use as part of my responsive grid. It expands to the maximum width I allow which is 1280px, then margins appear for large devices. Here's my CSS + a bit of Less.
.container
{
margin-left:auto;
margin-right:auto;
max-width:1280px;
padding:0 30px;
width:100%;
&:extend(.clearfix all);
}
However on some occasions I'd like to overflow sideways - lets say I have an background image or colour that needs to be full width. I'm not great at CSS - but is it possible to achieve what I want?
The most obvious solution is just to close the container...have your full width div then open a new container. The title 'container' is just a class...not an absolute requirement that it hold everything all at the same time.
In this instance you apply the background color to the full width div and you don't need to apply a color to the internal, restricted div.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
max-width: 80%;
border: 1px solid red;
margin: 0 auto;
}
.fullwidth {
background: orange;
}
header {
height: 50px;
background: #663399;
}
.mydiv {
/* background: orange; */
min-height: 50px;
}
footer {
height: 50px;
background: #bada55;
}
<div class="container">
<header></header>
</div>
<div class="fullwidth">
<div class="container">
<div class="mydiv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
</div>
<div class="mydiv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
</div>
</div>
</div>
<div class="container">
<footer></footer>
</div>
However, for some they like a single all encompassing container so if all you are after is a background you could use a pseudo-element like so:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
}
.container {
max-width: 80%;
border: 1px solid red;
margin: 0 auto;
}
header {
height: 50px;
background: #663399;
}
.mydiv {
height: 100px;
position: relative;
}
.mydiv:after {
content: "";
position: absolute;
height: 100%;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
background: orange;
z-index: -1;
}
footer {
height: 50px;
background: #bada55;
}
<div class="container">
<header></header>
<div class="mydiv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
</div>
<footer></footer>
</div>
Support for vw is IE9+ - See http://caniuse.com/#feat=viewport-units
There are cases where actual content is required in the 100% wide div and the container cannot be opened/closed at will (perhaps to retrofit a slider).
In those cases, where the height of the new div is known the same technique can be used to position it as to be 100% viewport wide:
* {
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
}
.container {
max-width: 80%;
border: 1px solid red;
margin: 0 auto;
}
header {
height: 50px;
background: #663399;
}
.mydiv {
height: 100px;
position: relative;
}
.myslider {
position: absolute;
height: 100%;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
background: orange;
}
footer {
height: 50px;
background: #bada55;
}
<div class="container">
<header></header>
<div class="mydiv">
<div class="myslider">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
</div>
</div>
<footer></footer>
</div>
JSfiddle Demo
Note: there are instances where 100vw can cause overflow and a horizontal scrollbar might appear. overflow-x:hidden on the <body> can attend to that..it should not be an issue because everything else is still inside the container.
I found this super useful trick by using vw on margins (Source)
Example :
.inner-but-full {
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
}
Demo :
html,body {
overflow-x: hidden; /* Prevent scrollbar */
}
.inner-but-full {
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
height: 50px;
background: rgba(28, 144, 243, 0.5);
}
.container {
width: 300px;
height: 180px;
margin-left: auto;
margin-right: auto;
background: rgba(0, 0, 0, 0.5);
}
<div class="container">
<div class="inner-but-full"></div>
</div>
Can I use :
http://caniuse.com/#feat=calc
http://caniuse.com/#feat=viewport-units
<meta charset="UTF-8">
<style type="text/css">p{text-align:center;margin-left:25%;height:300px;width:50%;border:1px solid red;margin-bottom:0;margin-top:0;padding:0;
} body{margin:0;text-align:center;height:100%;width:100%;max-width:100%;max-height:100%;}</style>
<p style="color:yellow;background-color: red;">yep</p><p style="color:red;background-color: yellow;">yep</p><p style="color:white;background-color: blue;">yep</p>