4 Replies Latest reply on Apr 26, 2017 2:45 PM by John Snyders-Oracle

    Displaying labels vertically in an Interactive Grid

    Niels de Bruijn

      In Excelsheets, the label is displayed vertically so that more fields fit on the screen. How is this done in an Interactive Grid?

        • 1. Re: Displaying labels vertically in an Interactive Grid
          Pierre Yotti

          Hey,

          do you means how to have the Heading  and column elements center?

          • 2. Re: Displaying labels vertically in an Interactive Grid
            Niels de Bruijn

            The column header text (ie. Name, First Name, etc.) should be displayed 45 degrees rotated counter clockwise.

            • 3. Re: Displaying labels vertically in an Interactive Grid
              Pierre Yotti

              Hey,

              have you try

               

              -webkit-transform: rotate(45deg); for the Selector a-GV-header?

              • 4. Re: Displaying labels vertically in an Interactive Grid
                John Snyders-Oracle

                Hi Niels,

                 

                This is a job for CSS. The first question is how to target the specific header cells. If you want all of the columns to be vertical use .a-GV-headerLabel. The column attribute CSS classes applies to the cell not the header cell. The heading text is wrapped in a span that gets an ID which you can use. So if you give your column a static ID of C_FOO then you can select the span with #C_FOO_HDR. Relying on how a widget generates IDs is not the most robust because it could change in the future. But it works for now and I don't know of any plan to change this id. There is advanced column configuration that can be used to give the column header a class. Add the following code to the column attribute Advanced JavaScript Code:

                 

                function(config) {

                    config.defaultGridColumnOptions = {

                        headingCssClasses: "hdr-vert"

                    };

                    return config;

                }

                 

                Now you can select the heading text span with .hdr-vert .a-GV-headerLabel

                 

                You need to make the header height high enough to show the vertical labels. Also the vertical column headings should be start Aligned (column attribute Heading: Alignment = start).

                 

                All that remains are the CSS rules to add, for example, to the page inline CSS. The following example is something that I tried on a IG on the EMP table. I gave the ENAME column a static ID of C_ENAME. For a few other columns I used the Advanced: JavaScript Code given above.

                 

                .a-GV-header {

                    height: 120px;

                }

                 

                #C_ENAME_HDR, .hdr-vert .a-GV-headerLabel {

                    transform: translateX(-40%) rotate(-90deg);

                    display: inline-block;

                }

                 

                There may be improvements or customization to make to the CSS but this is the general idea.

                 

                Regards,

                -John