style quirk when using pinned columns

[Thanood]

The right border is missing..

Pinned left column:

Unpinned:

Also, please note that in both screenshots the filter input box doesn't have a right border.

[vegarringdal]

Are you using custom html here ?

If not, could you paste in the html, so I can check, because I do not have that issue here

[Thanood]

Column 1 and 2 are "simple", column 3 and 4 are custom. Html will be in the next post.

[Thanood]

Uhm.. Alright, a lot of HTML there.. :joy: I guess you only wanted the header. :smiley:

[vegarringdal]

I only wanted the one in your file, not browser :-)

[Thanood]

Oh whoops.. :smiley: I'll delete that wall of text above for readability.

          <v-grid v-columns.bind="columns" v-grid-connector.bind="gridConnector" v-row-height="45" v-header-height="50" v-panel-height="25" v-footer-height="25" style="height:100%;">
            <v-grid-group-row>
              <i click.delegate="changeGrouping(rowRef)"
                class="avg-fa avg-fa-${rowRef.__groupExpanded ? 'minus':'plus'}-square-o"
                aria-hidden="true">
              </i>
              &nbsp;${rowRef.__groupName} (${rowRef.__groupTotal})
            </v-grid-group-row>
            <v-grid-col col-width="200" col-pin-left="true" col-add-row-attributes="readonly='true'" col-sort="field: commonName" col-filter="field: commonName; operator:*;" col-field="commonName"></v-grid-col>
            <v-grid-col col-width="400" col-add-row-attributes="readonly='true'" col-header-name="DN" col-sort="field: distinguishedName" col-filter="field: distinguishedName; operator:*;" col-field="distinguishedName"></v-grid-col>
            <v-grid-col col-field="assignmentCounts.roles" col-width="200">
              <v-header-template>
                <p style="text-align: center;" class="vgrid-label-top" v-sort="field: assignmentCounts.roles; asc: false;" v-resize-col v-drag-drop-col="title: assigned roles; field: assignmentCounts.roles;">assigned roles</p>
                <div style="height:50%"></div>
              </v-header-template>
              <v-row-template>
                <p>
                  <a href="#" click.delegate="assignRoles(rowRef)">assigned roles: ${rowRef.assignmentCounts.roles}</a>
                </p>
              </v-row-template>
            </v-grid-col>
            <v-grid-col col-field="assignmentCounts.orgUnits" col-width="200">
              <v-header-template>
                <p style="text-align: center;" class="vgrid-label-top" v-sort="field: assignmentCounts.orgUnits; asc: false;" v-resize-col v-drag-drop-col="title: assigned orgUnits; field: assignmentCounts.orgUnits;">assigned orgUnits</p>
                <div style="height:50%"></div>
              </v-header-template>
              <v-row-template>
                <p>
                  <a href="#" click.delegate="assignOrgUnits(rowRef)">assigned org units: ${rowRef.assignmentCounts.orgUnits}</a>
                </p>
              </v-row-template>
            </v-grid-col>
          </v-grid>

[vegarringdal]

I copied you code and added only height and width to vgrid element since Im not using flex... looks like its working here... all add data to try again

[vegarringdal]

with data:

[Thanood]

Hmm, I've added some css, too. But why only with the first column and only when it's pinned? I'll look into it some more.

[vegarringdal]

Looked a little more on this

from what you can see you should not be able to mess it up, unless you data inside the column is floating outside the bounds of the column.. But again, it can be something in you main style sheet that is bleeding into it somehow here, I can help you figure this better out if I get a link to main css ?

[vegarringdal]

materialize.css btw ?

[vegarringdal]

@Thanood please report back on this one when you are back at work

[vegarringdal]

@Thanood is this fix too?

[Thanood]

Maybe it's only a problem when using flex. I'll try it today. I'm working on that UI anyway.

[vegarringdal]

great, is was a bug in the css when you created the issue, hope its solved now and isnt a flex issue

[Thanood]

Yes, it's fixed. 😃

[vegarringdal]

great