I have a drop down inside a table cell. On a click, the dropdown expands to show the menu items. But, the table row height also changes whenever the menu expands/collapses.
How can i keep the table row height constant and the dropdown gets displayed over the table. I tried setting higher z-index for dropdown container but it didn't work. As,
.menu-body{
background-color: #ea7600;
z-index:2;
}
Plunker code is here.
Table height must not fall below the second dark horizontal line.
You need to use absolute positioning, but that requires some minor html changes as well:
add span to th and td:
<th><span>lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnng header</span></th>
<td><span>lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnng content</span></td>
change css:
td,th{
position: relative;
border: solid black 2px;
padding: 5px;
text-align: center;
}
td span,th span{
text-overflow: ellipsis;
overflow : hidden;
white-space: nowrap;
display: block;
}
.menu-body{
position: absolute;
width: 100%;
}
Updates plunker: http://plnkr.co/edit/WYyrnO5lIVFFJBCNdfNc?p=preview
.parent-container-classname *{
overflow : visible;
}
.menu-body{
overflow : auto !important;
}
all parent containers should have overflow:visible and your drop down should have overflow:auto
Related
I'm trying to make a two column CSS table (tried HTML table too) with one row where the first column is one line of text and it expands to fit the content. The second column needs to be a single line of text that is right justified and expands left until it hits the first column and then becomes an ellipsis.
This first column is working with white-space: nowrap;. The second column is the issue:
When the content is longer than the second column max width, it will wrap. Once I add white-space: nowrap; it overflows and ignores the width, max-width and overflow: hidden;
Here is a JSFiddle showing what I'm getting vs. what I'm trying to get. Thanks!
https://jsfiddle.net/esodell1/oq59jkr3/10/
UPDATE
Thanks for the responses, but I found a way to accomplish this using flex box!
https://jsfiddle.net/esodell1/jdykzv5m/13/
So this is how the text-overflow technique works. There needs to be a defined width of it's parent or a closest parent. You'll need to defined a width for your cell such as:
&:last-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 85%;
text-align: right;
}
But you'll also have to limit your table since table naturally tries to expand as much as the content in its child requires by using table-layout:
.table {
display: table;
padding: 0.25rem;
table-layout: fixed;
width: 100%;
}
This will make the right column create the ellipsis when the cell reaches 85% of its available width. The problem you'll be faced with is dealing with the left column because you also have no-wrap set on it so that column might actually exceed 15% width and overlap with the right. The issue is both your column is trying not to wrap and fighting for table space, you'll need to apply the same text-overflow technique on the left column. See the the previous and last example here:
https://jsfiddle.net/bhL6sx0g/
To be honest if you're dealing with many columns with dynamic content like this that you don't want wrapping you might want to add a layer of JS on top to do some of your sizing for you else the best option is delegate the actual widths such as a 15/85 split and stick to it.
Edit:
Give width units in vw(viewport width). Notice changes in scss of table(width), first-child( width, min-width) and last-child(width, max-width).
This vw will behaved strangely in jsfiddle, try in .html only.
.table {
display: table;
padding: 0.25rem;
width:90vw;
.row {
display: table-row;
.cell {
display: table-cell;
border: 1px solid gray;
padding: 0.25rem;
&:first-child {
white-space: nowrap;
width:20vw;
min-width:20vw;
}
&:last-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 70vw;
max-width: 70vw;
text-align: right;
}
}
}
}
Previous
By max-width:100% it can stretch to take full size of parent. You need limit it to some percentage or pixels to achieve desired effect.
Removed width:100% as it was useless and changed max-width:200px
&:last-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* width: 100%; */
max-width: 200px;
text-align: right;
}
I created several tables in our application that use the method in this jsfiddle to make the first column fixed and the rest of the table content scroll underneath it.
The problem I'm facing is I want to enable momentum scrolling for the x-overflow content, but once I add the -webkit-overflow-scrolling: touch; rule, it makes the whole table scrollable, resetting the fixed first column behavior back to the standard table behavior. According to the MDN page on -webkit-overflow-scrolling, it creates a new stacking context. I assume this is why it breaks the absolute positioned first column.
Is there any way around this? Its very awkward scrolling the table on mobile without momentum scrolling, as the scroll abruptly stops once my finger lifts off the screen.
Screenshot:
HTML:
<div class="fixed-table-container">
<div class="fixed-table-body">
<table id="table">
CSS:
.fixed-table-container {position: relative;}
.fixed-table-body {overflow-x: scroll; -webkit-overflow-scrolling: touch; height: 100%;}
#table > tbody > tr > td:first-child {
position: absolute;
display: inline-block;
background-color: #fff;
border-right: 2px solid #222;
z-index: 9;
left: 0;
height: 44px;
width: 26px;
line-height: 46px;
}
#table > tbody > tr > td:nth-child(2) {
padding-left: 56px !important;
}
I'm having the same issue. The solution was to remove the fixed column for mobile. Apparently -webkit-overflow-scrolling breaks any child that has positions absolute or fixed.
I have table that sometimes have long strings as values.
How can i show the entire content of a tablecell if the overflowing content his hidden?
I'm thinking the cell should be expand while overlapping adjacent cells without displacing them.
Currently im using this css:
table{
table-layout: fixed;
margin-top: 24px;
th{
white-space: normal;
word-wrap: break-word;
}
td{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
td:hover{
overflow: visible;
z-index: 1;
background-color: grey;
}
}
This does make the overflowing text visible and overlapping adjacent cells. But the background/cell wont follow.
Thanks!
This is what I got for your situation: jsFiddle
First of all, I changed the css so that the table selector does not contain the other selectors. (note that this is not needed if you are using SASS or LESS as pointed out in the comments)
table{
table-layout: fixed;
margin-top: 24px;
} <--- place it here instead of at the end of the css rules for the table
th{
white-space: normal;
word-wrap: break-word;
}
And then I also adjusted the css rules for 'td' and 'td:hover':
td{
max-width : 50px;
white-space : nowrap;
overflow : hidden;
}
td:hover{
overflow: visible;
z-index: 2;
background-color: grey;
max-width:initial;
}
Hope this is what you wanted to achieve.
EDIT
After some comments and knowing you don't want the adjacent cells to move, I found this jsFiddle (this one is still a bit jumpy on hover, so maybe someone else knows how to fix this; I don't see how to solve that right now)
i wanted to make a menu using only html and css (no javascript). It should have several links next to each other and a scroll bar - a HORIZONTAL scrollbar - so one can access all links.
I can't figure out how to force these links to display next to each other, instead of making a break and displaying in another line. What I have untiol now looks like this: jsfiddle
html:
<nav>
<a>Site1</a>
<a>Site2</a>
<a>Site3</a>
...
<a>Site17</a>
<a>Site18</a>
<a>Site19</a>
</nav
css:
nav {
position: fixed;
top: 0;
left: 0;
height: 100;
background: #c00;
overflow-x: scroll;
overflow-y: hidden;
}
Edit:
The solution was to add white-space: nowrap to the css. jsfiddle
Check this out: http://jsfiddle.net/dmc56jkd/3/
white-space: nowrap;
This property prevents unwanted text wrap.
The key is to add white-space: nowrap
Here's a fork of your fiddle, using the following CSS
nav {
position: fixed;
top: 0;
left: 0;
height: 100;
background: #c00;
overflow-x: scroll;
width: 300px;
white-space: nowrap;
}
For demo purposes, I've limited the nav's width. If you wanted it to be as wide as the containing element, use width: 100% (if you don't define the width at all, the scrollbar slider may not show up)
http://jsfiddle.net/7tzo3vrh/
I was looking to implement the following design to the HTML/CSS.
I have got problems with the text overflow in the column. Currently the table column width is given in the percentage format so that the column width will change depending on the screen size, but there is a minimum width too. In the first text column, you can see that the content is extending and produced a second line due to the long size. How to avoid this problem using the text overflow? Or any other solution? Also, you can see that a set of icons are appearing in the same row when the mouse hover takes place. At this time, the text below the icons should hide and it should be shortened as shown in the design. Can you advise me to get a solution to this problem? I have tried text-overflow: ellipsis. But I'm getting problem when the screen width changes. Since I don't have a minimum width due to the variable column width, how to cut short the text in this field? Also in the hover case ??
Please let me know if you want to know anything else.
If you don't want the text to split in multiple rows, add white-space:nowrap rule.
Then, set a max-width for the cell.
For the icons, position them in absolute to the right, with a z-index higher then the text. You'll have to add a relative position to the containing cell also.
To keep them visible over text, i've added a background color (and some left padding).
EDIT: Fix for Mozilla
Mozilla seems to ignore position:relative; for td elements.
To fix it, you've to wrap the td contents inside another div, and apply this style
.tables td {
font-weight: 400;
font-size: 13px;
border-bottom: 1px solid #E1E1E1;
line-height: 38px;
text-align: right;
white-space: nowrap;
max-width: 200px; /* just an example */
}
.tables td > div {
overflow: hidden;
width:100%;
position: relative;
}
.linkFunctions {
display: none;
padding-top: 14px;
position: absolute;
right: 0;
z-index: 999;
background-color: #FFF9DC;
padding-left: 3px;
width: 100%;
max-width: 120px; /* just an example */
text-overflow: ellipsis;
overflow: hidden;
}
It's not exactly what you want (regarding the elipsis) but comes very close.
For the <a> inside the <td> add
td a{
display:block;
overflow:hidden;
width:100%;
white-space:nowrap;
}
(You might need to add a class to them to more easily target them and not ALL <a> inside <td>s).
And regarding the hover. Float the div.linkFunctions right, add the yellow background to it and it will look like it cuts the text accordingly.
All of those require a width to be set, which doesn't make tables fluid as they are intended to be. Use this: http://jsfiddle.net/maruxa1j/
That allows you to automatically set widths on <td> as percentages and the :after automatically sizes the overflowed <span>