"Loading content with AJAX" loading images and class handling problems

[Jong Woo]

<div id="splitter">
 <div></div>
 <div></div>
</div>
<script>
 $(document).ready(function() {
  $("#splitter").kendoSplitter({
   panes: [
    { contentUrl: '../../content/web/splitter/ajax/ajaxContent1.html' },
    { contentUrl: '../../content/web/splitter/ajax/ajaxContent2.html' }
   ]
  });
 });
</script>

<div id="splitter"> is <div class="k-widget k-splitter" id="vertical" style="-ms-touch-action: double-tap-zoom pinch-zoom;" data-role="splitter"> This changes.

1. class = "k-widget k-splitter" is class = "k-splitter" so I want to change.  Where do you need to modify the css file? ( $("#id").attr("class","k-splitter"); This is not desired. )

2. ajax call, How can I remove the loading image? and , order to increase the loading image size?

[Kiril Nikolov]

Hello Jong,

I am not really sure that I understand your question properly. If you want to override a CSS style and property just tell us what exactly you need to do, if you want to remove the k-splitter class then this is not possible as it will break its core functionality.

As for your second question - you can hide the loading image with CSS with this line of CSS code:

.k-icon.k-loading{
   display:none;
}

You can increase the image size by setting a background-size property and the width and height, using the same selector as above:

.k-icon.k-loading{
    width:20px;
    height:20px;
    background-size:20px;
}

I would like to kindly ask you to provide more detailed and cleared information about the issues you face, as it is really hard for us to narrow down the issues that you are having.

Regards,
Kiril Nikolov
Telerik