I am trying to create a kind of "glossary" with flexbox elements. I have a navigation to scroll to the right letter.
There is my Problem:
I placed anchor-links before the first element of each letter. This causes unwanted spaces even if the elements has got width:0px; visibility:hidden; etc. I guess I've tried nearly everything... Hope you've got a solution.
Notice: In this case it is not an option to set the anchor-link to position:absolute!
*, *:before, *:after {
padding: 0;
margin: 0;
border: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
.letters {
background: #fff;
border-bottom: 1px solid #ccc;
text-align: center;
padding: 10px;
margin-bottom: 20px
}
.letters ul li {
display: inline-block;
height: 34px;
line-height: 34px;
list-style: outside none none;
text-align: center;
width: 34px;
margin: 0 .27em;
}
.letters ul li a {
background: #ad1800 none repeat scroll 0 0;
border: 1px solid #ad1800;
color: #fff;
display: block;
line-height: 32px;
text-decoration: none;
}
.letter_around {
list-style: none;
padding: 20px 50px;
position: relative;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
justify-content: space-between;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.glossary_item {
padding: 15px 20px 20px;
width: 22%;
background: #fff;
border: 1px solid #ccc;
transition: 0.4s all;
overflow: hidden;
margin-bottom: 20px;
}
.glossary_letter {
width: 0px;
height: 0px;
overflow: hidden;
position: relative;
visibility: hidden;
}
<div class="wrapper glossary_wrapper">
<div class="content clearfix">
<div class="letters clearfix">
<ul class="letters_ul">
<li class="glossarylink">
A
</li>
<li class="glossarylink">
B
</li>
<li class="glossarylink">
C
</li>
<li class="glossarylink">
D
</li>
<li class="glossarylink">
E
</li>
</ul>
</div>
<div class="letter_around">
<a class="glossary_letter" id="A" name="A"></a>
<div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
<a class="glossary_letter" id="B" name="B"></a>
<div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
<a class="glossary_letter" id="C" name="C"></a>
<div class="glossary_item"><span class="glossary-title">C - Lorem ipsum dolor </span></div>
<a class="glossary_letter" id="D" name="D"></a>
<div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
<a class="glossary_letter" id="E" name="E"></a>
<div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
</div>
</div>
</div>
This solution is not particularly clean. Ideally, someone with more knowledge will provide a better solution.
Remove justify-content property from .letter-around
Add margin-right: auto to glossary-item to create space between the items.
Target the last item in each grid using nth-of-type selector, and remove the margin.
I have changed the glossary-letter from a to a span, I think it makes more sense semantically. I have also moved some of the css rules from .glossary-item to the span.
*,
*:before,
*:after {
padding: 0;
margin: 0;
border: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
.letters {
background: #fff;
border-bottom: 1px solid #ccc;
text-align: center;
padding: 10px;
margin-bottom: 20px
}
.letters ul li {
display: inline-block;
height: 34px;
line-height: 34px;
list-style: outside none none;
text-align: center;
width: 34px;
margin: 0 .27em;
}
.letters ul li a {
background: #ad1800 none repeat scroll 0 0;
border: 1px solid #ad1800;
color: #fff;
display: block;
line-height: 32px;
text-decoration: none;
}
.letter_around {
list-style: none;
padding: 20px 50px;
position: relative;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
flex-flow: row wrap;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.glossary_item {
transition: 0.4s all;
overflow: hidden;
margin-bottom: 20px;
width: 22%;
margin-right: auto;
}
.glossary_item span {
padding: 15px 20px 20px;
background: #fff;
border: 1px solid #ccc;
display: block;
}
.glossary_item:nth-of-type(4n) {
margin-right: 0;
}
<div class="wrapper glossary_wrapper">
<div class="content clearfix">
<div class="letters clearfix">
<ul class="letters_ul">
<li class="glossarylink">
A
</li>
<li class="glossarylink">
B
</li>
<li class="glossarylink">
C
</li>
<li class="glossarylink">
D
</li>
<li class="glossarylink">
E
</li>
</ul>
</div>
<div class="letter_around">
<span class="glossary_letter" id="A" name="A"></span>
<div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
<span class="glossary_letter" id="B" name="B"></span>
<div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
<span class="glossary_letter" id="C" name="C"></span>
<div class="glossary_item"><span class="glossary-title">C - Lorem ipsum dolor </span></div>
<span class="glossary_letter" id="D" name="D"></span>
<div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
<span class="glossary_letter" id="E" name="E"></span>
<div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
</div>
</div>
</div>
The most simple solution is to add
.glossary_letter {
display: none;
}
So it fisically will be but your extra space will disappear.
Ok, try another way, it keeps the anchor link working:
.glossary_letter {
flex: 0 0 100%;
}
Found the solution for my own. It's not the best solution I guess, but it works fine.
I filled the spaces calculated by flexbox itself with a margin-left minus value of the percentage that is left. So in my Case the widht of the elements was 22%. This 4x is 88% of the whole container width. That means that the calculated margin of the elements is about 4% of the container width. So if you reduce the margin of the anchor-element by 4% you get the right position of the boxes.
I know that is not the best solution, but it works. If you've got a better one, please show me. :)
*, *:before, *:after {
padding: 0;
margin: 0;
border: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
.letters {
background: #fff;
border-bottom: 1px solid #ccc;
text-align: center;
padding: 10px;
margin-bottom: 20px
}
.letters ul li {
display: inline-block;
height: 34px;
line-height: 34px;
list-style: outside none none;
text-align: center;
width: 34px;
margin: 0 .27em;
}
.letters ul li a {
background: #ad1800 none repeat scroll 0 0;
border: 1px solid #ad1800;
color: #fff;
display: block;
line-height: 32px;
text-decoration: none;
}
.letter_around {
list-style: none;
padding: 20px 10px;
position: relative;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
justify-content: space-between;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.glossary_item {
padding: 15px 20px 20px;
width: 22%;
background: #fff;
border: 1px solid #ccc;
transition: 0.4s all;
overflow: hidden;
margin-bottom: 20px;
}
.glossary_letter {
width: 0px;
height: 0px;
overflow: hidden;
position: relative;
visibility: hidden;
margin-left: -4%;
}
<div class="wrapper glossary_wrapper">
<div class="content clearfix">
<div class="letters clearfix">
<ul class="letters_ul">
<li class="glossarylink">
A
</li>
<li class="glossarylink">
B
</li>
<li class="glossarylink">
C
</li>
<li class="glossarylink">
D
</li>
<li class="glossarylink">
E
</li>
</ul>
</div>
<div class="letter_around">
<a class="glossary_letter" id="A" name="A"></a>
<div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
<a class="glossary_letter" id="B" name="B"></a>
<div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
<a class="glossary_letter" id="C" name="C"></a>
<div class="glossary_item"><span class="glossary-title">C - Lorem ipsum dolor </span></div>
<a class="glossary_letter" id="D" name="D"></a>
<div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
<a class="glossary_letter" id="E" name="E"></a>
<div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
</div>
</div>
</div>
Setting justify-content: space-around is basically the same as setting auto to left and right margins to all flex items (the available space will be distributed equally on the left and on the right of each of them). So, to exclude some items from available space distribution, you can remove justify-content and set the equivalent margins only to the needed items:
*, *:before, *:after {
padding: 0;
margin: 0;
border: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
.letters {
background: #fff;
border-bottom: 1px solid #ccc;
text-align: center;
padding: 10px;
margin-bottom: 20px
}
.letters ul li {
display: inline-block;
height: 34px;
line-height: 34px;
list-style: outside none none;
text-align: center;
width: 34px;
margin: 0 .27em;
}
.letters ul li a {
background: #ad1800 none repeat scroll 0 0;
border: 1px solid #ad1800;
color: #fff;
display: block;
line-height: 32px;
text-decoration: none;
}
.letter_around {
list-style: none;
padding: 20px 50px;
position: relative;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
flex-flow: row wrap;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.glossary_item {
padding: 15px 20px 20px;
width: 22%;
background: #fff;
border: 1px solid #ccc;
transition: 0.4s all;
overflow: hidden;
margin: auto;
margin-bottom: 20px;
}
.glossary_letter {
width: 0;
margin: 0;
}
<div class="wrapper glossary_wrapper">
<div class="content clearfix">
<div class="letters clearfix">
<ul class="letters_ul">
<li class="glossarylink">
A
</li>
<li class="glossarylink">
B
</li>
<li class="glossarylink">
C
</li>
<li class="glossarylink">
D
</li>
<li class="glossarylink">
E
</li>
</ul>
</div>
<div class="letter_around">
<a class="glossary_letter" id="A" name="A"></a>
<div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
<a class="glossary_letter" id="B" name="B"></a>
<div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
<a class="glossary_letter" id="C" name="C"></a>
<div class="glossary_item"><span class="glossary-title">C - Lorem ipsum dolor </span></div>
<a class="glossary_letter" id="D" name="D"></a>
<div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
<a class="glossary_letter" id="E" name="E"></a>
<div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
<div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
</div>
</div>
</div>
Related
I am developing a webpage but a horizontal scroll bar is present in the page. I want to remove it but can not. I have been into web development recently and most of web pages I made for practice faced the same problem.
I expect the following part of code to be faulty
.heading::before{border: 2px solid chocolate;
content: "";
height: 100vh;
background: url(....) no-repeat center ;
width: 100vw;
position: absolute;
top: 0px;
left: 0px;
z-index: -1; }
*{
margin: 0px;
padding: 0px;
}
nav{
position: sticky;
top: 0px;
left:0px;
margin: 0px 0px 10px 0px;
padding: 5px 5px;
background-color: #15191f;
}
.heading{
height: 90vh;
}
.heading::before{
border: 2px solid chocolate;
content: "";
height: 100vh;
background: url() no-repeat center ;
width: 100vw;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
.flex{
display: flex;
}
.flex-row{
flex-direction: row;
}
.flex-column{
flex-direction: column;
}
.wrap{
flex-wrap: wrap;
}
.al-cen{
align-items: center;
}
.ju-cen{
justify-content: center;
}
nav a{
text-decoration: none;
background-color: #15191f;
color: #e3ecf3;
padding: 4px 10px;
border: 2px;
border-radius: 10px;
}
nav a:hover{
color: #15191f;
background-color: #e3ecf3;
}
#li1{
margin-left: 50px;
}
#a1{
margin: 0px 4px;
}
#a2{
margin: 0px 4px;
}
#a3{
margin: 0px 4px;
}
#a4{
margin: 0px 4px;
}
nav ul li{
list-style: none;
}
#logo{
width: 5vw;
border: 2px ;
border-radius:100mm;
}
/* -------------------------------------------------------------------- */
div ul{
margin: 0px 40px;
}
body{
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.5vw;
background-color: #e3ecf3;
}
div{
margin: 20px 15px;
}
ol li{
margin: 0px 40px;
}
.block{
display:block;
}
.inline-block{
display: inline-block;
}
.border-red{
border: 3.5px solid red;
border-radius: 12px;
}
.border-green{
border: 3.5px solid green;
border-radius: 5px;
}
.border-blue{
border: 3.5px solid blue;
border-radius: 5px;
}
.line-height{
line-height: 8vh;
}
ol{
border: 2px solid blue;
border-radius: 5px;
text-align: center;
/* display: inline-block; */
margin: 4px 0px;
width:300px
}
.text-cen{
text-align: center;
}
ol li{
margin-left: 40px;
}
input{
display: block;
}
option{
background-color:#15191f;
color:#e3ecf3;
height: 50px;
font-size: 1.1rem;
border-radius: 5px;
}
select{
width: 85px;
background-color:#15191f;
color:#e3ecf3;
height:30px;
border: 2px solid #15191f;
border-radius: 6px;
}
.button{
height: 25px;
width: 25px;
/* border: 2px solid #15191f; */
border-radius: 100px;
/* background-color: #15191f; */
}
/* .button: */
.checkbox{
/* background-color: #15191f; */
height: 25px;
width: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All in One</title>
<link rel="stylesheet" href="../CSS/home.css">
<script src="../JS/home.js"></script>
</head>
<body class="">
<nav class="flex row al-cen">
<img id="logo" src="../random_source" alt="Error loading image">
<ul class="flex row">
<li id="li1"><a id="a1" href="../HTML/home.html" target="_blank">Home</a></li>
<li id="li2"><a id="a2" href="../HTML/about.html" target="_blank">About Us</a></li>
<li id="li3"><a id="a3" href="../HTML/services.html" target="_blank">Our Services</a></li>
<li id="li4"><a id="a4" href="../HTML/contact.html" target="_blank">Contact Us</a></li>
</ul>
</nav>
<div class="heading flex flex-column al-cen ju-cen">
<h1 class="line-height">All in ONE Website</h1>
<p>This <strong>Website</strong> aims to <i>include</i> all that has been <em>learnt</em> and keep a record of
it for future usage.</p>
</div>
<hr>
<div class="border-red firstpara">
<p><b>
<\b>This Bold<\b>
</b>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <br><strong>
<\br> Has been used here and here<\br><br>
</strong> modi molestias omnis voluptate alias unde voluptates provident hic voluptatibus ipsum deleniti
itaque
delectus et expedita quisquam, non soluta, harum consequuntur sapiente rem quaerat. Repellendus, impedit.
</p>
</div>
<div class="border-green lists">
<div class="orderdlist block border flex-row ">
<ol id="ol1" class="inline-block" type="1">
<h6>OL type 1</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="olA" class="inline-block" type="A">
<h6>OL type A</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="ola" class="inline-block" type="a">
<h6>OL type a</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="olI" class="inline-block" type="I">
<h6>OL type I</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="oli" class="inline-block" type="i">
<h6>OL type i</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
</div>
<div class="unorderedlist">
<ul type="square">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul type="circle">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul type="disc">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
</div>
<div class="border-blue table text-cen flex flex-column wrap">
<h3>This is a Table</h3>
<table>
<thead>
<tr>
<th>Heading-1</th>
<th>Heading-2</th>
<th>Heading-3</th>
<th>Heading-4</th>
<th>Heading-5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row-1-Colum-1</td>
<td>Row-1-Colum-2</td>
<td>Row-1-Colum-3</td>
<td>Row-1-Colum-4</td>
<td>Row-1-Colum-5</td>
</tr>
<tr>
<td>Row-2-Column-1</td>
<td>Row-2-Column-2</td>
<td>Row-2-Column-3</td>
<td>Row-2-Column-4</td>
<td>Row-2-Column-5</td>
</tr>
<tr>
<td>Row-3-Column-1</td>
<td>Row-3-Column-2</td>
<td>Row-3-Column-3</td>
<td>Row-3-Column-4</td>
<td>Row-3-Column-5</td>
</tr>
</tbody>
</table>
</div>
<div class="border-red forms flex flex-column">
<h1 class="text-cen">FORMS</h1>
<h5>Below are some types of input we can ask on forms.Include a NAME in input tags
</h5>
<p>We will make input tag a block element to make go to next line and make the code look clean.
Before it was inline so elements crammmed over each other.We can add value="" to show that thing.<br>
The diff between value and placeholder is that the placeholder gets removed whan an item is entered, wheras
when we enter an item at place of value, it concencates in the value. Placeholder is Background, value is
not.
#gmail.com is value below in email. Remaining are Placeholder
</p>
<form action="#">
Button <input class="button" type="button" placeholder="Placeholder">
Checkbox<input type="checkbox" class="checkbox" placeholder="Placeholder">
Color<input type="color" placeholder="Placeholder">
Date<input type="date" placeholder="Placeholder">
Datetime<input type="datetime" placeholder="Placeholder">
Datetime-local<input type="datetime-local" placeholder="Placeholder"><p>Just Testing</p>
Email<input type="email" value="#gmail.com" placeholder="Placeholder">
File<input type="file" placeholder="Placeholder">
Hidden<input type="hidden" placeholder="Placeholder">
Image<input type="image" placeholder="Placeholder">
Month<input type="month" placeholder="Placeholder">
Number<input type="number" placeholder="Placeholder">
Password<input type="password" placeholder="Placeholder">
Radio<input type="radio" placeholder="Placeholder">
Range<input type="range" placeholder="Placeholder">
Reset<input type="reset" placeholder="Placeholder">
Search<input type="search" placeholder="Placeholder">
Submit<input type="submit" placeholder="Placeholder">
Tel<input type="tel" placeholder="Placeholder">
Text<input type="text" placeholder="Placeholder">
Time<input type="time" placeholder="Placeholder">
Url<input type="url" placeholder="Placeholder">
Week<input type="week" placeholder="Placeholder">
Select from a dropdown <select>
<option value="Option-1-Val">Option-1</option>
<option value="Option-2-Val">Option-2</option>
<option value="Option-3-Val">Option-3</option>
<option value="Option-4-Val">Option-4</option>
<option value="Option-5-Val">Option-5</option>
</select>
</form>
</div>
<div class="entities border-green">
<h4>We use entities for displaying some character</h4>
<
<!-- Less Than -->
>
<!-- Greater Than -->
£
<!-- pound -->
©
<!-- copy -->
⇛
<!-- Arrow -->
½
<!-- In form of fraction -->
</div>
<div class="border-blue semanticelements">
<p>A dropdown button which shows whatever is written in summary and when clicked reveals what is written in detail tag.</p>
<details>
<summary>I have keys but no doors. I have space but no room. You can enter but you can't leave. What am i?</summary>
A Keyboard.
</details>
<p>Now i will use a time tag</p>
<p>We will be celebrating new year on <time datetime="2022-12-12">December 12</time> in my house.</p>
</div>
</body>
</html>
Specifically width: 100vw , if I remove this line the scrollbar disappears but so does the image.
width:auto also makes the picture disappears.
I want to display a background picture using this code (picture's address in url). If I remove this code the horizontal scroll bar disappears. Using a border shows that it is indeed the problem. How can I hide scroll bar while displaying an image on whole screen, no matter the size. (I mean no part of screen should be left out.)
Most of the answers out there suggest to remove 100vw and 100% width but that removes the picture
If possible suggest other ways which will allow me to display image on full screen without causing any problems to the aesthetics. The picture should be in background and for a specific tag only, not whole webpage.
You need to set box-sizing specifically for pseudo elements.
*, *::before, *::after{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav{
position: sticky;
top: 0px;
left:0px;
margin: 0px 0px 10px 0px;
padding: 5px 5px;
background-color: #15191f;
}
.heading{
height: 90vh;
}
.heading::before{
border: 2px solid chocolate;
content: "";
height: 100vh;
background: url() no-repeat center ;
width: 100vw;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
.flex{
display: flex;
}
.flex-row{
flex-direction: row;
}
.flex-column{
flex-direction: column;
}
.wrap{
flex-wrap: wrap;
}
.al-cen{
align-items: center;
}
.ju-cen{
justify-content: center;
}
nav a{
text-decoration: none;
background-color: #15191f;
color: #e3ecf3;
padding: 4px 10px;
border: 2px;
border-radius: 10px;
}
nav a:hover{
color: #15191f;
background-color: #e3ecf3;
}
#li1{
margin-left: 50px;
}
#a1{
margin: 0px 4px;
}
#a2{
margin: 0px 4px;
}
#a3{
margin: 0px 4px;
}
#a4{
margin: 0px 4px;
}
nav ul li{
list-style: none;
}
#logo{
width: 5vw;
border: 2px ;
border-radius:100mm;
}
/* -------------------------------------------------------------------- */
div ul{
margin: 0px 40px;
}
body{
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.5vw;
background-color: #e3ecf3;
}
div{
margin: 20px 15px;
}
ol li{
margin: 0px 40px;
}
.block{
display:block;
}
.inline-block{
display: inline-block;
}
.border-red{
border: 3.5px solid red;
border-radius: 12px;
}
.border-green{
border: 3.5px solid green;
border-radius: 5px;
}
.border-blue{
border: 3.5px solid blue;
border-radius: 5px;
}
.line-height{
line-height: 8vh;
}
ol{
border: 2px solid blue;
border-radius: 5px;
text-align: center;
/* display: inline-block; */
margin: 4px 0px;
width:300px
}
.text-cen{
text-align: center;
}
ol li{
margin-left: 40px;
}
input{
display: block;
}
option{
background-color:#15191f;
color:#e3ecf3;
height: 50px;
font-size: 1.1rem;
border-radius: 5px;
}
select{
width: 85px;
background-color:#15191f;
color:#e3ecf3;
height:30px;
border: 2px solid #15191f;
border-radius: 6px;
}
.button{
height: 25px;
width: 25px;
/* border: 2px solid #15191f; */
border-radius: 100px;
/* background-color: #15191f; */
}
/* .button: */
.checkbox{
/* background-color: #15191f; */
height: 25px;
width: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All in One</title>
<link rel="stylesheet" href="../CSS/home.css">
<script src="../JS/home.js"></script>
</head>
<body class="">
<nav class="flex row al-cen">
<img id="logo" src="../random_source" alt="Error loading image">
<ul class="flex row">
<li id="li1"><a id="a1" href="../HTML/home.html" target="_blank">Home</a></li>
<li id="li2"><a id="a2" href="../HTML/about.html" target="_blank">About Us</a></li>
<li id="li3"><a id="a3" href="../HTML/services.html" target="_blank">Our Services</a></li>
<li id="li4"><a id="a4" href="../HTML/contact.html" target="_blank">Contact Us</a></li>
</ul>
</nav>
<div class="heading flex flex-column al-cen ju-cen">
<h1 class="line-height">All in ONE Website</h1>
<p>This <strong>Website</strong> aims to <i>include</i> all that has been <em>learnt</em> and keep a record of
it for future usage.</p>
</div>
<hr>
<div class="border-red firstpara">
<p><b>
<\b>This Bold<\b>
</b>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <br><strong>
<\br> Has been used here and here<\br><br>
</strong> modi molestias omnis voluptate alias unde voluptates provident hic voluptatibus ipsum deleniti
itaque
delectus et expedita quisquam, non soluta, harum consequuntur sapiente rem quaerat. Repellendus, impedit.
</p>
</div>
<div class="border-green lists">
<div class="orderdlist block border flex-row ">
<ol id="ol1" class="inline-block" type="1">
<h6>OL type 1</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="olA" class="inline-block" type="A">
<h6>OL type A</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="ola" class="inline-block" type="a">
<h6>OL type a</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="olI" class="inline-block" type="I">
<h6>OL type I</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="oli" class="inline-block" type="i">
<h6>OL type i</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
</div>
<div class="unorderedlist">
<ul type="square">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul type="circle">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul type="disc">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
</div>
<div class="border-blue table text-cen flex flex-column wrap">
<h3>This is a Table</h3>
<table>
<thead>
<tr>
<th>Heading-1</th>
<th>Heading-2</th>
<th>Heading-3</th>
<th>Heading-4</th>
<th>Heading-5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row-1-Colum-1</td>
<td>Row-1-Colum-2</td>
<td>Row-1-Colum-3</td>
<td>Row-1-Colum-4</td>
<td>Row-1-Colum-5</td>
</tr>
<tr>
<td>Row-2-Column-1</td>
<td>Row-2-Column-2</td>
<td>Row-2-Column-3</td>
<td>Row-2-Column-4</td>
<td>Row-2-Column-5</td>
</tr>
<tr>
<td>Row-3-Column-1</td>
<td>Row-3-Column-2</td>
<td>Row-3-Column-3</td>
<td>Row-3-Column-4</td>
<td>Row-3-Column-5</td>
</tr>
</tbody>
</table>
</div>
<div class="border-red forms flex flex-column">
<h1 class="text-cen">FORMS</h1>
<h5>Below are some types of input we can ask on forms.Include a NAME in input tags
</h5>
<p>We will make input tag a block element to make go to next line and make the code look clean.
Before it was inline so elements crammmed over each other.We can add value="" to show that thing.<br>
The diff between value and placeholder is that the placeholder gets removed whan an item is entered, wheras
when we enter an item at place of value, it concencates in the value. Placeholder is Background, value is
not.
#gmail.com is value below in email. Remaining are Placeholder
</p>
<form action="#">
Button <input class="button" type="button" placeholder="Placeholder">
Checkbox<input type="checkbox" class="checkbox" placeholder="Placeholder">
Color<input type="color" placeholder="Placeholder">
Date<input type="date" placeholder="Placeholder">
Datetime<input type="datetime" placeholder="Placeholder">
Datetime-local<input type="datetime-local" placeholder="Placeholder"><p>Just Testing</p>
Email<input type="email" value="#gmail.com" placeholder="Placeholder">
File<input type="file" placeholder="Placeholder">
Hidden<input type="hidden" placeholder="Placeholder">
Image<input type="image" placeholder="Placeholder">
Month<input type="month" placeholder="Placeholder">
Number<input type="number" placeholder="Placeholder">
Password<input type="password" placeholder="Placeholder">
Radio<input type="radio" placeholder="Placeholder">
Range<input type="range" placeholder="Placeholder">
Reset<input type="reset" placeholder="Placeholder">
Search<input type="search" placeholder="Placeholder">
Submit<input type="submit" placeholder="Placeholder">
Tel<input type="tel" placeholder="Placeholder">
Text<input type="text" placeholder="Placeholder">
Time<input type="time" placeholder="Placeholder">
Url<input type="url" placeholder="Placeholder">
Week<input type="week" placeholder="Placeholder">
Select from a dropdown <select>
<option value="Option-1-Val">Option-1</option>
<option value="Option-2-Val">Option-2</option>
<option value="Option-3-Val">Option-3</option>
<option value="Option-4-Val">Option-4</option>
<option value="Option-5-Val">Option-5</option>
</select>
</form>
</div>
<div class="entities border-green">
<h4>We use entities for displaying some character</h4>
<
<!-- Less Than -->
>
<!-- Greater Than -->
£
<!-- pound -->
©
<!-- copy -->
⇛
<!-- Arrow -->
½
<!-- In form of fraction -->
</div>
<div class="border-blue semanticelements">
<p>A dropdown button which shows whatever is written in summary and when clicked reveals what is written in detail tag.</p>
<details>
<summary>I have keys but no doors. I have space but no room. You can enter but you can't leave. What am i?</summary>
A Keyboard.
</details>
<p>Now i will use a time tag</p>
<p>We will be celebrating new year on <time datetime="2022-12-12">December 12</time> in my house.</p>
</div>
</body>
</html>
On the pseudo element I added box-sizing: border-box and changed the width to 100% instead of 100vw.
box-sizing: border-box
This changes which box is used when declaring absolute widths. When we set this to border-box, it means that the border is placed inside of the declared width, not adding to it.
i.e. I have a 100px wide box with 2px border, I want the border to be included in that 100px, not added to it.
width: 100%
Percent widths are relative to the width of the container, whereas viewport are relative to the viewport. 100% means take up all the width of the container I'm in, 100vw means take up all of the viewport width (including the scrollbar).
* {
margin: 0px;
padding: 0px;
}
nav {
position: sticky;
top: 0px;
left: 0px;
margin: 0px 0px 10px 0px;
padding: 5px 5px;
background-color: #15191f;
}
.heading {
height: 90vh;
}
.heading::before {
box-sizing: border-box;
border: 2px solid chocolate;
content: "";
height: 100vh;
background: url() no-repeat center;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
.flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.flex-column {
flex-direction: column;
}
.wrap {
flex-wrap: wrap;
}
.al-cen {
align-items: center;
}
.ju-cen {
justify-content: center;
}
nav a {
text-decoration: none;
background-color: #15191f;
color: #e3ecf3;
padding: 4px 10px;
border: 2px;
border-radius: 10px;
}
nav a:hover {
color: #15191f;
background-color: #e3ecf3;
}
#li1 {
margin-left: 50px;
}
#a1 {
margin: 0px 4px;
}
#a2 {
margin: 0px 4px;
}
#a3 {
margin: 0px 4px;
}
#a4 {
margin: 0px 4px;
}
nav ul li {
list-style: none;
}
#logo {
width: 5vw;
border: 2px;
border-radius: 100mm;
}
/* -------------------------------------------------------------------- */
div ul {
margin: 0px 40px;
}
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.5vw;
background-color: #e3ecf3;
}
div {
margin: 20px 15px;
}
ol li {
margin: 0px 40px;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.border-red {
border: 3.5px solid red;
border-radius: 12px;
}
.border-green {
border: 3.5px solid green;
border-radius: 5px;
}
.border-blue {
border: 3.5px solid blue;
border-radius: 5px;
}
.line-height {
line-height: 8vh;
}
ol {
border: 2px solid blue;
border-radius: 5px;
text-align: center;
/* display: inline-block; */
margin: 4px 0px;
width: 300px
}
.text-cen {
text-align: center;
}
ol li {
margin-left: 40px;
}
input {
display: block;
}
option {
background-color: #15191f;
color: #e3ecf3;
height: 50px;
font-size: 1.1rem;
border-radius: 5px;
}
select {
width: 85px;
background-color: #15191f;
color: #e3ecf3;
height: 30px;
border: 2px solid #15191f;
border-radius: 6px;
}
.button {
height: 25px;
width: 25px;
/* border: 2px solid #15191f; */
border-radius: 100px;
/* background-color: #15191f; */
}
/* .button: */
.checkbox {
/* background-color: #15191f; */
height: 25px;
width: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All in One</title>
<link rel="stylesheet" href="../CSS/home.css">
<script src="../JS/home.js"></script>
</head>
<body class="">
<nav class="flex row al-cen">
<img id="logo" src="../random_source" alt="Error loading image">
<ul class="flex row">
<li id="li1"><a id="a1" href="../HTML/home.html" target="_blank">Home</a></li>
<li id="li2"><a id="a2" href="../HTML/about.html" target="_blank">About Us</a></li>
<li id="li3"><a id="a3" href="../HTML/services.html" target="_blank">Our Services</a></li>
<li id="li4"><a id="a4" href="../HTML/contact.html" target="_blank">Contact Us</a></li>
</ul>
</nav>
<div class="heading flex flex-column al-cen ju-cen">
<h1 class="line-height">All in ONE Website</h1>
<p>This <strong>Website</strong> aims to <i>include</i> all that has been <em>learnt</em> and keep a record of it for future usage.</p>
</div>
<hr>
<div class="border-red firstpara">
<p><b>
<\b>This Bold<\b>
</b>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <br><strong>
<\br> Has been used here and here<\br><br>
</strong> modi molestias omnis voluptate alias unde voluptates provident hic voluptatibus ipsum deleniti itaque delectus et expedita quisquam, non soluta, harum consequuntur sapiente rem quaerat. Repellendus, impedit.
</p>
</div>
<div class="border-green lists">
<div class="orderdlist block border flex-row ">
<ol id="ol1" class="inline-block" type="1">
<h6>OL type 1</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="olA" class="inline-block" type="A">
<h6>OL type A</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="ola" class="inline-block" type="a">
<h6>OL type a</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="olI" class="inline-block" type="I">
<h6>OL type I</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="oli" class="inline-block" type="i">
<h6>OL type i</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
</div>
<div class="unorderedlist">
<ul type="square">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul type="circle">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul type="disc">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
</div>
<div class="border-blue table text-cen flex flex-column wrap">
<h3>This is a Table</h3>
<table>
<thead>
<tr>
<th>Heading-1</th>
<th>Heading-2</th>
<th>Heading-3</th>
<th>Heading-4</th>
<th>Heading-5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row-1-Colum-1</td>
<td>Row-1-Colum-2</td>
<td>Row-1-Colum-3</td>
<td>Row-1-Colum-4</td>
<td>Row-1-Colum-5</td>
</tr>
<tr>
<td>Row-2-Column-1</td>
<td>Row-2-Column-2</td>
<td>Row-2-Column-3</td>
<td>Row-2-Column-4</td>
<td>Row-2-Column-5</td>
</tr>
<tr>
<td>Row-3-Column-1</td>
<td>Row-3-Column-2</td>
<td>Row-3-Column-3</td>
<td>Row-3-Column-4</td>
<td>Row-3-Column-5</td>
</tr>
</tbody>
</table>
</div>
<div class="border-red forms flex flex-column">
<h1 class="text-cen">FORMS</h1>
<h5>Below are some types of input we can ask on forms.Include a NAME in input tags
</h5>
<p>We will make input tag a block element to make go to next line and make the code look clean. Before it was inline so elements crammmed over each other.We can add value="" to show that thing.<br> The diff between value and placeholder is that the placeholder
gets removed whan an item is entered, wheras when we enter an item at place of value, it concencates in the value. Placeholder is Background, value is not. #gmail.com is value below in email. Remaining are Placeholder
</p>
<form action="#">
Button <input class="button" type="button" placeholder="Placeholder"> Checkbox
<input type="checkbox" class="checkbox" placeholder="Placeholder"> Color
<input type="color" placeholder="Placeholder"> Date
<input type="date" placeholder="Placeholder"> Datetime
<input type="datetime" placeholder="Placeholder"> Datetime-local
<input type="datetime-local" placeholder="Placeholder">
<p>Just Testing</p>
Email<input type="email" value="#gmail.com" placeholder="Placeholder"> File
<input type="file" placeholder="Placeholder"> Hidden
<input type="hidden" placeholder="Placeholder"> Image
<input type="image" placeholder="Placeholder"> Month
<input type="month" placeholder="Placeholder"> Number
<input type="number" placeholder="Placeholder"> Password
<input type="password" placeholder="Placeholder"> Radio
<input type="radio" placeholder="Placeholder"> Range
<input type="range" placeholder="Placeholder"> Reset
<input type="reset" placeholder="Placeholder"> Search
<input type="search" placeholder="Placeholder"> Submit
<input type="submit" placeholder="Placeholder"> Tel
<input type="tel" placeholder="Placeholder"> Text
<input type="text" placeholder="Placeholder"> Time
<input type="time" placeholder="Placeholder"> Url
<input type="url" placeholder="Placeholder"> Week
<input type="week" placeholder="Placeholder"> Select from a dropdown
<select>
<option value="Option-1-Val">Option-1</option>
<option value="Option-2-Val">Option-2</option>
<option value="Option-3-Val">Option-3</option>
<option value="Option-4-Val">Option-4</option>
<option value="Option-5-Val">Option-5</option>
</select>
</form>
</div>
<div class="entities border-green">
<h4>We use entities for displaying some character</h4>
<
<!-- Less Than -->
>
<!-- Greater Than -->
£
<!-- pound -->
©
<!-- copy -->
⇛
<!-- Arrow -->
½
<!-- In form of fraction -->
</div>
<div class="border-blue semanticelements">
<p>A dropdown button which shows whatever is written in summary and when clicked reveals what is written in detail tag.</p>
<details>
<summary>I have keys but no doors. I have space but no room. You can enter but you can't leave. What am i?</summary>
A Keyboard.
</details>
<p>Now i will use a time tag</p>
<p>We will be celebrating new year on <time datetime="2022-12-12">December 12</time> in my house.</p>
</div>
</body>
</html>
In main tag of your website you should give width 100%:
width : 100%;
if you set 100vw your browser take overflow-x as well as your vertical scrollbar width.
I'm trying to style a reusable component such that it will stay inline but truncate its contents whenever it overflows. What makes it trickier is that I need to have an icon on the right.
The main issue is that I need the icon to stay on the same line, so I compensate for it in the width of the truncated text (width: calc(100% - 40px)), which makes any non-truncating example be that much shorter than it's normal width.
See the snippet below and how the short example is barely visible.
body, .container {
width: 100%;
padding: 0;
margin: 50px 0;
}
.quantity-value {
display: inline-block;
max-width: 100%;
margin-right: 16px;
background: #f1f1f1;
}
.value-and-icon-wrapper {
display: inline-block;
width: 100%;
}
.icon {
padding-left: 5px;
}
.truncated-text {
display: inline-block;
width: calc(100% - 40px);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
vertical-align: top;
-webkit-line-clamp: 1;
}
<!-- Example 1: short -->
<div class="container">
<div class="quantity-value">
<div class="value-and-icon-wrapper">
<span class="truncated-text">67</span>
<span class="icon">ℹ️</span>
</div>
</div>
other content
</div>
<!-- Example 2: long -->
<div class="container">
<div class="quantity-value">
<div class="value-and-icon-wrapper">
<span class="truncated-text">68 long text starting now lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</span>
<span class="icon">ℹ️</span>
</div>
</div>
other content
</div>
This is because you are using a lot of inline-block and the width of inline-block is defined by its content so if you set 100% - 40px for a child item, it means its width minus 40px
Try to do it differently like below using flexbox:
body, .container {
width: 100%;
padding: 0;
margin: 50px 0;
}
.quantity-value {
display: inline-flex;
max-width: calc(100% - 16px); /* don't forget to account for margin here */
margin-right: 16px;
background: #f1f1f1;
}
.icon {
padding-left: 5px;
}
.truncated-text {
flex:1;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<!-- Example 1: short -->
<div class="container">
<div class="quantity-value">
<span class="truncated-text">67</span>
<span class="icon">ℹ️</span>
</div>
other content
</div>
<!-- Example 2: long -->
<div class="container">
<div class="quantity-value">
<span class="truncated-text">68 long text starting now lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</span>
<span class="icon">ℹ️</span>
</div>
other content
</div>
Without flexbox you can do it like below:
body, .container {
margin: 50px 0;
}
.quantity-value {
display: inline-block;
max-width: calc(100% - 16px); /* don't forget to account for margin/padding here */
margin-right: 16px;
background: #f1f1f1;
padding-right:20px;
box-sizing:border-box;
position:relative;
}
.icon {
padding-left: 5px;
position:absolute;
right:0;
top:0;
bottom:0;
}
.truncated-text {
display:block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<!-- Example 1: short -->
<div class="container">
<div class="quantity-value">
<span class="truncated-text">67</span>
<span class="icon">ℹ️</span>
</div>
other content
</div>
<!-- Example 2: long -->
<div class="container">
<div class="quantity-value">
<span class="truncated-text">68 long text starting now lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</span>
<span class="icon">ℹ️</span>
</div>
other content
</div>
Try applying the style text-overflow: ellipsis to the div that contains the text to be truncated.
MDN Documentation for text-overflow
I am building a message box with title, description, and answers.
I have been struggling for days with that, even played with a Codepen, but can't figure to handle this correctly.
I need:
Title to expand to a maximum of 300px before scrolling
Description to expand to a maximum to left space if no answer (or few), distribute space say 80% of space otherwise (I will add a button to hide this space) before scrolling also
Fixed height for message number title
Messages div to expand to a maximum space left
Input area to stay at bottom and able to size up if any user input (again let's say 20% before scrolling?)
Codepen link
<div class="demoContainer">
<div class="page">
<div class="title">
<h1>My awesome title that is so long i will move everything down</h1>
<button>Some stuff to click</button>
</div>
<div class="row">
<div class="colLeft">
<div class="description">
<h2>Author</h2>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
</div>
<div class="between">
<p>Answers</p>
</div>
<div class="messages">
<ul>
<li>
toto
</li>
<li>
tAta
</li>
<li>
tAta
tAta
</li>
<li>
tAta
</li>
<li>
tAta
</li>
<li>
tAta
</li>
>
<li>
tAta
</li>
>
<li>
tAta
</li>
>
<li>
tAta
</li>
>
<li>
tAta
</li>
</ul>
</div>
<div class="input">
<textarea placeholder="Input height adapt to size until a maximum"></textarea>
</div>
</div>
<div class="colRight">
<ul>
<li>
some
</li>
<li>
stuff
</li>
</ul>
</div>
</div>
</div>
<div class="divider"></div>
<div class="page">
<div class="title">
<h1>My awesome short title</h1>
<button>Some stuff to click</button>
</div>
<div class="row">
<div class="colLeft">
<div class="description">
<h2>Author</h2>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
</div>
<div class="between">
<p>Answers</p>
</div>
<div class="messages">
<ul>
<li>
toto
</li>
<li>
tAta
</li>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</ul>
</div>
<div class="input">
<textarea placeholder="Input height adapt to size until a maximum"></textarea>
</div>
</div>
<div class="colRight">
<ul>
<li>
some
</li>
<li>
stuff
</li>
</ul>
</div>
</div>
</div>
</div>
* {
box-sizing: border-box;
}
.demoContainer {
display: flex;
flex-direction: row;
}
.divider {
width: 8px;
}
.page {
height: 600px;
width: 550px;
background-color: lightgrey;
display: flex;
flex-direction: column;
overflow: auto;
}
.title {
display: inline-flex;
justify-content: space-between;
align-items: center;
max-height: 200px;
}
.title button {
width: 90px;
height: 30px;
}
.row {
display: flex;
/*flex: 1 1 100%;*/
min-height: 0;
height: 100%;
}
.colLeft {
flex: 3 1 auto;
min-height: 0;
height: 100%;
border: 1px solid blue;
display: block;
flex-direction: column;
position: relative;
/*align-items: stretch;
align-content: stretch;*/
}
.description {
border: 1px dashed black;
/*flex: 4 1 100%;*/
max-height: 60%;
overflow: scroll;
}
.between {
border: 1px solid green;
height: 1, 1em;
}
.between>p {
margin: 0;
}
.messages {
border: 1px dashed red;
/*flex: 2 100 auto;*/
overflow: scroll;
}
ul {
max-width: 100%;
}
.input {
width: 100%;
min-height: 1rem;
flex: 1 1 3rem;
display: flex;
border: 1px solid yellow;
position: relative;
bottom: 0;
}
.input>textarea {
width: 100%;
}
.colRight {
flex: 1 1 auto;
border: 1px solid black;
min-width: 150px;
overflow: scroll;
}
The one on the right is a short example of what I would like, but remove <br/> to see the problem.
I tried with display: grid, isplay: block display: flex. I can't seem to find anything satisfying my needs.
My question is: is that even possible? With CSS only?
For everyone wondering, i discovered a few things while digging into css.
First of all is you can set a 100% height on a div to take up the free space if another element is in, but if and only if you set the parent element display: flex; !
With that in mind, it comes easier.
After that, I decided to dive into JS as my problem does not seem to be solvable with CSS only.
I took advantage of the "new" position: sticky; property, and my JS can take care of position it top: 0; or bottom: 0; depending on the scrolling position.
CSS Added :
.stickyBottom{
position: sticky;
bottom: 0;
}
.stickyTop{
position: sticky;
top: 0;
}
JS Code added:
var colLeft = document.getElementsByClassName("messagesInput")[0];
colLeft.onscroll = function(){myFunction()};
// Get the navbar
var between = document.getElementsByClassName("between")[0];
var desc = document.getElementsByClassName("description")[0];
// Get the offset position of the navbar
var sticky = between.offsetTop;
//between.classList.remove("stickyBottom")
function myFunction() {
if (colLeft.scrollTop >= sticky) {
between.classList.remove("stickyBottom")
between.classList.add("stickyTop")
} else {
between.classList.add("stickyBottom")
between.classList.remove("stickyTop");
}
}
It ends up in a way better UX than I initially wanted ! :)
CodePen Link updated accordingly.
I have problem problem with centering element on mobile devices, when height decreases, top content is hidden but on desktop is okey. Please see below link for see problem in screenshot
Desktop version
Mobile version
HTML
<div class="modal">
<div class="modal-section">
<div class="modal-area">
<div class="header">
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet,
consectetur
</div>
<div class="items">
<div class="element">
<div class="img">
<img src="https://via.placeholder.com/150" alt="">
</div>
<div class="desc">
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet,
consectetur
</div>
</div>
<div class="element">
<div class="img">
<img src="https://via.placeholder.com/150" alt="">
</div>
<div class="desc">
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet,
consectetur
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.modal {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: oldlace;
color: #2F2F2F;
z-index: 99999;
overflow: auto;
}
.items {
display: flex;
margin: 20px 0;
justify-content: center;
}
.element {
overflow: hidden;
background: #2F2F2F;
color: #fff;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
margin: 20px;
cursor: pointer;
width: 150px;
}
.img {
height: 150px;
}
example code
https://jsfiddle.net/twzud65n/3/
Seems like you have some elements that don't quite do something and have no styling applied to fit in. What is the suppose of modal-section?
Because you have position: fixed on your modal, you need to tell its children to not overflow their parent. width: 100% does that, height: auto means it can scale as much as needed allowing to scroll.
Try this:
.modal-section {
width: 100%;
height: auto;
}
It's because of justify-content: center which is centering your element (even if it's overflowing). You can turn it off and add margin:auto to .modal-section.
Example
.modal {
display: flex;
flex-flow: column nowrap;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: oldlace;
color: #2F2F2F;
z-index: 99999;
overflow: auto;
}
.modal-section {
margin: auto;
}
.items {
display: flex;
margin: 20px 0;
justify-content: center;
}
.element {
overflow: hidden;
background: #2F2F2F;
color: #fff;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
margin: 20px;
cursor: pointer;
width: 150px;
}
.img {
height: 150px;
}
<div class="modal">
<div class="modal-section">
<div class="modal-area">
<div class="header">
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet,
consectetur
</div>
<div class="items">
<div class="element">
<div class="img">
<img src="https://via.placeholder.com/150" alt="">
</div>
<div class="desc">
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet,
consectetur
</div>
</div>
<div class="element">
<div class="img">
<img src="https://via.placeholder.com/150" alt="">
</div>
<div class="desc">
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet,
consectetur
</div>
</div>
</div>
</div>
</div>
</div>
I am trying to place elements in my header. I would like to have 3 elements inline - button, image and simple text. The height of the header should be equal height of image. All elements should be centered vertically. Here's my HTML:
<div class="btn">
...
</div>
<img src="image.jpg">
<span style="float:none; display: inline-block; vertical-align: middle">lorem ipsum lorem ipsum</span>
On image "a" I present expected behavior. On image "b" and "c" my results were shown.
So, the expected result is to wrap text if it doesn't fit the page. But it still should be on the right side.
Legend:
red rectangle - button
orange rectangle - image
Does anyone know what styles I should use?
You should make them:
display: inline-block
Here is pretty simple demo:
HTML:
<div class="row">
<div class="btn">...</div>
<img src="http://www.ibm.com/developerworks/data/library/techarticle/dm-0504stolze/test_1.jpg" />
<span>lorem ipsum<br/> lorem ipsum</span>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
.row > * {
display: inline-block;
vertical-align: middle;
}
.btn {
width: 30px;
height: 30px;
background-color: red;
}
Demo
Another way.
HTML:
<div class="row">
<div class="btn">...</div>
<img src="http://www.ibm.com/developerworks/data/library/techarticle/dm-0504stolze/test_1.jpg" /> <span>lorem ipsum<br/> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum</span>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
.row > * {
display: table-cell;
vertical-align: middle;
}
.btn {
width: 30px;
height: 30p;
background-color: red;
}
.row { display: table-row; }
Demo
Try giving your span a width. That would force the line breaks in your "a" example.
HTML
<div class="header">
<div class="btn">BUTTON</div>
<img src="http://lorempixel.com/200/200" /><span>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</span>
</div>
CSS
.header {
width: 500px;
background: dimgrey;
}
.btn, img, span {
display:inline-block;
vertical-align: middle;
}
span {
width:200px;
text-align: center;
}
http://jsfiddle.net/abN39/1