Resizing tables with css

Patrick121 · August 1, 2014, 9:37am

Hi guys,

i wanted to create a custom theme where i want to use the reindeer table and define other components by myself. therefore i (hopefully) copied the most important lines of code in a file → reindeer_table.scss(havent gone through all the code because its quite long and i think most lines dont belong to my needs). this file is imported and included in my main.scss. now my problem. i dont want to use setWidth()functions(and even when i do the table-caption is on the percent value f.e. 90% and the rest of the table under the caption resizes to 90% of 90%). when i use the hole reindeer theme the setWidth() works. with my code where i (hope to) have all the code for the reindeer_table the above mentioned bug happens. sooo i want to write a css where i can define the table width in percent without having these problems. i compared the divs of the reindeer theme and mine and found out that when using setWidth() the value is entered in two of the tables divs:

.v-widget .v-has-caption .v-caption-on-top .v-has-width, .v-table .v-widget .table .v-table-table .v-has-width{ width: 80% !important; }but the code doesnt work this way on my custom reindeer_table.scss.

can anyone help me?(best would be that i dont need setWidth() )

EDIT: Basicly i want to replace the setWidth functions with css styles!!

attaching didnt work. here is the code:

@import "forms/rounded.scss";

@mixin reindeer_table{

    .v-caption-table {
        @include round-top;
           margin-top: 30px;
           color: white;
           padding: 5px;
           background: #5a5a5a;
       }
    
     .v-table .v-embedded-image {
        display: inline-block;
    }

    /*.v-widget .v-has-caption .v-caption-on-top, .v-table .v-widget .table .v-table-table{
        width: 90% !important;
    }*/

    .v-table {
        overflow: hidden;
        text-align: left;
    }
     .v-table-header-wrap {
        overflow: hidden;
        border: 1px solid #aaa;
        border-bottom: none;
        background: #efefef;
    }
     .v-table-header table, .v-table-table {
        border-spacing: 0;
        border-collapse: separate;
        margin: 0;
        padding: 0;
        border: 0;
    }
     .v-table-table {
        font-size: 12px;
    }
     .v-table-header td {
        padding: 0;
    }
     .v-table-header-cell, .v-table-header-cell-asc, .v-table-header-cell-desc {
        cursor: pointer;
    }
     .v-table.v-disabled .v-table-header-cell, .v-table.v-disabled .v-table-header-cell-asc, .v-table.v-disabled .v-table-header-cell-desc {
        cursor: default;
    }
     .v-table-footer-wrap {
         margin-bottom: 10px;
        overflow: hidden;
        border: 1px solid #aaa;
        border-top: none;
        background: #efefef;
    }
     .v-table-footer table {
        border-spacing: 0;
        border-collapse: collapse;
        margin: 0;
        padding: 0;
        border: 0;
    }
     .v-table-footer td {
        padding: 0;
        border-right: 1px solid #aaa;
    }
     .v-table-footer-cell {
        cursor: pointer;
    }
     .v-table-footer-container {
        float: right;
        padding-right: 6px;
        overflow: hidden;
        white-space: nowrap;
    }
     .v-table-resizer {
        display: block;
        height: 1.2em;
        float: right;
        background: #aaa;
        cursor: e-resize;
        cursor: col-resize;
        width: 1px;
        overflow: hidden;
    }
     .v-table.v-disabled .v-table-resizer {
        cursor: default;
    }
     .v-table-caption-container {
        overflow: hidden;
        white-space: nowrap;
        margin-left: 6px;
    }
     .v-table-caption-container-align-right {
        float: right;
    }
     .v-table-sort-indicator {
        width: 0px;
        height: 1.2em;
        float: right;
    }
     .v-table-header-cell-asc .v-table-sort-indicator, .v-table-header-cell-desc .v-table-sort-indicator {
        width: 16px;
        height: 1.2em;
        float: right;
    }
     .v-table-header-cell-asc .v-table-sort-indicator {
        background: transparent url(../base/common/img/sprites.png) no-repeat right 6px;
    }
     .v-table-header-cell-desc .v-table-sort-indicator {
        background: transparent url(../base/common/img/sprites.png) no-repeat right -10px;
    }
     .v-table-caption-container-align-center {
        text-align: center;
    }
     .v-table-caption-container-align-right {
        text-align: right;
    }
     .v-table-caption-container .v-icon, .v-table-header-drag .v-icon {
        vertical-align: middle;
    }
     .v-table-body {
        overflow: auto;
        border: 1px solid #aaa;
    }
     .v-table-row-spacer {
        height: 10px;
        overflow: hidden;
    }
     .v-table-row, .v-table-row-odd {
        background: #fff;
        border: 0;
        margin: 0;
        padding: 0;
        cursor: pointer;
    }
     .v-table-generated-row {
        background: #efefef;
    }
     .v-table-body-noselection .v-table-row, .v-table-body-noselection .v-table-row-odd {
        cursor: default;
    }
     .v-table .v-selected {
        background: #999;
        color: #fff;
    }
     .v-table-cell-content {
        white-space: nowrap;
        overflow: hidden;
        padding: 5px 6px 5px 5px;
        border-right: 1px solid #aaa;
    }
     .v-table-cell-wrapper {
        white-space: nowrap;
        overflow: hidden;
    }
     .v-table-cell-wrapper-align-center {
        text-align: center;
    }
     .v-table-cell-wrapper-align-right {
        text-align: right;
    }
     .v-table-column-selector {
        float: right;
        background: transparent url(../base/common/img/sprites.png) no-repeat 4px -37px;
        margin: -1.2em 0 0 0;
        height: 1.2em;
        width: 14px;
        position: relative;
        cursor: pointer;
    }
     .v-table.v-disabled .v-table-column-selector {
        cursor: default;
    }
     .v-table-focus-slot-left {
        border-left: 2px solid #999;
        float: none;
        margin-bottom: -1.2em;
        width: auto;
        background: transparent;
        border-right: 1px solid #aaa;
    }
     .v-table-focus-slot-right {
        border-right: 2px solid #999;
        margin-left: -2px;
    }
     .v-table-header-drag {
        position: absolute;
        background: #efefef;
        border: 1px solid #eee;
        opacity: 0.9;
        filter: alpha(opacity=90);
        margin-top: 20px;
        z-index: 30000;
    }
     .v-table-header-drag .v-icon {
        vertical-align: middle;
    }
     .v-table-scrollposition {
        width: 160px;
        background: #eee;
        border: 1px solid #aaa;
    }
     .v-table-scrollposition span {
        display: block;
        text-align: center;
    }
     .v-table-body:focus, .v-table-body-wrapper:focus {
        outline: none;
    }
     .v-table-body.focused {
        border-color: #388ddd;
    }
     .v-table-focus .v-table-cell-content {
        border-top: 1px dotted #0066bd;
        border-bottom: 1px dotted #0066bd;
    }
     .v-table-focus .v-table-cell-wrapper {
        margin-top: -1px;
        margin-bottom: -1px;
    }
     .v-off {
        color: #ddd;
    }
     .v-table-drag .v-table-body {
        border-color: #1d9dff;
    }
     .v-table-row-drag-middle .v-table-cell-content {
        background-color: #bcdcff;
    }
     .v-table-row-drag-top .v-table-cell-content {
        border-top: 2px solid #1d9dff;
    }
     .v-table-row-drag-top .v-table-cell-wrapper {
        margin-top: -2px;
    }
     .v-table-row-drag-bottom .v-table-cell-content {
        border-bottom: 2px solid #1d9dff;
    }
     .v-table-row-drag-bottom .v-table-cell-wrapper {
        margin-bottom: -2px;
    }
     .v-table-row-drag-top .v-table-cell-content:first-child:before, .v-table-row-drag-bottom .v-table-cell-content:first-child:after {
        display: block;
        position: absolute;
        width: 6px;
        height: 6px;
        margin-top: -4px;
        margin-left: -6px;
        background: transparent url(../base/common/img/drag-slot-dot.png);
    }
    .v-ff .v-table-row-drag-bottom .v-table-cell-content:first-child:after, .v-ie .v-table-row-drag-bottom .v-table-cell-content:first-child:after {
        margin-top: -2px;
    }
    
    .v-treetable .v-table-row .v-table-cell-content, .v-treetable .v-table-row-odd .v-table-cell-content {
        z-index: 10;
    }
     .v-treetable .v-table-cell-wrapper {
        position: relative;
    }
     .v-treetable .v-table-body .v-table-table .v-table-row-animating {
        zoom: 1;
        z-index: 1;
    }
     .v-treetable .v-table-body .v-table-table .v-table-row-animating, .v-treetable .v-table-body .v-table-table .v-table-row-animating .v-table-cell-content {
        background: transparent;
    }
    
     .v-table .v-label {
        line-height: normal;
    }
    
    .blue .v-table-header-wrap {
        border-color: #92a2aa;
    }
     .blue .v-table-body {
        border-color: #92a2aa;
        border-top-color: #c2c3c4;
    }
     .v-table-header-wrap, .white .v-table-header-wrap, .v-table-footer-wrap, .white .v-table-footer-wrap, .v-table-header-drag {
        border-color: #c2c3c4;
        background: transparent repeat-x;
        background-image: url(../reindeer/table/img/header-bg-light.png);
        /** sprite-ref: verticals;
        sprite-alignment: repeat */height: 20px;
        text-transform: uppercase;
        font-size: 10px;
        font-weight: bold;
        color: #222;
        text-shadow: #f3f5f8 0 1px 0;
        line-height: normal;
    }
     .v-table-footer-wrap, .white .v-table-footer-wrap {
        text-transform: none;
        font-size: 12px;
        font-weight: normal;
    }
     .v-table-footer td, .white .v-table-footer td {
        border-color: #c2c3c4;
    }
     .v-table-footer-container {
        padding-right: 7px;
    }
     .v-table-header, .v-table-footer, .v-table-footer table {
        height: 20px;
    }
     .v-table-caption-container, .v-table-header-drag {
        padding-top: 4px;
        padding-right: 4px;
    }
     .v-table-caption-container .v-icon, .v-table-header-drag .v-icon {
        height: 16px;
        margin: -4px 3px 0 0;
        vertical-align: middle;
    }
    .v-ie .v-table-caption-container .v-icon, .v-ie .v-table-header-drag .v-icon {
        margin-top: -3px;
    }
     .v-table-resizer {
        height: 20px;
        width: 2px;
        background: transparent;
        border-right: 1px solid #c2c3c4;
    }
     .v-table-sort-indicator {
        background: transparent;
        width: 0px;
        height: 20px;
    }
     .v-table-header-cell-asc .v-table-sort-indicator {
        background: transparent no-repeat right 7px;
        background-image: url(../reindeer/table/img/asc-light.png);
        /** sprite-ref: verticals;
        sprite-alignment: right;
        sprite-margin-top: 7px;
        sprite-margin-bottom: 6px;
        sprite-margin-right: 6px;
        */width: 16px;
    }
     .v-table-header-cell-desc .v-table-sort-indicator {
        background: transparent no-repeat right 7px;
        background-image: url(../reindeer/table/img/desc-light.png);
        /** sprite-ref: verticals;
        sprite-alignment: right;
        sprite-margin-top: 7px;
        sprite-margin-bottom: 6px;
        sprite-margin-right: 6px;
        */width: 16px;
    }
     .v-table-body, .white .v-table-body {
        border-color: #c2c3c4;
        height: 800px;
        background: #fff;
    }
     .v-table-cell-content {
        padding-top: 0;
        border-right-color: #d3d4d5;
        vertical-align: top;
    }
     .v-table-cell-wrapper {
        padding-top: 3px;
        padding-bottom: 3px;
    }
     .v-table-row-odd {
        background: #eff0f1;
    }
     .v-table-generated-row {
        background: #dcdee0;
        text-transform: uppercase;
        font-size: 10px;
        font-weight: bold;
        color: #222;
        text-shadow: #f3f5f8 0 1px 0;
        line-height: normal;
    }
     .v-table-generated-row .v-table-cell-wrapper {
        padding-top: 4px;
        padding-bottom: 5px;
    }
     .v-table-cell-content:last-child{
        border-right-color: transparent;
    }
     .v-table .v-selected, .black .v-table .v-selected {
        background: #4d749f url(../reindeer/common/img/sel-bg.png) repeat-x;
        color: #fff;
        text-shadow: #3b5a7a 0 1px 0;
    }
     .v-table .v-selected .v-table-cell-content {
        border-right-color: #466c90;
    }
     .v-table-column-selector {
        width: 16px;
        height: 20px;
        margin-top: -20px;
        background: transparent no-repeat;
        background-image: url(../reindeer/table/img/col-sel-light.png);
        /** sprite-ref: verticals */}
     .v-table-column-selector:active {
        background-image: url(../reindeer/table/img/col-sel-light-pressed.png);
        /** sprite-ref: verticals */}
     .v-table-focus-slot-left {
        border-left: 1px solid #222;
        margin-bottom: -20px;
        width: auto;
    }
     .v-table-focus-slot-right {
        border-right-color: #222;
        margin-right: 0;
    }
     .v-table-header-drag {
        padding-left: 6px;
        height: 16px;
    }
     .v-table-header-drag img {
        height: 16px;
        margin: -3px 3px 0 0;
    }
     .v-table-scrollposition {
        width: auto;
        background: transparent;
        border: none;
    }
     .v-table-scrollposition span {
        background: transparent repeat-x;
        background-image: url(../reindeer/table/img/scroll-indic-bg.png);
        /** sprite-ref: verticals;
        sprite-alignment: repeat */border: 1px solid #939494;
        border: none;
        border-radius-bottomleft: 4px;
        border-radius-bottomright: 4px;
        -moz-border-radius-bottomleft: 4px;
        -moz-border-radius-bottomright: 4px;
        -webkit-border-bottom-left-radius: 4px;
        -webkit-border-bottom-right-radius: 4px;
        height: 13px;
        padding: 4px 30px;
        white-space: nowrap;
        color: #222;
        text-shadow: #fff 0 1px 0;
        position: relative;
        top: 1px;
        -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px;
        -moz-box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px;
    }
     .v-table-borderless .v-table-scrollposition span {
        top: 0;
    }
    
    .v-table-strong .v-table-header-wrap, .v-table-strong .v-table-header-drag {
        border-color: #2b3033;
        border-top-color: #2b3033;
        background-image: url(../reindeer/table/img/header-bg.png);
        /** sprite-ref: verticals;
        sprite-alignment: repeat */color: #e7e9ea;
        text-shadow: #000 0 -1px 0;
    }
     .v-table-strong .v-table-body {
        border-top-color: #2b3033;
    }
     .v-table-strong .v-table-resizer {
        border-right-color: #1c1f21;
    }
     .v-table-strong .v-table-header-cell-asc .v-table-sort-indicator {
        background-image: url(../reindeer/table/img/asc.png);
        /** sprite-ref: verticals;
        sprite-alignment: right;
        sprite-margin-top: 7px;
        sprite-margin-bottom: 6px;
        sprite-margin-right: 6px;
        */}
     .v-table-strong .v-table-header-cell-desc .v-table-sort-indicator {
        background-image: url(../reindeer/table/img/desc.png);
        /** sprite-ref: verticals;
        sprite-alignment: right;
        sprite-margin-top: 7px;
        sprite-margin-bottom: 6px;
        sprite-margin-right: 6px;
        */}
     .v-table-strong .v-table-column-selector {
        background-image: url(../reindeer/table/img/col-sel.png);
        /** sprite-ref: verticals */}
     .v-table-strong .v-table-column-selector:active {
        background-image: url(../reindeer/table/img/col-sel-pressed.png);
        /** sprite-ref: verticals */}
     .v-table-strong .v-table-focus-slot-left, .v-table-strong .v-table-focus-slot-right {
        border-color: #9ca1a5;
    }
     .black .v-table-header-wrap, .black .v-table-header-drag {
        border-color: #252729;
        background-image: url(../reindeer/table/img/header-bg-black.png);
        /** sprite-ref: black-verticals;
        sprite-alignment: repeat */color: #e7eaee;
        text-shadow: #000 0 -1px 0;
    }
     .black .v-table-resizer {
        border-right-color: #252729;
    }
     .black .v-table-header-cell-asc .v-table-sort-indicator {
        background-image: url(../reindeer/table/img/asc.png);
        /** sprite-ref: black-verticals;
        sprite-alignment: right;
        sprite-margin-top: 7px;
        sprite-margin-bottom: 6px;
        sprite-margin-right: 6px;
        */}
     .black .v-table-header-cell-desc .v-table-sort-indicator {
        background-image: url(../reindeer/table/img/desc.png);
        /** sprite-ref: black-verticals;
        sprite-alignment: right;
        sprite-margin-top: 7px;
        sprite-margin-bottom: 6px;
        sprite-margin-right: 6px;
        */}
     .black .v-table-column-selector {
        background-image: url(../reindeer/table/img/col-sel-black.png);
        /** sprite-ref: black-verticals */}
     .black .v-table-column-selector:active {
        background-image: url(../reindeer/table/img/col-sel-black-pressed.png);
        /** sprite-ref: black-verticals */}
     .black .v-table-focus-slot-left, .black .v-table-focus-slot-right {
        border-color: #9ca1a5;
    }
     .black .v-table-body {
        border-color: #252729;
        background: transparent;
    }
     .black .v-table-cell-content {
        border-right-color: #252729;
        border-bottom: 1px solid #252729;
    }
     .black .v-table-cell-wrapper {
        padding-bottom: 2px;
    }
     .black .v-table-row-odd {
        background: transparent;
    }
     .black .v-table .v-selected .v-table-cell-content {
        border-bottom: 1px solid #4d749f;
    }
     .v-table-borderless .v-table-header-wrap, .v-table-borderless .v-table-body {
        border: none;
    }
    
    .v-app .v-table input.v-textfield.v-widget, .v-window .v-table input.v-textfield.v-widget {
        padding: 1px 2px;
        height: auto;
        line-height: normal;
    }
     .v-table-cell-wrapper > input.v-textfield {
        margin-top: -2px;
        margin-bottom: -2px;
    }
    
    .v-slot .v-slot-table{
        //width: 100%;
    }
}

Patrick121 · August 1, 2014, 9:51am

PS: i tried to import reindeer-table from reindeer.scss but as soon as i include base.scss all my custom stuff gets messed up.
the problem is that i dont know what i have to import for the reindeer-table to get correctly built.

Patrick121 · August 6, 2014, 8:24am

PUSH: nobody has an idea?

Ola2 · November 25, 2014, 9:10am

Still around?
Reindeer includes base.scss for you. I’m not sure what you are/were trying to do. If you use setWidth… vaadin gives you a selector with -has-width to match and you can only override that with !important, so if you want to style layout and sizes don’t setWidth… Don’t know how much that explains but I’m trying to give you an idea of what to look for. Use your browsers dev tools to see what selectors vaadin gives you to play with.

OlaM

Sergey80 · April 12, 2015, 3:16am

Hi,

I stuck with same problem and do some trick to achieve desired behaviour.
So, i want to set width for my table, but it`s ignored. Now i try to setWidth(100%) on code level and its worked.

In code:

VerticalLayout tableWrapper = new VerticalLayout();
Table historyTable = new Table(“История заявки”);
historyTable.setWidth(100, Unit.PERCENTAGE);
historyTableWrapper.addComponent(historyTable);
historyTableWrapper.setStyleName(“my-history-table-wrapper”);

In css:
.my-history-table-wrapper
{
width: 850px !important;
}

So now table has width of your wrapper… Set wrapper width in css and it changes your table width.

I don`t know is it good decision. But it works …

Thanks.