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.
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...
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/
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'm new to CSS and I'm trying to understand how to fix the following line from not working for top and bottom margins. It works for side margins just fine, however:
.contents {
...
margin: 10px 10px 10px 10px;
}
Example: http://jsfiddle.net/LCTeU/
How do I fix this?
Edit:
I've also tried padding the container instead, and that just expands the container to maximum size (why?):
.container {
...
padding: 10px 10px 10px 10px;
}
Use overflow:auto on any of the elements that are involved with the collapse. For example:
article {
overflow:auto;
}
jsFiddle example
This answer is based off of the fiddle you provided.
I think your approach is incorrect in that your applying a margin to the article to space it within the parent div tag. It is better to use padding in this case, since your attempting to separate the content from its outside border. So apply:
article {
//display: block;
clear: both;
padding: 10px;
}
This will cause the article tags to increase in size, however the borders of the container div elements will now be touching. To create space between elements a margin is applied.
.rounded-box {
background-color: #959392;
border-radius: 15px;
margin: 10px 0px;
}
Working Example http://jsfiddle.net/LCTeU/4/
So just to recap, when you want to create space between two elements use margin. When you want to create space between an element and its border (or you want an element to be surrounded by whitespace) use padding.
I found a fix that does not require a padding, and does not require changing the overflow of the container element:
article:after {
content: "";
display: block;
overflow: auto;
}
The idea being that we add another element at the bottom that disrupts the collapsing margin, without affecting the height or padding.
As per the fix that Erik Rothoff suggested, which does not seem to work in Safari, first I tried the following:
article:after {
content: "";
display: inline-block;
overflow: auto;
}
This does work in Safari but takes up space which I could not get rid off, messing up the grid so much that I would need to change margins.
Then I decided to combine the two by doing the following:
article:after {
content: "";
display: block;
padding-top: 1px;
margin-top: -1px;
}
This works in Safari, has an acceptable height of 1px which is negated by the negative margin top.
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.