Home Forums Porto Admin Template Dropdown button issue

This topic contains 11 replies, has 2 voices, and was last updated by  Support2 2 weeks, 5 days ago. This post has been viewed 124 times

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #10023525

    stesvis
    Participant

    Hello,

    I made a test page to prove this case.

    I want to use the dropdown button in my Actions column of a table, and the dropdown doesn’t render correctly.

    The issue only seems to present when the table has a class “.table”.

    If the table doesn’t have the class “.table” it works fine (except for the color of the dropdown items)

    http://dusano.levitica.ca/test
    username: admin
    password: Abc123!

    Thanks. It’s kind of important to have this dropdown button work in a table.

    Note: why does the text editor not beatify the HTML code in it?



    Template Version: latest
    #10023527

    Support2
    Keymaster

    Hello, thanks for your purchase.

    1) To use the dropdown inside a “.table”, you need to some custom CSS. Please, add the code below in (css/custom.css):

    .table a.dropdown-item, .table a.dropdown-item {
        display: block;
        margin-right: 0;
        color: inherit;
    }

    * I am adding this issue to our fix list, and we will analyze the possibility to prevent this in a future version of Porto Admin.

    2) Regarding the “Code”, the problem is the order that you are including the JS scripts. Please change like the image below:

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

    Kind Regards,

    Rodrigo.


    #10023528

    stesvis
    Participant

    Thanks Rodrigo, thanks for the CSS fix.

    I was looking at the page “forms-code-editor.html” in the template, I do have all the JS files in order, but it doesn’t format the code still.

    You can view the source of the page and scroll all the way down. There must be something else.
    http://dusano.levitica.ca/test

    jQuery DataTables

    Could you also advise why my DataTable search bar doesn’t render correctly?

    1. The search label should be a placeholder, and the searchbox is too wide and goes outside the page
    2. The pagination buttons: shouldn’t they be dark with the dark theme?

    QUESTION: would the page load faster if I loaded the vendors CSS and JS from CDN?


    #10023531

    Support2
    Keymaster

    Hello,

    Regarding the codemirror, the order of script still are wrong. You need to load the “codemirror” JS before the “App Scripts”. Change like the image below:

    * Note the codemirror scripts before the “App Scripts”.

    1) The problem with search label is the same above. The order of datatables script is wrong. You need to load datatables before the “App Scripts”, like the image below:

    2) The buttons next and prev should be dark, sorry for that issue. To fix please add in (css/custom.css):

    html.dark .pagination > li > a, html.dark .pagination > li > span {
        background-color: #282d36 !important;
        border-color: #242830 !important;
    }

    * We added this to our issue list and will be fixed in the next version of Porto.

    Regarding load CSS and JS from CDN, it’s a good idea since the CDN will choose the server to load the resources based on user geographic localization, so probably will load faster.

    Please, let me know if you have more questions.

    Kind Regards,

    Rodrigo.


    #10023534

    stesvis
    Participant

    Thank you very much for the explanation and for the new css fix.
    Cristian


    #10023538

    stesvis
    Participant

    I believe that also this page has some background issues (with dark theme)
    http://preview.oklerthemes.com/porto-admin/2.0.0/forms-wizard.html

    Cheers
    Cristian


    #10023543

    Support2
    Keymaster

    Hello Cristian,

    You are right, sorry for that issue.
    We already are working in that issues and will release a new version of Porto Admin
    with this fixes as soon possible.

    For now to fix, please add this code in (css/custom.css):

    html.dark .form-wizard .tab-content {
        background: #2e353e;
    }
    
    html.dark .nav-tabs {
        border-bottom-color: #282d36;
    }
    
    html.dark .nav-tabs li .nav-link, html.dark .nav-tabs li .nav-link:hover {
        background: #282d36;
        border-left-color: #282d36;
        border-right-color: #282d36;
        border-top-color: #282d36;
    }
    
    html.dark .nav-tabs li.active .nav-link, html.dark .nav-tabs li.active .nav-link:hover, html.dark .nav-tabs li.active .nav-link:focus {
        background: #282d36;
        border-left-color: #282d36;
        border-right-color: #282d36;
    }
    
    html.dark .progress.light {
        background: #282d36;
    }

    Kind Regards,

    Rodrigo.


    #10023552

    stesvis
    Participant

    Thanks!

    Sorry another quick question about the Skin.

    I read this

    however, when I generate a skin I get two files:

    • Admin
    • Extension

    Which files should I replace? Or Do i just add both these 2 files after all the other CSS?


    #10023555

    Support2
    Keymaster

    Hello Cristian,

    – If you are using only the Porto Admin template, you should get only the “Admin” skin generated.
    – If you are using the Porto HTML template + Porto Admin Extension, you should get the “Extension” skin.

    We created those two options for users that use Porto HTML + Porto Admin Extension. In that cases the “Extension” skin generated contains only the necessary css for extension features. This is the purpose of that.

    So if you are using only the Porto Admin, use just the “Admin” skin.

    Please, let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10023556

    stesvis
    Participant

    Yes, sorry I have one more.

    I changed the skin and everything seems fine, except my btn-primary has some css overwriting the background color when i place the button in a form:
    http://dusano.levitica.ca
    (see the login form)

    But after you log in, like in the dashboard, it’s fine.

    What could be overwriting the color?


    #10023557

    stesvis
    Participant

    Nevermind Rodrigo, I figured it out.


    #10023560

    Support2
    Keymaster

    Hello Cristian,

    Great that you solved the issue 🙂

    If you need further assistance, please contact us.

    Kind Regards,

    Rodrigo.


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