Grid Sidebar very large

I have set a column as hideable and hidden which results in a sidebar to appear.

Somehow is very wide when opened (the sidebar of the left grid is opened):

Any idea why?

I am using the valo theme and this is how I set up the hidden column:

Grid.Column column = grid.getColumn(propertyId); if (column != null) { column.setHidable(true); column.setHidden(true); } I originally posted this issue under the “Theming” section of this forum (
https://vaadin.com/forum#!/thread/14695944
), but it might be better suited in this section. I am not sure.
29306.png

I haven’t seen this kind of thing happening myself. My first guess would be that you have something in your theme targeted to too generic stylename. You should check the column sidebar menu with Chrome inspect element and cross check that with your theme targets. If you have done already that, then this is really weird.

Thanks for the reply. I do not see anything that would interfere with it, here is a snippet of what I am seeing (also
attached
):

It seems strange to me that both left and right are 0. Could that be it? I would not know how to fix it, but I can imagine that beeing a problem.

Also here is our custom theme (but without completly new classes that do not matter here):

@import "../valo/valo.scss";

@mixin gmmtheme {
  @include valo;

    .v-filterselect-suggestpopup div[class*="next"]
 {
        background-color: grey;
        color: white;
        opacity: 1;
    }

    .v-filterselect-suggestpopup div[class*="prev"]
 {
        background-color: grey;
        color: white;
        opacity: 1;
    }

    .v-filterselect-suggestpopup [class$="status"]
 {
        background: grey;
        color: white;
    }

    .v-margin-left {
        padding-left: 5px;
    }

    .v-margin-right {
        padding-right: 5px;
    }

    .v-margin-top {
        padding-top: 5px;
    }

    .v-margin-bottom {
        padding-bottom: 5px;
    }

    .v-grid-column-header-content {
        font-size: 10pt;
    }

    .v-grid-body {
        .v-grid-cell {
            height: 25px;
            line-height: 24px;
        }
    }

    .v-table-cell-content {
        height: 24px;
    }

}

29405.png

I found the cause, but not the fix. It is cause by the right: 0 in the .v-grid-sidebar.v-contextmenu:


As soon as I turn of that property of in my Chrome CSS Console it looks and behaves correctly.

But I have no idea how to fix this without interfering in other components.
How do I fix this issue?

30102.png

Any Ideas how I can fix this issue?

Bump

I would check what you have defined for .gmmtheme. There seems not to be style “right: 0;” defined for .v-contextmenu in the div you have highlighted, so it must have been inherited from somewhere else, .gmmtheme is the first one that comes to my mind.

Thx for replying, I thought the same, but cannot see that gmmtheme is interfering or having the base for inheritance:

// Global variable overrides. Must be declared before importing Valo.

// Defines the plaintext font size, weight and family. Font size affects general component sizing.
  $v-font-size: 13px !default;
//$v-font-weight: 300;
//$v-font-family: "Open Sans", sans-serif;

// Defines the border used by all components.
//$v-border: 1px solid (v-shade 0.7);
//$v-border-radius: 4px;

// Affects the color of some component elements, e.g Button, Panel title, etc
//$v-background-color: hsl(210, 0%, 98%);
// Affects the color of content areas, e.g  Panel and Window content, TextField input etc
//$v-app-background-color: $v-background-color;

// Affects the visual appearance of all components
//$v-gradient: v-linear 8%;
//$v-bevel-depth: 30%;
//$v-shadow-opacity: 5%;

// Defines colors for indicating status (focus, success, failure)
//$v-focus-color: valo-focus-color(); // Calculates a suitable color automatically
//$v-friendly-color: #2c9720;
//$v-error-indicator-color: #ed473b;

// For more information, see: https://vaadin.com/book/-/page/themes.valo.html
// Example variants can be copy/pasted from https://vaadin.com/wiki/-/wiki/Main/Valo+Examples

@import "../valo/valo.scss";

@mixin gmmtheme {
  @include valo;

    // This is a temporary fix. until the overall style of the application is fresher.
    // But with out these readonyl stylongs a readonly textfield is grey.
    // On a grey form.
    // With everything around it beeing grey.
    // So you cannot really distinguish the field from the normal area and it becomse hard to see.
    .v-textfield-readonly {
        background: white; // Orginally is "#fafafa"
    }

    .v-textarea-readonly {
        background: white; // Orginally is "#fafafa"
    }

    .v-datefield.v-readonly [class*="textfield"]
 {
        background: white; // Orginally is "#fafafa"
    }

    .main-view-background-image {
        background: url("./img/main-view-background.jpg");
        background-size: cover;
    }

    .main-view-top-bar {
        background-color: white;
        //height: 45%;
    }

    .main-view-title-text {
        font-size: 18pt;
    }

    .main-view-welcome-text {
        font-size: 16pt;
    }

    .main-view-db-chart-component {
        position: absolute;
        bottom: 0px;
    }

    .main-view-app-choice-layout {
        margin: 3% 0 0 0;
    }

    .v-filterselect-suggestpopup div[class*="next"]
 {
        background-color: grey;
        color: white;
        opacity: 1;
    }

    .v-filterselect-suggestpopup div[class*="prev"]
 {
        background-color: grey;
        color: white;
        opacity: 1;
    }

    .v-filterselect-suggestpopup [class$="status"]
 {
        background: grey;
        color: white;
    }

    .v-grid-cell.grenzwertok {
        background-color: lightgreen;
    }

    .v-grid-cell.grenzwertgerissen {
        background-color: lightcoral;
    }

    .help-button {
        font-size: 18px;
        color: black;
        //font-weight: 400;
    }
    
    .blueStyle {
        color: #1660b7;
    }

    .hugeLabel {
        font-size: 28px;
        font-weight: bold;
    }
    
    #captiontext-fontstyle {
        font-size: 12px;
        font-weight: 400;
    }

    .inactive-object {
        font-style: italic;
    }

    .v-table-cell-content-inactive-object {
        font-style: italic;
    }

    /* Analog zu FISWA: ComboBoxen haben keinen Scrollbalken aufgrund des Nachladens der Elemente (lazy loading).
     Möchte man trotzdem die ComboBox nutzen, kann man alle Elemente hineinladen und das suggestmenu auf eine Höhe von X setzten,
     was provoziert das ein Scrollbalken angezeigt wird. Damit nutzt man allerdings nicht mehr das Nachladen der ComboBox.
     Diese Verhalten deutet dann eher auf ein NativeSelect hin, da es kein LazyLoading und einen Scrollbalken hat. */
    //.v-filterselect-suggestmenu {
    //    max-height: 10em;
    //}

    .main-view-bottom-bar {
        background-color: white;
        //height: 45%
    }

    .panel-no-box {
        border: transparent;
        background: transparent;
    }

    .v-margin-left {
        padding-left: 5px;
    }

    .v-margin-right {
        padding-right: 5px;
    }

    .v-margin-top {
        padding-top: 5px;
    }

    .v-margin-bottom {
        padding-bottom: 5px;
    }

    .v-grid-column-header-content {
        font-size: 10pt;
    }

    .v-grid-body {
        .v-grid-cell {
            height: 25px;
            line-height: 24px;
        }
    }

    .iconAhuBlue .v-icon {
        color: #00529F;
    }

    .iconRed .v-icon {
        color: #b10000;
    }

    .v-table-cell-content {
        height: 24px;
    }

      .navigationTree {
        padding-right: 5px;
    }

    .navigationTree {
        .v-icon {
            margin-right: 5px;
        }
    }

    .esriSimpleSlider {
        color: #1660b7;
    }
    
    .esriSimpleSlider div {
        font-size: 17px;
    }

    .esriSimpleSliderIncrementButton span {
        display: none;
    }
    .esriSimpleSliderIncrementButton:after {
        background-image: none;
        content: "\f00e"!Important;
        font-family: FontAwesome;
    }
    .esriSimpleSliderDecrementButton span {
        display: none;
    }
    .esriSimpleSliderDecrementButton:after {
        background-image: none;
        content: "\f010"!Important;
        font-family: FontAwesome;
    }
    
    .esriSimpleSliderHomeButton {
          border-top: 2px solid #666666;
        //border-bottom: 2px solid #666666;
        //background-image: url(./img/Home_Extent_24.png);
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
    }
    .esriSimpleSliderHomeButton:hover {
        background-color:#eee;
        //background-color: rgb(102, 102, 102);
        //background-color: rgba(102, 102, 102, 0.9);
    }
    .esriSimpleSliderHomeButton span {
        display: none;
    }
    .esriSimpleSliderHomeButton:after {
        content: "\f122"!Important;
        font-family: FontAwesome;
    }
    
    .esriSimpleZoomPrevButton {
        border-top: 2px solid #666666;
          border-bottom: 2px solid #666666;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
    }
    .esriSimpleZoomPrevButton:hover {
        background-color:#eee;
    }
    .esriSimpleZoomPrevButton span {
        display: none;
    }
    .esriSimpleZoomPrevButton:after {
        content: "\f053"!Important;
        font-family: FontAwesome;
    }
    .esriSimpleZoomNextButton {
          border-bottom: 2px solid #666666;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
    }
    .esriSimpleZoomNextButton:hover {
        background-color:#eee;
    }
    .esriSimpleZoomNextButton span {
        display: none;
    }
    .esriSimpleZoomNextButton:after {
        content: "\f054"!Important;
        font-family: FontAwesome;
    }
    
    .esriSimpleSelectButton {
        border-bottom: 2px solid #666666;
        //background-image: url(./img/SelectInteractively16.png);
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
    }
    .esriSimpleSelectButton:hover {
        background-color:#eee;
    }
    .esriSimpleSelectButton:after {
        content: "\f125"!Important;
        font-family: FontAwesome;
    }
    .esriSimpleClearSelectionButton {
        border-bottom: 2px solid #666666;
        //background-image: url(./img/clearSelectedFeatures.png);
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
    }
    .esriSimpleClearSelectionButton:hover {
        background-color:#eee;
    }
    .esriSimpleClearSelectionButton:after {
        content: "\f12d"!Important;
        font-family: FontAwesome;
    }
    .esriSimplePanButton {
        border-bottom: 2px solid #666666;
        //background-image: url(./img/move.png);
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
    }
    .esriSimplePanButton:hover {
        background-color:#eee;
    }
    .esriSimplePanButton:after {
        content: "\f047"!Important;
        font-family: FontAwesome;
    }
    
    .esriSimpleMeasureButton {
        border-bottom: 2px solid #666666;
        //background-image: url(./img/Measure_Tool_16.png);
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
    }
    .esriSimpleMeasureButton:hover {
        background-color:#eee;
    }
    .esriSimpleMeasureButton:after {
        content: "\f065"!Important;
        font-family: FontAwesome;
    }

    .esriLoadingImage {
        position:absolute;
        top:15px;
        left:75px;
        background-image: url(./img/loading.gif);
        background-repeat: no-repeat;
        background-position: center;
    }

}

Bump

Hi again,

I am sorry to annoy about this problem, but I really do not know how to fix this issue and do not see that our theme is wrong.

Can somebody please help?

Kind Regards

Joe

Hi once more,

I really tried a couple of times to solve this issue, but I think it is better if somebody that knows the styling well fixes this issue. I cannot see that we broke the styling so if anyone sees it please let me know. Please help.

Kind Regards

Joe