Home Forums Porto Admin Template table-classes

This topic contains 4 replies, has 2 voices, and was last updated by  Support2 2 months, 1 week ago. This post has been viewed 133 times

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #10029707

    pellesoft
    Participant

    Hi, there are several classes that could be used, one of theme are “d-sm-none” etc.

    When i am having a table, what should i use when i eg. have 5 columns and want to show 5 for standard, 4 when the screen are more narrow and 3 when the screen are in mobile-format?

    I cannot figure out how this should be, i have seen the sample in the grid but in my head, the data is turned so to speak, when there are wide screen, 3 fields are visible, when it gets more narrow, more fields are presented.

    Can you help me with a sample that matches my thoughts please

    Regards
    Pelle


    #10029708

    pellesoft
    Participant

    <table class=”table table-bordered table-striped mb-0″ id=”datatable-tabletools”>
    <thead>
    <tr>
    <th>Rendering engine</th>
    <th>Browser</th>
    <th>Platform(s)</th>
    <th class=”d-lg-none”>Engine version</th>
    <th class=”d-lg-none”>CSS grade</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Trident</td>
    <td>Internet
    Explorer 4.0
    </td>
    <td>Win 95+</td>
    <td class=”center d-lg-none”>4</td>
    <td class=”center d-lg-none”>X</td>
    </tr>
    <tr>
    <td>Trident</td>
    <td>Internet
    Explorer 5.0
    </td>
    <td>Win 95+</td>
    <td class=”center d-lg-none”>5</td>
    <td class=”center d-lg-none”>C</td>
    </tr>


    #10029709

    pellesoft
    Participant

    The above sample is the opposite of what i think should be correct, wide screen = more fields, narrow screen = fewer fields.

    See your demo:
    https://preview.themeforest.net/item/porto-admin-responsive-html5-template/full_screen_preview/8539472?_ga=2.195987436.1328449911.1557840890-1915264817.1488107621


    #10029710

    pellesoft
    Participant

    Also, in the upper right corner – there is an arrow down. When the section are expanded, should it not be arrow up?
    Also, the “close” icon next to it, how can i create a button that shows all hidden panels again?

    Thanks
    Pelle


    #10029715

    Support2
    Keymaster

    Hello Pelle,

    Regarding the table here is the code you need to do that:

    <table class="table table-bordered table-striped mb-0" id="datatable-tabletools">
    	<thead>
    		<tr>
    			<th>Rendering engine</th>
    			<th>Browser</th>
    			<th>Platform(s)</th>
    			<th class="d-none d-md-table-cell">Engine version</th>
    			<th class="d-none d-lg-table-cell">CSS grade</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>Trident</td>
    			<td>Internet
    				Explorer 4.0
    			</td>
    			<td>Win 95+</td>
    			<td class="center d-none d-md-table-cell">4</td>
    			<td class="center d-none d-lg-table-cell">X</td>
    		</tr>
    		<tr>
    			<td>Trident</td>
    			<td>Internet
    				Explorer 5.0
    			</td>
    			<td>Win 95+</td>
    			<td class="center d-none d-md-table-cell">5</td>
    			<td class="center d-none d-lg-table-cell">C</td>
    		</tr>
    	</tbody>
    </tbody>

    * This will show 3 columns on mobile, 4 columns on medium devices (tablets) and 5 columns in large devices (desktop).
    * Note the classes d-none d-md-table-cell.
    * You can learn more about display utilities here: https://getbootstrap.com/docs/4.3/utilities/display/

    Regarding the arrow on panels, this is the expected behavior. If you want to reverse the arrows direction here is the code you need:
    (css/custom.css):

    .card-action-toggle:before {
        content: "\f0d8";
    }
    
    .card-collapsed .card-action-toggle:before {
        content: "\f0d7";
    }

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

    Kind Regards,

    Rodrigo.


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