How to change the left side width of a SplitView

[Frisco Texas]

I tried to set cssClass as the following code to define the left side width. But it doesn't work

 splitview: M.SplitView.design({

            childViews: 'item1 item2 item3 item4 item5',

            cssClass: 'mySplitView',

            item1: M.SplitItemView.design({

                value: 'item1',

               view: M.ScrollView.design({

                    childViews: 'label',

                    label: M.LabelView.design({

                        value: 'Test page'

                    })

                })

and .mySplitView{

     width: 50px;

 

}

It always display width with 372px . How to overwrite this?

Thanks.

[Ricardo Pabón]

Hi Frisco,

If you want to overwrite the left side of the split view, which css class is "tmp-splitview-menu", add this to your css rule:

.tmp-splitview-menu {

width: 50px !important;

}

In the splitView, the width and height are set automatically with the jQuery css function, therefore these css attributes are set in element.style and cannot be overwritten by your css ".mySplitView"; setting the css attribute to important will overwrite the 372px width.

Writing "cssClass: 'mySplitView'" has no effect on the css class of the splitView container or any of its parts because the cssClass attribute is not used by any of the methods of the view.

Hope it helps,

Ricardo

[Frisco Texas]

Thanks