Skip to Content

Design Studio - Cross tab width adjustment using CSS


I am new to Design Studio and need your help with Cross tab column width adjustment using CSS.

The cross tab is designed to make sure it fits in 1366*768 resolution; I want the cross tab to automatically adjust it's width to 100% of the table cell when the page is viewed on higher resolution (the white space around it looks odd).

Currently the individual columns in the cross tab have a fixed width, I was curious whether there is some CSS code to adjust the width automatically based on the screen resolution.

scn-1.png (6.2 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • May 24, 2017 at 04:26 PM

    Smith -

    Try this on crosstab property

    • Under Layout -> Left Margin - 0px, Right Margin - 0px, Width - auto, Height - auto
    • Under Display -> Always Fill - True
    Add comment
    10|10000 characters needed characters exceeded

    • The left margin did not seem to change anything for the Cross Tab.

      The reason I asked for cross tab width adjustment using CSS -

      I have some CSS code that changes the chart font size based on the screen resolution, I wanted to see whether there is a way I can control the cross tab column width based on the screen resolution in a similar fashion.

      Here is the sample code

      @media only screen and (min-width:900px) {
      .myChartLabell .v-m-xAxis .v-label,
      .myChartLabell .v-m-yAxis .v-label,
      .myChartLabell .v-m-legend .v-label
      {font-size: 10px !important;