I have a table in which a sticky column contains dropdown list. my problem is dropdown list goes under the column in next row onwards can anyone help me
I have two columns position sticky because i don't want them to moved while scrolling.In one fixed column I have a dropdown list while I'm clicking on dropdown it goes under the sticky element
below is the code can someone help me
I tried adding z-index but it seems not working
remove the right declarations from these 2 sections:
.fixedit{
position: sticky;
width: 10px;
}
.fixactivate{
position: sticky;
}
Also changing your white space to nowrap might help too in this section
.hex-table-scroll .hex-table tbody tr td {
word-wrap: break-word;
word-break: break-all;
white-space: nowrap;
}
Related
I'm using Semantic UI for the CSS base. Here's a fiddle I've been working on.
I'm having trouble getting the existing answers working from googling around. They all seem to have this problem where there is a ton of whitespace to the right.
I'm trying to get it working such that it integrates nicely with the existing CSS of semantic UI to look good (no whitespace to the side), but I'm not having any luck and I've been at it for a while.
It's fine if this only works with newer browsers since I'll be using electron anyway.
This CSS looks like it's required but I'm not sure how to modify it to work properly with what I have:
tbody, thead tr { display: block; }
tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
The source of the whitespace problem seems to be the ui class. It has several media queries on it that cause the content to re-flow at smaller screen sizes. If you look at the media query it doesn't apply if you add the class stackable to your table like below.
<table class="ui striped table unstackable">
Also, you only have 4 columns, seems like you want 5. Make the following change.
tbody td, thead th {
width: 140px !important;
}
thead th:last-child, tbody tr td:last-child{
width: 296px !important; /* 140px + 16px scrollbar width */
}
Working fiddle here
I have a horizontal scroll-able div with list items.which looks like below. I want the list to be autofocused when user clicks on any list items. Presently, the list item sits at its position. Is there any way in Javascript or Jquery to autofocus the list item ?
Following are the CSS which I used for making this horizontal scroll div
on ul
white-space: nowrap;
overflow-x: auto;
on li
display: inline-block !important;
float: none;
You can try this, $(YourElement).trigger("focus").
Or even most easy, $(YourElement).click();
Dont forget to use the :active pseudo class in your css code for 'YourElement'.
I have a table which holds values in cells shorten with ellipsis()text-overflow.
On scroll down I change the style of the table header so it remains fixed:
css:
.superResponsiveTable thead {
position:fixed;
top:61px;
background: white;
z-index: 2;
width:auto;
}
But when I do this, the header cells don't expand matching the rest of the column width when a cell of that column is hovered.
How to go around this?
I know how to do it with javascript but was wondering if could be done just with CSS?
Im using angularjs
Is any option to control the text which is in <td>
I am using this css style:
word-wrap: break-word;
width: 200px;
display: block;
Without any text in td it is looking good but when there is a text by using the above css the UI alignment is getting disturbed.
See here in second image the alignment at QR tag td is disturbed completely.
Even if there are more no.of characters are there the alignment shouldnot be disturbed .
please help me out with this issue.
Assuming you only want the row to have a fixed height so that only one line of text to be visible.
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
I'm having trouble left aligning the last row of a 'ul' element inside a fluid container. I have the container centering properly with the page but it ends up centering the last row of elements when they are not fully populated. Can't seem to figure out the solution.
I'm using Twitter Bootstrap at the very core with container-fluid for the outer div. And centering the list elements like so:
ul {
text-align: center;
list-style:none;
}
ul li {
display: inline-block;
}
I've tried using text-align: justify and centering the div with margins but it doesn't seem to move with the resizing of the page. Suggestions?
Here are two screenshots of what's happening:
JS Fiddle Example: http://jsfiddle.net/Z9uqQ/
Last line should be aligned left with the same vertical edge as 1.
If I understand correctly margin: 0 auto will do:
ul {
width: 90%;
margin: 0 auto;
}
Demo: http://jsfiddle.net/elclanrs/GdAvm/