Home Forums Porto Admin Template Select2 Centered align

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #10030962
    mushi
    Participant

    Hello,
    I have few questions
    1. I’m using select2 in HTML table but i couldn’t make it centered align how can i do that?
    Image1

    2. How can i remove/hide line separator from left logo
    Image2

    3. How to change text ‘records per page’ of data table and also how can i change is values (10,25,50,100,All) to (50,100,200,500, All)
    Image3
    see attached images



    Template Version: 2.2.0
    #10030973
    Support2
    Keymaster

    Hello Mushi,

    1) Wrap the select2 inside a div with flex class to center content:

    <div class="d-flex justify-content-center">
    	<select data-plugin-selectTwo class="form-control populate">
    		<optgroup label="Alaskan/Hawaiian Time Zone">
    			<option value="AK">Alaska</option>
    			<option value="HI">Hawaii</option>
    		</optgroup>
    		<optgroup label="Pacific Time Zone">
    			<option value="CA">California</option>
    			<option value="NV">Nevada</option>
    			<option value="OR">Oregon</option>
    			<option value="WA">Washington</option>
    		</optgroup>
    		<optgroup label="Mountain Time Zone">
    			<option value="AZ">Arizona</option>
    			<option value="CO">Colorado</option>
    			<option value="ID">Idaho</option>
    			<option value="MT">Montana</option>
    			<option value="NE">Nebraska</option>
    			<option value="NM">New Mexico</option>
    			<option value="ND">North Dakota</option>
    			<option value="UT">Utah</option>
    			<option value="WY">Wyoming</option>
    		</optgroup>
    		<optgroup label="Central Time Zone">
    			<option value="AL">Alabama</option>
    			<option value="AR">Arkansas</option>
    			<option value="IL">Illinois</option>
    			<option value="IA">Iowa</option>
    			<option value="KS">Kansas</option>
    			<option value="KY">Kentucky</option>
    			<option value="LA">Louisiana</option>
    			<option value="MN">Minnesota</option>
    			<option value="MS">Mississippi</option>
    			<option value="MO">Missouri</option>
    			<option value="OK">Oklahoma</option>
    			<option value="SD">South Dakota</option>
    			<option value="TX">Texas</option>
    			<option value="TN">Tennessee</option>
    			<option value="WI">Wisconsin</option>
    		</optgroup>
    		<optgroup label="Eastern Time Zone">
    			<option value="CT">Connecticut</option>
    			<option value="DE">Delaware</option>
    			<option value="FL">Florida</option>
    			<option value="GA">Georgia</option>
    			<option value="IN">Indiana</option>
    			<option value="ME">Maine</option>
    			<option value="MD">Maryland</option>
    			<option value="MA">Massachusetts</option>
    			<option value="MI">Michigan</option>
    			<option value="NH">New Hampshire</option>
    			<option value="NJ">New Jersey</option>
    			<option value="NY">New York</option>
    			<option value="NC">North Carolina</option>
    			<option value="OH">Ohio</option>
    			<option value="PA">Pennsylvania</option>
    			<option value="RI">Rhode Island</option>
    			<option value="SC">South Carolina</option>
    			<option value="VT">Vermont</option>
    			<option value="VA">Virginia</option>
    			<option value="WV">West Virginia</option>
    		</optgroup>
    	</select>
    </div>

    Also add this code in (css/custom.css) to remove the default margin-right:

    .dataTables_wrapper .select2-container {
    	margin-right: 0;
    }

    2) Add this code in (css/custom.css):

    .header.header-nav-menu .logo:after {
        content: none;
    }

    3) Change the code in “examples.datatables.default.js” to this new:

    /*
    Name: 			Tables / Advanced - Examples
    Written by: 	Okler Themes - (http://www.okler.net)
    Theme Version: 	2.2.0
    */
    
    (function($) {
    
    	'use strict';
    
    	var datatableInit = function() {
    
    		$('#datatable-default').dataTable({
    			dom: '<"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t>p',
    			order: [[2, 'desc']],
    			lengthMenu: [[10, 25, 50, 100, 500, -1], [10, 25, 50, 100, 500, "All"]]
    		});
    
    	};
    
    	$(function() {
    		datatableInit();
    	});
    
    }).apply(this, [jQuery]);

    * Note the lengthMenu option.

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

    Kind Regards,

    Rodrigo.


    #10030988
    mushi
    Participant

    Hello,
    thank you Regards it worked!

    one more thing im using Multi-Column Form layout but having trouble while creating row how can i remove this separator line ?
    Image


    #10030998
    Support2
    Keymaster

    Hello,

    Check if you have the class form-bordered on the <form> tag. If yes, remove this class.

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

    Kind Regards,

    Rodrigo.


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