Home Forums Porto Admin Template Tabs in tabs

This topic contains 8 replies, has 2 voices, and was last updated by  Support2 4 weeks ago. This post has been viewed 108 times

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #10026923

    TomaszF
    Participant

    Welcome,
    I have a problem with Tabs. In my views I use Tabs on the right side, horizontal menus. It works. However, if I want to add more Tabs in the already opened tab (e.g. with tabs on the top left), they do not display correctly, but take over the style of the main tab (the right tab). How do I improve my bookmark by placing it in bookmarks with different styles?


    #10026924

    Support2
    Keymaster

    Hello,

    Sorry but we couldn’t reproduce your issue here.
    Let me know if we understand your case and if we reproduced correctly:
    – In our test, we added the “Default” style of tabs inside the “Navigation” tab and it worked. (http://preview.oklerthemes.com/porto/6.2.1/elements-tabs.html)

    Please, send the code you are trying for us. Or better yet, send an online link of your website for us.

    Kind Regards,

    Rodrigo.


    #10026925

    Support2
    Keymaster

    Hello,

    Sorry, i made a confusion between the templates.
    My previous reply it’s related to Porto and not Porto Admin, sorry.

    But, making a new test on Porto Admin we still couldn’t reproduce the issue.
    Please, send the code you are trying for us. Or better yet, send an online link of your website for us.

    Kind Regards,

    Rodrigo.


    #10026926

    TomaszF
    Participant

    Tabs in tabs

    Hello,
    In this picture I want left tabs (popular and recent) to become top horizontal tabs(like tabsheets). Part of my code :

    <div id=”st” class=”tab-pane <?php echo $active4;?>”>
    <div class=”tabs”>
    <ul class=”nav nav-tabs”>
    <li class=”nav-item active”>
    <i class=”fas fa-star”></i> Popular

    <li class=”nav-item”>
    Recent

    <div class=”tab-content”>
    <div id=”popular” class=”tab-pane active”>
    <p>First horizontal tab</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
    </div>
    <div id=”recent” class=”tab-pane”>
    <p>Second horizontal tab</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
    </div>
    </div>
    </div>
    </div>
    </div>

    <ul class=”nav nav-tabs”>
    <li class=”nav-item <?php echo $active0;?>”>
    Informacje podstawowe

    <li class=”nav-item <?php echo $active1;?>”>
    Przypisani użytkownicy

    <li class=”nav-item <?php echo $active2;?>”>
    Typy obiektów

    <li class=”nav-item <?php echo $active3;?>”>
    Wykaz uprawnień

    <li class=”nav-item <?php echo $active4;?>”>
    Sample tab


    #10026928

    TomaszF
    Participant

    Target view

    this is how it should look like 🙂 it’s fake image…

    Regards,
    Tom


    #10026929

    Support2
    Keymaster

    Hello Tom, thanks for the explanation.

    Please, try adding the code below in (css/custom.css):

    .tabs-vertical .nav-justified {
        display: flex;
        width: 100%;
    }
    
    .tabs-vertical .nav-justified.nav-tabs li .nav-link {
        border-top-style: solid;
        border-top-color: transparent;
    }
    
    .tabs-vertical .nav-justified.nav-tabs li.active .nav-link,
    .tabs-vertical .nav-justified.nav-tabs li:hover .nav-link {
        border-right-color: transparent !important;
        border-top-style: solid;
        border-top-width: 3px;
    }

    Please, try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10026931

    TomaszF
    Participant

    Hello,

    It’s better, but not all of the changes I was supposed to make to the code were effective. For example, I cannot remove the right frame as transparent and enter my own top frame. I’ve added my own CSS classes (h_tabs and m_tabs) and that’s how it looks now. And how do I add these changes so that they don’t affect the right menu?

    Here’s sample movie : Sample movie

    <div id=”st” class=”tab-pane <?php echo $active4;?>”>
    <div class=”tabs m_tabs”>
    <ul class=”nav nav-tabs col-12″ style=”display: flex; width: 60%”>
    <li class=”nav-item h_tabs”>
    Popular

    <li class=”nav-item h_tabs”>
    Recent

    <div class=”tab-content”>
    <div id=”popular” class=”tab-pane active”>
    <p>First horizontal tab</p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.
    </p>
    </div>
    <div id=”recent” class=”tab-pane”>
    <p>Second horizontal tab</p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.
    </p>
    </div>
    </div>
    </div>
    </div>

    .h_tabs
    {
    width: 50%;
    text-align: center;
    }

    .h_tabs:hover
    {
    border-right-color: transparent !important;
    border-right-width: 0px !important;
    font-weight: bold;
    }

    .m_tabs{
    margin-bottom: 0px;
    /*
    border-radius: 0 0 0 5px;
    border-bottom: 1px solid #eee;
    */
    }


    #10026932

    TomaszF
    Participant

    Tabs


    #10026936

    Support2
    Keymaster

    Hello,

    It’s missing some classes like: tabs-vertical and nav-justified.
    In that case i recommend you use this code as an example to do that:

    <div class="row">
        <div class="tabs tabs-vertical tabs-right tabs-primary">
            <div class="tab-content">
                <div id="popularVertical" class="tab-pane active tabs">
                    <ul class="nav nav-tabs nav-justified">
                        <li class="nav-item active">
                            <a class="nav-link" href="#popularHorizontal" data-toggle="tab" class="text-center">
                                <i class="fas fa-star"></i>First horizontal tab</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#recentHorizontal" data-toggle="tab" class="text-center">Second horizontal tab</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div id="popularHorizontal" class="tab-pane active">
                            <p>First horizontal tab</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
                        </div>
                        <div id="recentHorizontal" class="tab-pane">
                            <p>Second horizontal tab</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
                        </div>
                    </div>
                </div>
                <div id="recentVertical" class="tab-pane">
                    <p>Second vertical tab</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et doloremagna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
                </div>
            </div>
            <ul class="nav nav-tabs">
                <li class="nav-item active">
                    <a class="nav-link" href="#popularVertical" data-toggle="tab">
                        <i class="fas fa-star"></i>First vertical tab</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#recentVertical" data-toggle="tab">Second vertical tab</a>
                </li>
            </ul>
        </div>
    </div>

    and use the css code into your (css/custom.css) that I had already passed you..

    .tabs-vertical .nav-justified {
        display: flex;
        width: 100%;
    }
    
    .tabs-vertical .nav-justified.nav-tabs li .nav-link {
        border-top-style: solid;
        border-top-color: transparent;
    }
    
    .tabs-vertical .nav-justified.nav-tabs li.active .nav-link,
    .tabs-vertical .nav-justified.nav-tabs li:hover .nav-link {
        border-right-color: transparent !important;
        border-top-style: solid;
        border-top-width: 3px;
    }

    Please, try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


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