I'm using span elements within section containers to build out a set of results that can be dynamically inserted by an external program.
The desired result should look something like this:
However, the result squashes all of the entries together, sticking their containers on the same line:
The title section is very simple, and consists of a section and five spans:
<section class="titleholder">
<span id="htlabelHI">Entry Name</span>
<span id="htlabelHI">Parameter</span>
<span id="htlabelHI">Param in List</span>
<span id="htlabelHI">Param in List2</span>
<span id="htlabelHI">Param in List3</span>
</section>
The css is as follows:
.titleholder {
display: flex;
justify-content: space-around;
text-align:center;
border-top:solid;
border-top-color:lightgray;
border-top-width:thin;
border-bottom:solid;
border-bottom-color:lightgray;
border-bottom-width:thin;
font-family: Verdana;
font-size: 10px;
}
The HTML for the results section is a little more complex:
<section class="results">
<div class="hazardResult">
<span class="EntryName">11</span>
<span class="Param">2</span>
<span class="ParamList1">
<ul>
<li>1</li>
</ul>
</span>
<span class="ParamList2">
<ul>
<li>1</li>
</ul>
</span>
<span class="ParamList3">
<ul>
<li>1</li>
</ul>
</span>
</div>
<div class="hazardResult">
<span class="EntryName">22</span>
<span class="Param">2</span>
<span class="ParamList1">
<ul>
<li>2</li>
</ul>
</span>
<span class="ParamList2">
<ul>
<li>2</li>
</ul>
</span>
<span class="ParamList3">
<ul>
<li>2</li>
</ul>
</span>
</div>
</section>
The CSS is not too dissimilar:
.results {
display: flex;
justify-content: space-around;
padding: 10px 0;
border-bottom:solid;
border-bottom-color:lightgray;
border-bottom-width:thin;
height: 150px;
font-size: 10px;
padding-top: 4px;
padding-left: 20px;
text-align:center;
}
I feel like I need to do something to distinguish the 'div' elements of each hazardResult, however setting the width does little more than move the elements around horizontally. The table has a maximum width of 900px.
I also tried individually setting the widths of each span, but this yielded no results.
What else can I try to even out the spacing? Bear in mind that the height of the div must adapt to the longest list.
Related
I have the following list and want to add another element to list element with Name. So I am adding Primary User but want the new element Primary User styled to the right of the line. What's the best way to do this? Is it awkward doing this to a list item? Thanks.
<div class="panel-heading">Company Details</div>
<ul class="list-group">
<li class="list-group-item"><b>Name:</b> <%= #company.name %><b>Primary User:</b><%= #company.primary %></li>```
One possibility would be to use float right. Don't know if it is the best one and there are probably plenty others, but it will work.
HTML
<div class="panel-heading">Company Details</div>
<ul class="list-group">
<li class="list-group-item">Name: Test1 <span class="user">User: Test</span>
</li>
<li class="list-group-item">Name: Test1 <span class="user">User: Test</span>
</li>
<li class="list-group-item">Name: Test1 <span class="user">User: Test</span>
</li>
</ul>
CSS
.user {
float: right;
}
.list-group {
width: 250px;
}
https://jsfiddle.net/zy7d48ub/
Wrap your code inside this div wrapper and it should work.
<div class = "panel-heading-wrapper" style = "display: flex;">
I find myself using (maybe overusing?) css grid a lot for layouts such as this. It has so much flexibility for fine-tuning the layout. My approach would be:
<div class="panel">
<div class="panel-heading">
Company
</div>
<div class="name">
Name
</div>
<div class="user">
User
</div>
</div>
.panel {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 20px 20px;
grid-template-areas: 'heading heading''name user'
}
.panel-heading {
grid-area: heading;
}
.name {
grid-area: name;
}
.user {
grid-area: user;
}
here's what it looks like on jsfiddle
I'am trying to display messages with the help of 'li' tag line by line .The main motive is to display our messages on right side whereas others on the left side in a react Chat app
but the problems is whenever I try with float left or float right , all the elements come into the same line like this
My react chat styling code is this
{this.state.chats.map(chat => (<div key={chat.timestamp}>
{this.state.user.uid === chat.uid ?(
<li className=" self" style={{listStyleType:"none",overflow:'hidden',marginLeft: 2 +'px',float:'right',display:'inline-block',
backgroundColor:"whitesmoke",margin:2 + "em",padding:13+'px',width:'max-content',borderBottomLeftRadius:11+'px',
borderBottomRightRadius:11+'px',borderTopLeftRadius:11+'px'}}>
<div className="message text-dark">{chat.content} </div>
</li>
):(
<li className="other" style={{listStyleType:"none",overflow:'hidden',marginLeft: 2 +'px',float:'left',display:'inline-block',
backgroundColor:"blanchedalmond",margin:2 + "em",padding:13+'px',width:'max-content',borderBottomLeftRadius:11+'px',
borderBottomRightRadius:11+'px',borderTopRightRadius:11+'px'}}>
<div className="message text-dark">{chat.content}</div>
</li>
)}
</div>
))}
Edit !: after floating individual div
.self {
background: orange;
float: right;
clear: both;
}
.other {
background: blue;
float: left;
clear: both;
}
<ul>
<li class="self">message</li>
<li class="self">message</li>
<li class="self">message</li>
<li class="self">message</li>
<li class="other">message</li>
<li class="other">message</li>
<li class="other">message</li>
<li class="self">message</li>
</ul>
https://developer.mozilla.org/en-US/docs/Web/CSS/clear
Check out the clear property for floated elements.
Flexbox solution:
.left {
display: flex;
justify-content: flex-start;
}
.right {
display: flex;
justify-content: flex-end;
}
<ul>
<li class="left">
Others message
</li>
<li class="right">
Your message
</li>
</ul>
Solution 2
Try <li> take up the whole line, and put float: left/right to the inner <div>
Something like: https://jsfiddle.net/L1g6wx34/
.left {
float: left;
}
.right {
float: right;
}
<ul>
<li>
<div class="left">
Others message
</div>
</li>
<li>
<div class="right">
Your message
</div>
</li>
<li>
<div class="right">
Your message
</div>
</li>
</ul>
I am looking for a way to place two elements next to each other. One element contains a link and the other element two buttons. If it is not possible to fit both elements without a line break, both should wrap at the same time:
big screen:
----------------------------------------------------------------------
https://this-is-a-link.com/with-a-slug c x |
https://this-is-a-link.com/with-a-long-long-long-long-long-slug c x |
----------------------------------------------------------------------
small screen:
-------------------------------------
https://this-is-a-link.com/with- c |
a-slug x |
https://this-is-a-link.com/with- c |
a-long-long-long-long-long-slug x |
-------------------------------------
What I want to avoid is a scenerio where one element would wrap, but the other would not:
-------------------------------------
https://this-is-a-link.com/with- c x |
a-slug |
https://this-is-a-link.com/with- c x |
a-long-long-long-long-long-slug |
-------------------------------------
I want to avoid this also:
-------------------------------------------------------------------
https://this-is-a-link.com/with-a-slug c |
x |
https://this-is-a-link.com/with-a-long-long-long-long-long-slug c |
x |
-------------------------------------------------------------------
The markup currently looks like this, but can be changed if needed
<ol>
<li>
<span class="link">https://this-is-a-link.com/with-a-slug</span>
<span class="buttons">
<button>c</button>
<button>x</button>
</span>
</li>
<li>
<span class="link">https://this-is-a-link.com/with-a-long-long-long-long-long-slug</span>
<span class="buttons">
<button>c</button>
<button>x</button>
</span>
</li>
</ol>
And here is a basic setup in a fiddle.
ol {
background: lightgrey;
max-width: 600px;
list-style-type: none;
}
li {
border: 1px solid black;
}
<ol>
<li>
<span class="link">https://this-is-a-link.com/with-a-slug</span>
<span class="buttons">
<button>c</button>
<button>x</button>
</span>
</li>
<li>
<span class="link">https://this-is-a-link.com/with-a-long-long-long-long-long-slug</span>
<span class="buttons">
<button>c</button>
<button>x</button>
</span>
</li>
</ol>
I tried various things I could think of, like making each li element flex or trying to put the whole list into a grid (trying various minmax() combinations), but I was never able to achieve the effect I would like to see as described above. I have always been running into situations where elements would rather wrap instead of taking the whole space or one element would wrap and the other would refuse to.
Check this: https://jsfiddle.net/6hwaL0zy/
li {
border: 1px solid black;
display: flex;
justify-content: space-between;
}
li .buttons {
text-align: right;
}
I think it fits your requirements but there's a intermedium case that you did not specify (when the second row wraps and the first doesn't)
ol {
background: lightgrey;
max-width: 600px;
list-style-type: none;
}
li {
border: 1px solid black;
}
.parent{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
<ol>
<li class="parent">
<span class="link">https://this-is-a-link.com/with-a-slug</span>
<span class="buttons">
<button>c</button>
<button>x</button>
</span>
</li>
<li class="parent">
<span class="link">https://this-is-a-link.com/with-a-long-long-long-long-long-slug</span>
<span class="buttons">
<button>c</button>
<button>x</button>
</span>
</li>
</ol>
You can easily do this using bootstrap by making <div class="row"> and put two columns under it like 1 for your link and other for your two buttons.
for e.g:
<div class="row">
<div class="col-md-4">
your link code
</div>
<div class="col-md-4">
your buttons code
</div>
</div>
Add this to your CSS class
.buttons{
display: flex;
justify-content: flex-end;
}
Is it possible to truncate one specific inner span of a label, that contains multiple span elements, so that the label in total does not overflow into the next line?
I have prepared a JSFiddle for it on https://jsfiddle.net/keltik/k18892xe/3/, but for completeness I will also supply a part of the HTML/CSS here:
<html>
<body>
<div class="container">
<!-- First Spectre Accordion -->
<div class="container">
<div class="accordion">
<input id="accordion-1" name="accordion-radio" type="checkbox" hidden="">
<label class="accordion-header c-hand" for="accordion-1">
<i class="fas fa-angle-down"></i>
<span class="headline">some headline that needs to be truncated1, so that everything in the parent 'label' element remains in one line</span>
<span class="spacer"></span>
<span class="date">dont truncate me1</span>
</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item">Element 1</li>
<li class="menu-item">Element 2</li>
<li class="menu-item">Element 3</li>
</ul>
</div>
</div>
<!-- more accordions, same structure -->
</body>
</html>
The CSS file is like this, on my development machine I am using Scss though:
.container {
max-width: 400px;
}
I am using the spectre.css framework and it is already included in the aforementioned JSFiddle link.
I have already tried out these approaches, but could not get any of them working with label, multiple span elements and the specific spectre.css classes:
https://scottwhittaker.net/flexbox/2017/02/05/flexbox-and-text-truncation.html
https://westerndevs.com/css/Using-Overflow-Ellipsis-in-Inline-Flex/
How to use "text-overflow: ellipsis" with a label element?
I am looking for approaches using HTML/CSS without Javascript, if it is possible.
I would appreciate your help.
You can try the use of white-space:nowrap and flexbox like this:
label {
display: flex;
max-width: 400px;
border: 1px solid;
overflow: hidden;
}
label > span {
white-space: nowrap;
flex-shrink: 0; /*This span will never shrink*/
margin: 0 5px;
}
span.tru {
flex-shrink: 1;/*allow this one to shrink*/
/*Hide the overflow*/
overflow: hidden;
text-overflow: ellipsis;
}
<label>
<span>lorem don't truncate</span>
<span class="tru"> truncate me truncate me truncate me truncate me truncate me v truncate me truncate me truncate me</span>
<span>don't truncate me</span>
</label>
I'm trying to emulate a tab bar with HTML.
I'd like the width of each tab to be set according to the text length (that is, no fixed width) and to word wrap in case it exceeds the screen width.
I've almost achieved it:
<html>
<head>
<style type="text/css">
#myTabs .tab {
float: left;
}
#myTabs .tab_middle {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_middle.png');
}
#myTabs .tab_left {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_left.png');
}
#myTabs .tab_right {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_right.png');
}
</style>
</head>
<body>
<div id="myTabs">
<div class='tab'>
<span class='tab_left'> </span>
<span class='tab_middle'>very very looong</span>
<span class='tab_right'> </span>
</div>
<div class='tab'>
<span class='tab_left'> </span>
<span class='tab_middle'>another loooong tab</span>
<span class='tab_right'> </span>
</div>
<div style='clear:both'></div>
</div>
</body>
</html>
But, there's a very annoying space between the opening tab image and the closing one.
As you can see, I've tried with padding, spacing, and border, with no luck.
EDIT:
I tried replacing the spans with a small table (one row, three <td>s), but it's the same, only the space between is smaller.
Another way besides njbair's one is to add font-size: 0 to parent element.
I prefer this one because it's aesthetically better for tab designing.
Instead of this:
<div id="tabs">
<span id="mytab1">Tab 1</span><span id="mytab2">Tab 2</span><span id="mytab3">Tab 3</span>
</div>
...we can use this:
<div id="tabs" style="font-size: 0;">
<span id="mytab1">Tab 1</span>
<span id="mytab2">Tab 2</span>
<span id="mytab3">Tab 3</span>
</div>
...which looks better :)
Of course, don't forget to define your real font size for tabs.
EDIT:
There's one more way to get rid of spaces: by adding comments.
Example:
<div id="tabs">
<span id="mytab1">Tab 1</span><!--
--><span id="mytab2">Tab 2</span><!--
--><span id="mytab3">Tab 3</span>
</div>
Get rid of the newlines between the spans. Example:
<div class='tab'>
<span class='tab_left'> </span><span class='tab_middle'>very very looong</span><span class='tab_right'> </span>
</div>
Newlines are counted as a space in HTML.
Another option is to use nagative letter-spacing:-10px - that has a lighter impact on formatting.
<div id="tabs" style="letter-spacing:-10px;">
<span id="mytab1" style="letter-spacing:1px;">Tab 1</span>
<span id="mytab2" style="letter-spacing:1px;">Tab 2</span>
<span id="mytab3" style="letter-spacing:1px;">Tab 3</span>
</div>
Got this idea thanks to this answer
hard to test without the images but I added background color and display:inline to the root tabs. Please try this:
<html>
<head>
<style type="text/css">
#myTabs .tab {
float: left;
display:inline;
}
#myTabs .tab_middle {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_middle.png');
}
#myTabs .tab_left {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_left.png');
}
#myTabs .tab_right {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_right.png');
}
</style>
</head>
<body>
<div id="myTabs">
<div class='tab' style="background-color:Red;">
<span class='tab_left'> </span>
<span class='tab_middle'>very very looong</span>
<span class='tab_right'> </span>
</div>
<div class='tab' style="background-color:Green;">
<span class='tab_left'> </span>
<span class='tab_middle'>another loooong tab</span>
<span class='tab_right'> </span>
</div>
<div style='clear:both'></div>
</div>
</body>
</html>
Tab middle, left and right also need to float left.
njbair’s response is correct.
Another option was to use a table, with the border-collapse: collapse; property.
Another gotcha: in Internet Explorer 6.0, the first approach (spans) doesn’t work as expected. When resizing the window, IE wordwraps the span, breaking the tab, while with the table approach even IE sends down the whole tab.