[JKANNANParticipant]

Thanks Peter.

I will try with the latest release.

Thanks

Kannan

[JKANNANParticipant]

Hi Peter,

Thanks for your response.

It appears that we need to set the height 100% for the form tag also in order to work in IE9.

Thanks

Kannan

[JKANNANParticipant]

Hi Peter,

The issue is when setting the height to 100%.

For example in the following code, setting the height for $(‘#mainSplitter’) to 100% and running in IE9, the panel does not display.

Just a single line is displayed.

<script type=”text/javascript”>

$(document).ready(function () {

$(‘#mainSplitter’).jqxSplitter({ width: ’100%’, height: ’100%’, orientation: ‘vertical’, resizable: false, panels: [{ size: 150, min: 150, collapsible: false }] });

$(‘#contentSplitter’).jqxSplitter({ width: ’100%’, height: ’100%’, orientation: ‘horizontal’, resizable: true, panels: [{ size: ‘60%’, collapsible: false }] });

});

</script>

<div id=”mainSplitter”>
<div>
Left Panel
</div>

<div>
<div id=”contentSplitter”>
<div class=”feed-item-list-container” id=”feedUpperPanel”>
Grid Summary
</div>

<div id=”feedContentArea”>
Grid Details
</div>
</div>

</div>
</div>

Thanks for your help.

Kannan

[JKANNANParticipant]

Thanks Peter. Setting the text-transform property resolved the issue.

– Kannan

[JKANNANParticipant]

Hi Mariya,

Setting the custom text using the OnLabel and OffLabel property works fine except the text is displayed in capitalized format.

Is there a way we can have the text displayed as it is when the OnLabel and OffLabel property value is set?

Thanks for your help.

Kannan

[JKANNANParticipant]

Hi Dimitar,

The Splitter control is not working with IE9.

It works fine in IE 10+, Chrome and Firefox.

Can you please let me know if this control has a limitation in IE9?

Thanks

Kannan

[JKANNANParticipant]

Thanks Dimitar.

That worked.

It is really strange having a commented div tag is causing an issue when placed in the content place holder.

The same code works without any issue when placed in a regular aspx page.

I am having a different issue when setting the height to 100%.

In the following code when I set the height for the mainSplitter to 100%, I am not able to see the panels displayed.

If the set the height other than 100% it works perfectly.

<asp:Content ID=”Content2″ ContentPlaceHolderID=”ContentPlaceHolder1″ runat=”Server”>

<script type=”text/javascript”>

$(document).ready(function () {

$(‘#mainSplitter’).jqxSplitter({ width: ‘100%’, height: 500, orientation: ‘vertical’, resizable: false, panels: [{ size: 150, min: 150, collapsible: false }] });

$(‘#contentSplitter’).jqxSplitter({ width: ‘100%’, height: ‘100%’, orientation: ‘horizontal’, resizable: true, panels: [{ size: ‘60%’, collapsible: false }] });

});

</script>

<div id=”mainSplitter”>
<div>
Left Panel
</div>

<div>
<div id=”contentSplitter”>
<div class=”feed-item-list-container” id=”feedUpperPanel”>
Grid Summary
</div>

<div id=”feedContentArea”>
Grid Details
</div>
</div>

</div>
</div>

</asp:Content>

Thanks for your help.

Kannan

[JKANNANParticipant]

Hi Dimitar,

Thanks for your response. The following is the error displayed in the browser’s console

Uncaught Invalid HTML Structure! jqxSplitter requires 1 container DIV tag and 2 nested DIV tags.

I have included all the required scripts for the jqxSplitter.

The following is the code from the aspx page.

<%@ Page Title=”” Language=”C#” MasterPageFile=”~/MasterPage.master” AutoEventWireup=”true” CodeFile=”JQSplitterToggleWithMasterPage.aspx.cs” Inherits=”JQWidgets_JQSplitterToggleWithMasterPage” %>

<asp:Content ID=”Content1″ ContentPlaceHolderID=”head” runat=”Server”>
</asp:Content>
<asp:Content ID=”Content2″ ContentPlaceHolderID=”ContentPlaceHolder1″ runat=”Server”>

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”scripts/demos.js”></script>
<script type=”text/javascript” src=”scripts/JQDateTimeInputUtils.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcalendar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtooltip.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/globalization/globalize.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxsplitter.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.js”></script>

<script type=”text/javascript” src=”jqwidgets/jqxgrid.selection.js”></script>

<script type=”text/javascript” src=”jqwidgets/jqxgrid.columnsresize.js”></script>

<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>

<script type=”text/javascript” src=”jqwidgets/jqxsplitter.js”></script>

<script type=”text/javascript” src=”jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxnavigationbar.js”></script>

<script type=”text/javascript” src=”jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtree.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxpanel.js”></script>

<script type=”text/javascript”>

$(document).ready(function () {

$(‘#mainSplitter’).jqxSplitter({ width: ‘100%’, height: ‘100%’, orientation: ‘vertical’, panels: [{ size: 300, collapsible: false }] });

$(‘#firstNested’).jqxSplitter({ width: ‘100%’, height: ‘100%’, orientation: ‘horizontal’, panels: [{ size: 300, collapsible: false }] });

$(‘#secondNested’).jqxSplitter({ width: ‘100%’, height: ‘100%’, showSplitBar: true, orientation: ‘vertical’, panels: [{ size: 150 }] });

$(‘#thirdNested’).jqxSplitter({ width: ‘100%’, height: ‘100%’, orientation: ‘vertical’, panels: [{ size: 150, collapsible: false }] });

});

</script>

<div id=”mainSplitter”>

<div>

<div id=”thirdNested”>

<div>

<span>Panel 4</span>
</div>

<%– <div>

<span>Panel 5</span>

</div>–%>
</div>

</div>

<div>

<div id=”firstNested”>

<div>

<div id=”secondNested”>

<div>

<span>Panel 1</span>
</div>

<div>

<span>Panel 2</span>
</div>

</div>

</div>

<div>

<span>Panel 3 </span>
</div>

</div>

</div>

</div>
</asp:Content>
<asp:Content ID=”Content3″ ContentPlaceHolderID=”ContentPlaceHolder2″ runat=”Server”>
</asp:Content>

The above code works when I remove the master page and place it in the regular aspx page.

I am currently using JQWIDGETS version 3.5.0

Any help would be appreciated.

Thanks

Kannan

[JKANNANParticipant]

Hi Nadezhda

Thanks for the sample. That works perfectly.

Thanks

Kannan

[JKANNANParticipant]

Hi Nadezhda

Thanks for the sample.

But this does not resolve the problem.

The sample that you have provided displays the notification on the first button click.

Any subsequent button clicks, will not display the notification bar.

I need only one instance of notification to be displayed every time the user clicks on the button.

Thanks for your help.

Kannan Jeyamani

[Author]

Posts