Home Forums Porto Admin Template Problem with Multi-Value Select

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #10030819
    mushi
    Participant

    Hello Rodrigo,
    hope you are fine. i am facing issue with multi-value select (select2) when i select multiple values its width doesn’t work responsively.
    please look at attached screenshots.
    image 1 how it is working
    image 2 how it should work (used in my old website select2-v4.0.3 from github)

    Image 1
    Image 2



    Template Version: 2.2.0
    #10030822
    Support2
    Keymaster

    Hello,

    Hope you are fine too 🙂

    Sorry for this issue. To fix please just add this code in (css/custom.css):

    .select2-container--bootstrap .select2-selection--multiple {
        height: auto;
        padding-bottom: 5px;
    }

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

    Kind Regards,

    Rodrigo.


    #10030823
    mushi
    Participant

    thanks it worked!

    one more thing select2 width not responsive with respect to screen size please see attached images.

    Image 1
    Image 2

    Code 1

    <form class="form-horizontal form-bordered" method="get">
    
    	<div class="form-group row">
    		<label class="col-lg-3 control-label text-lg-right pt-2"></label>
    
    		<div class="col-lg-6">
    			<div class="input-group flex-nowrap mb-3">
    						<span class="input-group-prepend">
    							<span class="input-group-text">
    								<i class="fas fa-phone fa-fw"></i>
    							</span>
    						</span>
    					<input type="text" name="" id="" class="form-control" placeholder="Enter Call group name">
    			</div>
    
    			<div class="input-group mb-3 text-primary w-100">
    						<span class="input-group-prepend">
    							<span class="input-group-text">
    								<i class="fab fa-teamspeak fa-fw"></i>
    							</span>
    						</span>
    				<select multiple data-plugin-selectTwo class="form-control populate">
    					<option value="">Please Select Hunt Group</option>
    					<option value="2">200</option>
    					<option value="3">201</option>
    					<option value="4">203</option>
    					<option value="4">204</option>
    				</select>
    			</div>
    
    			<div class="row">
    				<div class="col-sm-8">
    
    				</div>
    				<div class="col-sm-4 text-right">
    					<button type="submit" value="submit" class="btn btn-lg btn-primary mt-2">Create Group</button>
    				</div>
    			</div>
    		</div>
    	</div>
    </form>

    • This reply was modified 2 months, 3 weeks ago by mushi.
    • This reply was modified 2 months, 3 weeks ago by mushi.
    • This reply was modified 2 months, 3 weeks ago by mushi.
    #10030827
    Support2
    Keymaster

    Hello,

    This is a common issue with the default behavior of Select2 plugin that define a fixed width on first load of page.

    In that case you can control the width trough CSS with the code below in (css/custom.css):

    .my-custom-select + .select2-container {
        width: calc(100% - 45px) !important;
    }

    Add the class “my-custom-select”:

    <select multiple data-plugin-selectTwo class="form-control populate my-custom-select">

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

    Kind Regards,

    Rodrigo.


    #10030830
    mushi
    Participant

    Thankyou for your support Rodrigo it worked perfect 🙂


    #10030834
    Support2
    Keymaster

    Hello,

    Great!

    If you need further assistance, feel free to contact us.

    Kind Regards,

    Rodrigo.


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