jQuery UI Widgets Forums Navigation Tabs Delete the header borders of a tab.

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • 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>
    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

    • This reply was modified 3 years ago by  Hristo.
    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.

    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

    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.

    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

    Delete the header borders of a tab. #92536

    pepe
    Participant

    VERY WELL, THANKS

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

You must be logged in to reply to this topic.