Using a splitter on only selected div tags

[Shane P]

I have some html that I have applied the splitter to.

<div class="frame">

<div class="left-nav"></div>

<div class="content"></div>

<div class="clear"></div>

</div>

My class left-nav has a set width of 200px and my content class doesn't have a set width.
clear just removes the floating.

Can the splitter be applied just to left-nav?

I have tried

$(".frame").kendoSplitter({

          panes: [

                          { collapsible: true,size:"200px",max:"200px"},

                      {},{}

                            

    

                      ]

      });

But it applies a panel to the .content div.

Any suggestions?

[Alexander Valchev]

Hello Shane,

The layout and structure of a splitter is defined within the DOM as a DIV with child elements.
There is no need to manually clear the floating - KendoUI will do that for you. Please check the following example:

<p>Content before</p>
<div class="frame">
    <div class="left-nav"></div>
    <div class="content"></div>
</div>
<p>Content after</p>

<script>
    $(document).ready(function(){
        $(".frame").kendoSplitter({
            panes: [
                { collapsible: true, size:"200px", max:"200px"},
                {}
            ]
        });
    });
</script>

Greetings,
Alexander Valchev
the Telerik team

[Shane P]

Thanks Alexander. I was using clear to format the layout of my page.

With a little rework all is good.

Thank you