Im using GWT. I need to make two columns fixed, to freeze them, and the others should scroll fluently.
Here is simple layout before freezing two first columns (where numbers are indicated and Z column)
After freezing:
As you can see, if freezes correctly I can scroll and two first columns dont move. HOWEVER, A column content goes before Z column and disappears. (I moved Z column to show how A column content hides purple color)
My css:
//for number column
tr.Row td.row1 {
border-color: #ffffff;
position : fixed;
height : 119px;
left : 344px;
overflow-y: auto;
}
// for Z COLUMN
.lockHead{
position: fixed;
z-index:1!important;
}
Maybe a solution is to use padding-left or smt? Please help Im totaly stuck on it.
You can give the GWT table a class like class="fixed_header" and style the rest via CSS. Your CSS approach seem a little bit complicated I think.
Can you check if this is what you want to achive? A fixed header. CSS:
.fixed_header {
table-layout: fixed;
border-collapse: collapse;
}
.fixed_header td:nth-child(1), th:nth-child(1){
min-width: 100px;
}
.fixed_header thead tr {
display: block;
position: relative;
}
.fixed_header tbody {
height: 60px;
display: block;
overflow: auto;
}
https://jsfiddle.net/ghsroh81/
Related
I am using this NG-TABLE and having a hard time trying to modify CSS. I want fixed header and scroll bar for the data. I am using CSS in this link.
My html looks like this.
<ng-table class="table-scroll" [config]="config"
[rows]="rows" [columns]="columns">
</ng-table>
I opened developer tools and observed that table scroll css is not working.
I found the issue. User agent css is overwriting my css. Inside ng-table, there is another table and clss. How can I override that ?
When you use the standard class attribute its value can be ignored by the Angular element.
Much better to go with ngClass instead, as it will append its values to any classes added by the element:
<ng-table [ngClass]="'table-scroll'" [config]="config" [rows]="rows" [columns]="columns">
</ng-table>
Example plunker: https://plnkr.co/edit/d4uFrAsnRJqYMqiyLuTG?p=preview
A second option would be to change the selector from .table-scroll thead ... to the generic table selector table thead ... etc, if you don't have other tables on the page that would be affected.
As the structure is bit different, you can adjust your CSS:
.table-scroll table thead {
display: table;
width: 100%;
table-layout: fixed;
}
.table-scroll table tbody {
max-height: 150px;
overflow-y: auto;
display: block;
width: 100%;
table-layout: fixed;
}
.table-scroll table tr {
display: table;
table-layout: fixed;
width: 100%;
}
.table-scroll table td {
height: 47px; // needed in order to keep rows from collapsing
}
Eventually you can add !important to the rules that can't be overwritten...
I have successfully created css files for vanilla Bootstrap, selectize, etc.
But now I am having tough times trying to modify default css for Bootstrap-select. Specifically, I am trying to
Remove the border of the element
Change the width of the element so that it fits into the column with given width
As for now, the second column for some reason overlaps the first column. This error goes away if you remove the th.zeon-fixed-narrow-column {width: 1.5em;}.
The think is that I don't want to remove it, I DO WANT the first column to be as narrow as 1.5em !
Here's my jsFiddle
table {
table-layout: fixed;
}
th.zeon-fixed-narrow-column {
width: 1.5em;
}
.zeon-selectpicker{
border:none !important;
width: 1.5em;
}
.zeon-selectpicker:focus{
background-color:red;
}
table {
table-layout: fixed;
}
th.zeon-fixed-narrow-column {
width: 1.5em;
}
.zeon-selectpicker{
border:none !important;
width: 1.5em;
}
.zeon-selectpicker:focus{
background-color:red;
}
If I understand you correctly. You want the width of the dropdown to be equal to your table header right?
To achieve this add this to your css:
.bootstrap-select:not([class*="span"]):not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){
width:100%;
}
on default the above bootstrap-select class has a fixed width of 220px.
You can see the result here: JSFIDDLE.
If this is not what you want please tell me, I will try to help you
I am trying to make the resource day view (https://github.com/jarnokurlin/fullcalendar) of FullCalendar with fixed column size.
I have tryed this for making the columns the same width:
.ui-widget-header
{
width:150px !important;
}
and this:
.fc th {
width:150px !important;
}
But the columns keep the size according to the size of the column content.
I have added horizontal and vertical scrollbars to the calendar could this be the problem?
I also tryed this: Fixed Column Widths in Resource FullCalendar but that didn't work for me.
Thanks
Dani
I have solved the problem myself:
I had to add the table layout fixed directly to the table fc-border-separate not only table
table.fc-border-separate { table-layout: fixed; }
and then with:
table.fc-border-separate, table.fc-border-separate.fc td, .fc th {
width: 91px !important;
height: 50px !important;
}
the column size and height is fixed.
Adding display: block didn't change anything but thank you for answering.
try to add display: block; or display: inline-block; to those selectors.
I would like ta have a table with a minimum height (ex: 100px) so when there is no data in this table I still have a minimal height. I also would like to have rows in this table to be aligned on top so that when I have only 1 element in this table this element should not be aligned middle but top.
Here is my result in this jsFiddle so far: http://jsfiddle.net/ttrMe
The problem is that my items are aligned middle.
Thanks for your help.
The other answers have provided vertical-align: top as the answer, which does answer the specific question. However, I think your approach to the border is flawed.
.tablewrapper {
border:1px solid #ccc;
width: 70%;
min-height: 100px;
margin: 0 0 5px;
}
.mytable {
width: 100%;
}
.mytable th {
background-color: #ccc;
height: 20px;
}
.mytable td {
vertical-align: top;
}
http://jsfiddle.net/ttrMe/16/
Note, I changed the border to be on the #tablewrapper div element which wraps the .mytable. Also note, I changed the ids to classes so I could have more than one and demonstrate the difference. Additionally, the min-height does not work alone with the table element, but does with the div.
EDIT
jsFiddle applies a CSS reset (Normalize CSS checkbox on the left), so you might not see the exact same look in your page unless you also reset. In that case, you'll probably want:
.mytable {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
http://jsfiddle.net/ttrMe/17/
Are you talking about the vertical alignment of the row text?
#mytable tr td {
vertical-align: top;
}
I added this to your jsfiddle, see if that's what you want.
My code is something like the below. When theres 3 images everything is fine once theres 4 it gets full and moves the entire div.top into another row. How do i make the div inside top just start a new row instead?
I tried writing .top width=500px but once it hits or passes it instead the images inside are squeeze together instead of each being 150x150. I tried max-width on top instead and in opera and chrome i see the border of top as 500width but the images continue to render pass it. (i have a firefox problem with my div so the width looks fixed to something else).
So how do i make these divs go into another row? and not try to squeeze together
<div class="top">
<div><a href><img/></a></div>
<div><a href><img/></a></div>
<div><a href><img/></a></div>
</div>
I may need more information here, it's hard tell exactly what's happening. A screen-shot perhaps?
I would probably start with something like this:
.top {
width: 500px;
overflow: hidden;
}
.top div {
display: inline;
float: left;
width: 150px;
height: 150px;
}
Here's a solution that might help (used it in my example, just customized to fit your example)
.top {
display: block;
padding: 0;
margin: 0;
width: 100%;
}
.top div {
float: left;
display: block;
margin-right: 5px;
margin-bottom: 10px;
width: 47%; /* Not needed, but in my case I needed 2 columns */
}
Basicall, the .top div float: left; is what is making my images to go to next row if columns are full.