angular ui-grid dynamic event based css

Question

I am currently working on a project making use of the angular-ui/ui-grid. While looking through the css used to make it work (via firebug), I stumbled across something I have never seen before.

When the window that contains the ui-grid is resized the max-width: and min-width: all update accordingly ...

Where is the css from events #4 being referenced?

I know that CSS can be referenced from an external file, or within <style> tags, or Inline within a html tag ... but events #4 doesn't seem to fit any of those descriptions ... so how does it work?

CMR · Accepted Answer · 2015-09-20 12:29:18Z

Its dynamically set as inline style by some angular-ui-grid directive called ui-grid-style .

You can search their tutorial grids and you will find something like

<style class="ng-binding" ui-grid-style="">
        .grid1442752024758 {
        /* Styles for the grid */
    }
    .grid1442752024758 .ui-grid-row, .grid1442752024758 .ui-grid-cell, .grid1442752024758 .ui-grid-cell .ui-grid-vertical-bar {
    height: 30px;
    }
    .grid1442752024758 .ui-grid-row:last-child .ui-grid-cell {
    border-bottom-width: 0px;
    }
    /*
    .ui-grid[dir=rtl] .ui-grid-viewport {
    padding-left: px;
    }
    */
    .grid1442752024758 .ui-grid-coluiGrid-0007 { min-width: 161px; max-width: 161px; } .grid1442752024758 .ui-grid-coluiGrid-0008 { min-width: 161px; max-width: 161px; } .grid1442752024758 .ui-grid-coluiGrid-0009 { min-width: 161px; max-width: 161px; }
    .grid1442752024758 .ui-grid-render-container-body .ui-grid-canvas { width: 483px; height: 3000px; }
    .grid1442752024758 .ui-grid-render-container-body .ui-grid-header-canvas { width: 500px; }
    .grid1442752024758 .ui-grid-render-container-body .ui-grid-header-canvas { height: inherit; }
    .grid1442752024758 .ui-grid-render-container-body .ui-grid-viewport { width: 500px; height: 168px; }
    .grid1442752024758 .ui-grid-render-container-body .ui-grid-header-viewport { width: 500px; }
    .grid1442752024758 .ui-grid-render-container-body .ui-grid-footer-canvas { width: 500px; }
    .grid1442752024758 .ui-grid-render-container-body .ui-grid-footer-viewport { width: 500px; }
    .grid1442752024758 .ui-grid-footer-aggregates-row { height: 30px; } .grid1442752024758 .ui-grid-footer-info { height: 30px; }
    .grid1442752024758 .ui-grid-coluiGrid-0007 { min-width: 161px; max-width: 161px; } .grid1442752024758 .ui-grid-coluiGrid-0008 { min-width: 161px; max-width: 161px; } .grid1442752024758 .ui-grid-coluiGrid-0009 { min-width: 161px; max-width: 161px; }
</style>

Link to their sorting tutorial

Collectives™ on Stack Overflow

angular ui-grid dynamic event based css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related