Color change for split bar issue - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: css, jqxsplitter, splitbar, splitter

This topic contains 3 replies, has 2 voices, and was last updated by browserspot 11 years, 8 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Color change for split bar issue Posts

August 26, 2013 at 10:28 pm Color change for split bar issue #27732

Participant

Hi,

I want to change the color of the split bar in the panels. It works for the vertical one only, but not for the horizontal panels. Can you please tell me what can be the possible issue?

The following is the code…


<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/jqx.base.css" type="text/css" />
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="javascripts/jqxcore.js"></script>
    <script type="text/javascript" src="javascripts/jqxsplitter.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
        $('#splitContainer').jqxSplitter({ height: '100%', width: '100%', orientation: 'vertical',  panels: [{ size: '50%' }, { size: '50%'}] });
		$('#leftSplitter').jqxSplitter({ height: '100%', width: '100%', orientation: 'horizontal',panels: [{ size: '50%' }, { size: '50%'}] });
		$('#rightSplitter').jqxSplitter({ height: '100%', width: '100%', orientation: 'horizontal',panels: [{ size: '50%' }, { size: '50%'}] });
		   
        });
    </script>
    <style type="text/css">
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
		
		<!-- Slider color (Normal) -->
.jqx-splitter-splitbar-horizontal { background-color: red;}  /* This is NOT working */
.jqx-splitter-splitbar-vertical { background-color: red;}
.jqx-fill-state-pressed{ background-color: red;}
<!-- Slider color (Hover) -->
.jqx-fill-state-normal { background-color: #999;}
.jqx-fill-state-hover { background-color: #999;}	   	   
<!-- Slider button color (Hover) -->
.jqx-splitter-collapse-button-vertical { background-color: #ccc;}
.jqx-splitter-collapse-button-horizontal { background-color: #ccc;}
    </style>
</head>
<body>
   <div id="splitContainer">
                <div>
                    <div id="leftSplitter">
                        <div>
                           one
                        </div>
                        <div>
                           two
                        </div>
                    </div>
                </div>
                <div>
                    <div id="rightSplitter">
                        <div>
                           three
                        </div>
                        <div>
                           four
                        </div>
                    </div>
                </div>
            </div>                 
</body>
</html>

August 27, 2013 at 4:50 am Color change for split bar issue #27747

Dimitar

Participant

Hello browserspot,

Besides the jqx-splitter-splitbar-horizontal class, the horizontal splitbar also has the jqx-fill-state-normal class, which you have also changed in your code. The latter class takes precedence, because it is below the former. To fix this issue, please put the definition of jqx-fill-state-normal before the definition of jqx-splitter-splitbar-horizontal.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

August 28, 2013 at 5:15 am Color change for split bar issue #27830

browserspot

Participant

Thank you Dimitar!

I do have another question….

How do I change the border colors of the splitter. Please see the example below…for some reason the borders of the horizontal splitter works but the vertical ones don’t. Is there an order in which the styling needs to be done? If so, can you share it with me. Thank you!


<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/jqx.base.css" type="text/css" />
	<link rel="stylesheet" href="css/jqx.summer.css" type="text/css" />
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="javascripts/jqxcore.js"></script>
    <script type="text/javascript" src="javascripts/jqxsplitter.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
		
		totalScreenHeight = $(window).height();
		totalSplitterHeight=totalScreenHeight-70;
		
		totalScreenWidth = $(window).width();
        $('#splitContainer').jqxSplitter({ height: '100%', width: '100%', orientation: 'vertical', panels: [{ size: '50%' }, { size: '50%'}] });
		$('#leftSplitter').jqxSplitter({ height: '100%', width: '100%', orientation: 'horizontal',panels: [{ size: '50%' }, { size: '50%'}] });
		$('#rightSplitter').jqxSplitter({ height: '100%', width: '100%', orientation: 'horizontal', panels: [{ size: '50%' }, { size: '50%'}] });
		   
        });
    </script>
    <style type="text/css">
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
		
		
<!-- Maintain this order -->
.jqx-fill-state-pressed{ }
.jqx-fill-state-normal {background-color: white; border-top:1px solid red; border-bottom:1px solid green; }
.jqx-fill-state-hover { background-color: red;}	   	
.jqx-splitter-collapse-button-vertical { background-color: black;}
.jqx-splitter-collapse-button-horizontal { background-color: black;}
<!-- Slider color (Hover) -->
	
    </style>
</head>
<body>
   <div id="splitContainer">
                <div>
                    <div id="leftSplitter">
                        <div>
                           one
                        </div>
                        <div>
                           two
                        </div>
                    </div>
                </div>
                <div>
                    <div id="rightSplitter">
                        <div>
                           three
                        </div>
                        <div>
                           four
                        </div>
                    </div>
                </div>
            </div>                 
</body>
</html>

August 28, 2013 at 5:35 am Color change for split bar issue #27831

browserspot

Participant

never mind. I just found the solution. It seems to do that I need to style the border for left, right, top and bottom.

.jqx-fill-state-normal {background-color: white; border-top:1px solid red; border-bottom:1px solid green; border-left:1px solid red; border-right:1px solid green; }

Thank you!

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.