Design Studio - Cross tab width adjustment using CSS

[Former Member]

Experts,

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.

[former_member197738]

Smith -

Try this on crosstab property

• Under Layout -> Left Margin - 0px, Right Margin - 0px, Width - auto, Height - auto
• Under Display -> Always Fill - True

[Former Member]

Thank you for your reply. I tried what you suggested (removed the column widths from the setting, the other settings you suggested were already there), the page does not display the fourth column values by default in 1366*768 resolution, and I have to scroll to see the values in the last column

[former_member197738]

Hi Smith,

Can you please check the property on Tabstrip is same as crosstab one?

Just to make sure we have 1 crosstab in first tab ?

You can always define column width manually under Display -> Column width. But i guess that will still not resolve the issue you have.

[Former Member]

Thank you for trying to help me, here is the screenshot of the tab strip properties. I have only one cross tab in the entire application.

[former_member197738]

No problem Smith. I'm glad i can assist. Scn is a great community to exchanging idea and knowledge.

Please change left margin to 0px for Tabstrip_1

Forgot to ask - since you mentioned in your title 'adjustment using css' are you firing some script to modify the width of cross-tab?

[Former Member]

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;
}