I can't use elipsis in the flex box, what should I do?
I don't think the width works in the variable area.
Text ellipsis in Flexbox not working :(
Please help me improve my source code.
<style>
.container {
width: 50%;
display: flex;
flex-direction: row;
}
.list.left {
flex: 0 0 300px;
}
.list.right {
flex: 1;
}
.row {
display: flex;
flex-direction: row;
}
.row p {
flex: 1;
width: calc(100% - 50px);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.row button {
width: 50px;
}
</style>
<div class="container">
<div class="list left">
<div class="row">
<p>abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde</p>
<button>edit</button>
</div>
</div>
<div class="list right">
<div class="row">
<p>abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde</p>
<button>edit</button>
</div>
</div>
</div>
Remove display: flex; flex-direction: row on container.
.container {
width: 50%;
}
.list.left {
flex: 0 0 300px;
}
.list.right {
flex: 1;
}
.row {
display: flex;
flex-direction: row;
}
.row p {
flex: 1;
width: calc(100% - 50px);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.row button {
width: 50px;
}
<div class="container">
<div class="list left">
<div class="row">
<p>abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde</p>
<button>edit</button>
</div>
</div>
<div class="list right">
<div class="row">
<p>abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde</p>
<button>edit</button>
</div>
</div>
</div>
Related
Hi I'm trying to vertically and horizontally center a grid div by using flexbox inside a another div with a background image. It goes to the top left.
.flex_center {
display: flex;
align-items: center;
justify-content: center;
background-color: coral;
opacity: 0.7;
width: 1300px;
height: 485px;
z-index: 0;
}
.grid {
display: grid;
grid-gap: 10px;
grid-template-rows: 161px 161px 161px;
grid-template-columns: 360px 940px;
background-color: coral;
}
<section class="hero">
<div class="flex_center">
<div class="grid">
<div class="grid-item-1"><img src="images/logo_hero.png" class="logo_center"></div>
<div class="grid-item-2">
<p class="center">KIA'PALANO SEAFOODS</p>
</div>
<div class="grid-item-3">
<p class="squamish">A Squamish tribal-owned seafood company <br> located along the Squamish River, B.C</p>
</div>
<div class="grid-item-4">
<div class="button">COME ON IN</div>
</div>
</div>
</div>
</section>
I'm trying to make .item-1 and .item-2 stack nicely on top of each other in a grid, just like in this snippet:
.grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto 1fr;
}
.item {
padding: 10px;
border: 1px solid black;
}
.item-1 {
grid-column: 1 / 3;
}
.item-2 {
grid-column: 1 / 3;
}
.item-3 {
grid-column: 3 / 7;
grid-row: 1 / 3;
padding: 80px 20px;
}
<div class="grid">
<div class="item item-1">
item-1
</div>
<div class="item item-2">
item-2
</div>
<div class="item item-3">
item-3
</div>
</div>
This is a simplified example, and the implementation I'm stuck on has more rows of items in different places.
For example: large item first, or no large item at all.
Which is why grid-template-rows seems to be off the table, and I cannot find a way to stack them nicely without.
I've tried many different things, from grid-auto-rows to the various grid-* and align-*, to height and margins set to auto and fit-content, without success.
Here's the same snippet without grid-template-rows, where you can see the default behavior of .item-1 and .item-2 being separated / getting the same height:
.grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(6, 1fr);
}
.item {
padding: 10px;
border: 1px solid black;
}
.item-1 {
grid-column: 1 / 3;
}
.item-2 {
grid-column: 1 / 3;
}
.item-3 {
grid-column: 3 / 7;
grid-row: 1 / 3;
padding: 80px 20px;
}
<div class="grid">
<div class="item item-1">
item-1
</div>
<div class="item item-2">
item-2
</div>
<div class="item item-3">
item-3
</div>
</div>
Here's an image of the snippets, showing the desired layout:
Try this
.grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
}
.item {
border: 1px solid #000;
padding: 10px;
}
.box1 {
display: flex;
flex-direction: column;
gap: 10px;
}
.item2 {
flex: 1;
}
.item3 {
padding: 80px 20px;
}
<div class="grid" >
<div class="box1">
<div class="item" >item 1</div>
<div class="item item2" >item 2</div>
</div>
<div class="item item3" >item 3</div>
</div>
.grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
}
.item {
border: 1px solid #000;
padding: 10px;
}
.box1 {
display: flex;
flex-direction: column;
gap: 10px;
}
.item1 {
flex: 1;
}
.item2 {
flex: 1;
}
.item3 {
padding: 80px 20px;
}
<div class="grid" >
<div class="box1">
<div class="item item1" >item 1</div>
<div class="item item2" >item 2</div>
</div>
<div class="item item3" >item 3</div>
</div>
The code below uses flex to display some divs that act as buttons: the point is to create a basic layout for simple games.
Two problems arises with this style of coding, first being speed of execution and second management of percentage of each container.
style apart, does do the trick on a laptop but it's unusable on mobile devices
what I'm missing? thanks in advance
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
html, body{
width: 100%;
height: 100%;
}
.maincontent{
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
}
.columncontent{
width: 25%;
height: 100%;
display: flex;
flex-direction: column;
}
.item{
height: 100%;
}
.item:hover{
border : 12px solid white;
}
.a{
background: blue;
}
.b{
background: red;
}
.c{
background: black;
}
.d{
background: green;
}
</style>
</head>
<body>
<div class="maincontent">
<div class="columncontent">
<div class="item a" onclick="handle(this)"></div>
<div class="item b" onclick="handle(this)"></div>
<div class="item c" onclick="handle(this)"></div>
<div class="item d" onclick="handle(this)"></div>
</div>
<div class="columncontent">
<div class="item a" onclick="handle(this)"></div>
<div class="item b" onclick="handle(this)"></div>
<div class="item c" onclick="handle(this)"></div>
<div class="item d" onclick="handle(this)"></div>
</div>
<div class="columncontent">
<div class="item a" onclick="handle(this)"></div>
<div class="item b" onclick="handle(this)"></div>
<div class="item c" onclick="handle(this)"></div>
<div class="item d" onclick="handle(this)"></div>
</div>
<div class="columncontent">
<div class="item a" onclick="handle(this)"></div>
<div class="item b" onclick="handle(this)"></div>
<div class="item c" onclick="handle(this)"></div>
<div class="item d" onclick="handle(this)"></div>
</div>
</div>
<script type="text/javascript">
var handle = function(el){
if(el.style.background=="green")
el.style.background="yellow";
else
el.style.background = "green";
}
</script>
</body>
</html>
I use SimpleHTTPServer to test over LAN. Testing mobile devices are running iOS and iPadOS only on Safari
1) 1st column should have the same height as the other 2
2) 1st column should have 40% width, whereas each other columns have 30%
3) rows in the last 2 columns should have the same height
4) First 2 rows should have 40% height, whereas the last row on 20%
I attached a picture to make it clear
Many thanks
body, html, #fs {
width:100%;
height:100%;
margin:0;
padding:0;
}
#i1-table {
display:table;
width:100%;
height:100%;
}
#i1-trow {
display:table-row;
width:100%;
height:100%;
}
#i1-rowspan {
display: table-cell;
height:100%;
width:40%;
background-color:red;
text-align:center;
vertical-align:middle;
}
#i1-rowcont {
display: table-cell;
height:100%;
width:60%;
}
#i1-table-in {
display:table;
width:100%;
height:100%;
}
.i1-rowcont-row1 {
display: table-row;
height:40%;
width:100%;
}
.i1-rowcont-row2 {
display: table-row;
height:20%;
width:100%;
}
.i1-cell1 {
display: table-cell;
width:50%;
text-align:center;
vertical-align:middle;
}
.i1-cell2 {
display: table-cell;
width:50%;
text-align:center;
vertical-align:middle;
}
<div id="fs">
<div id="i1-table">
<div id="i1-trow">
<div id="i1-rowspan">
1
</div>
<div id="i1-rowcont">
<div id="i1-table-in">
<div class="i1-rowcont-row1">
<div class="i1-cell1" style="background-color:blue">
2
</div>
<div class="i1-cell1" style="background-color:yellow">
3
</div>
</div>
<div class="i1-rowcont-row1">
<div class="i1-cell1" style="background-color:gray">
4
</div>
<div class="i1-cell1" style="background-color:cyan">
5
</div>
</div>
<div class="i1-rowcont-row2">
<div class="i1-cell2" style="background-color:magenta">
6
</div>
<div class="i1-cell2" style="background-color:green">
7
</div>
</div>
</div>
</div>
</div>
</div>
</div>
it has been some time since I made my last webpage and it seems that I have forgot much. I cant resolve why the last item from the #menu ul goes to the next line while the #menu div is wide enough to contain all the list elements plus the logo div, it has margin and padding set to 0.
I used to do menus in such way before but have probably forgot something.
I searched for the solution however I cant make the things working right.
The question is..why arent the li items in one line? Whats causing the 850 px overlap when they all together should be 802px wide?
html, body {margin:0; padding:0}
body {background-image: url("./gfx/background.png"); background-position: 50%; background-repeat: no-repeat;text-align:center; background-color:#fff; font-family:Arial, Helvetica;width:100%}
.main-wrap {width:1000px; margin:0 auto}
#header {height:150px;width:1000px}
#logo {
display: block;
width: 150px;
height: 150px;
overflow: hidden;
color: #424242;
float:left;
margin: 0;
padding:0;
}
#logo span {
background: url("./gfx/logo-small.png");
z-index: 5;
display: block;
width: 150px;
height: 150px;
}
.wrap::before {
content: " ";
display: table;
}
.wrap::after{
clear: both;
content: " ";
display: table;
}
/*menu*/
#menu {width:849px;margin:0 0 0 0; padding:0px 150px 0 0}
#menu ul li {list-style: none;}
#menu ul li a {
z-index: 5;
position: relative;
float:left;
display: inline;
height: 31px;
overflow: hidden;
text-decoration: none;
color:#336699;
font-size: 20px;
margin: 0;
padding:0
}
#menu li a:hover,
#menu li a:focus {
height: 31px;
margin-top: 0;
color:#fff;
}
#menu li a span {
position: absolute;
top: 0;
left: 0;
display: block;
z-index: -1;
height: 31px;
cursor: pointer;
}
#menu li a:hover span,
#menu li a:focus span {
background: url("./gfx/menu-a.png");
background-repeat: no-repeat;
color:#fff;
}
#menu-1,
#menu-1 span {
background-position: 0 0;
width:119px;
}
#menu-1:hover span,
#menu-1:focus span {
background-position: 0px 0px;
}
#menu-2,
#menu-2 span {
width: 112px;
}
#menu li a#menu-2:hover span,
#menu li a#menu-2:focus span {
background-position: -119px 0px;
}
#menu-3,
#menu-3 span {
width: 128px;
}
#menu li a#menu-3:hover span,
#menu li a#menu-3:focus span {
background-position: -231px 0px;
}
#menu-4,
#menu-4 span {
width: 184px;
}
#menu li a#menu-4:hover span,
#menu li a#menu-4:focus span {
background-position: -359px 0px;
}
#menu-5,
#menu-5 span {
width: 149px;
}
#menu li a#menu-5:hover span,
#menu li a#menu-5:focus span {
background-position: -543px 0px;
}
#menu-6,
#menu-6 span {
width: 110px;
}
#menu li a#menu-6:hover span,
#menu li a#menu-6:focus span {
background-position: -692px 0px;
}
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>New web</title>
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div class="main-wrap"> <!-- hlavni -->
<div class="wrap">
<div id="header">
<div id = "logo"><a href = "new_web/">
<span> </span>
</a></div>
<div id="menu">
<ul>
<li><a id="menu-1" href="new_web/about-us.html">About Us<span></span></a></li>
<li><a id="menu-2" href="new_web/services.html">Services<span></span></a></li>
<li><a id="menu-3" href="new_web/insurance.html">Insurance<span></span></a></li>
<li><a id="menu-4" href="new_web/meet-our-team.html">Meet Our Team<span></span></a></li>
<li><a id="menu-5" href="new_web/latest-news.html">Latest News<span></span></a></li>
<li><a id="menu-6" href="new_web/contact.html">Contact<span></span></a></li>
</ul>
</div>
</div>
</div>
<div id = "slider">
</div>
<div id = "main">
<!-- first page only -->
<div class="wrapper">
<div id="smart-boxes">
<div id="smart-box-1">
<p>"Change your thoughts and you chagne your world." <span>Norman Vincent Peale</span>
</p>
</div>
<div id="smart-box-2">
<p>High quality psychological services <a>read more...</a>
</p>
</div>
<div id="smart-box-3">
<p>We are a multidisciplinary treatment center <a>read more...</a>
</p>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="wrapper">
<div id="footer-address">
<p>
</p>
</div>
<div id = "footer-links-1">
<p>
Contact Us<br />
FAQ <br />
</p>
</div>
<div id = "footer-links-2">
<p>
Terms of use<br />
Insurance<br />
Our Team<br />
</p>
<p class="ext-links">
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Thank you for your advices.
Allright, basic mistake: when positioning two elements using float property just beside each other one must have float:left (#logo) and the other muset go to right simple adding float:right to #menu did the thing (also removed the 150px padding-right).