How to remove the border around splitter wrapper? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 2 replies, has 2 voices, and was last updated by spetsnaz 11 years, 1 month ago.

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

Author

How to remove the border around splitter wrapper? Posts

August 29, 2012 at 12:07 pm How to remove the border around splitter wrapper? #7251

Member

Yep the questions looks clear from the topic. There is a border around the wrapper. (actually around every widget in jqw.) I need to remove it because I placed the whole wrapper just below my vertical head menu, so there shouldn’t be a 1px border below it.

even overriding it inline method didn’t work, still the propery border-color in base.css is effecting

Thanks.

This topic was modified 11 years, 1 month ago by spetsnaz.

August 30, 2012 at 5:37 am How to remove the border around splitter wrapper? #7268

Dimitar

Participant

Hello spetsnaz,

Here is how to remove the border around jqxSplitter:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Splitter Sample</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
    <style type="text/css">
        .jqx-splitter
        {
            border: none;
        }
    </style>
    <script type="text/javascript" src="../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#jqxSplitter").jqxSplitter({ theme: 'summer', panels: [{ size: '30px' }, { size: '30px' }, { size: '30px'}] });
            });
        </script>
        <div id='jqxSplitter' style="width: 300px; height: 150px">
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

August 30, 2012 at 6:44 pm How to remove the border around splitter wrapper? #7308

spetsnaz

Member

thanks dimitar, it worked very well. I think your styling is overriding the original one.

Author

Posts

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

You must be logged in to reply to this topic.