jQWidgets Forums

Tagged: javascript tabs, jQuery Tabs, jqwidgets tabs, Tabs

This topic contains 6 replies, has 2 voices, and was last updated by pepe 7 years, 11 months ago.

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

Author

Delete the header borders of a tab. Posts

March 20, 2017 at 5:32 pm Delete the header borders of a tab. #92336

pepe

Participant

Good afternoon, my question is the following since I have tried to modify the file jqx.base.css and I do not manage to get it totally.
It is possible to delete the left, upper and right border of the header on a tab.
In the example I attach to what I mean it has a green background.
A greeting.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>jQuery Tabs Sample</title>
    <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="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // create jqxtabs.
            $('#jqxtabs').jqxTabs({ width: 550, height: 150 });
            $('#jqxtabs').bind('selected', function (event) {
                var item = event.args.item;
                var title = $('#jqxtabs').jqxTabs('getTitleAt', item);
                alert(title);
            });
        });
    </script>

	<style>
		.jqx-tabs-header{
			background-color:#6C0;
		}
	</style>    
    
</head>
<body class='default'>
    <div id='jqxtabs'>
        <ul style='margin-left: 20px;'>
            <li>Tab 1</li>
        
        <div>
            Content 1
        </div>

    </div>
</body>
</html>

March 23, 2017 at 11:19 am Delete the header borders of a tab. #92415

Hristo

Participant

Hello pepe,

Please, take a look at this topic:
http://www.jqwidgets.com/community/topic/how-to-set-jqxtabs-header-height/
You could find how to edit the ‘header’.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

March 23, 2017 at 8:51 pm Delete the header borders of a tab. #92433

pepe

Participant

Good afternoon, I do not know if I have explained well, what I try is to eliminate the left, top and right edges of the tab header.

A greeting.

March 24, 2017 at 11:19 am Delete the header borders of a tab. #92442

Hristo

Participant

Hello pepe,

Please, take a look at this example.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

March 25, 2017 at 2:33 pm Delete the header borders of a tab. #92466

pepe

Participant

Thank you so much Hristo, that’s what I was looking to do, but on the outside.

A greeting.

March 27, 2017 at 9:29 am Delete the header borders of a tab. #92483

Hristo

Participant

Hello pepe,

You could find all available (recommended to use) classes that you could find them in our API Documentation.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

March 28, 2017 at 2:52 pm Delete the header borders of a tab. #92536

pepe

Participant

VERY WELL, THANKS

Author

Posts

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

You must be logged in to reply to this topic.