Onclick change width of dropdown using JavaScript

Content Index :

Onclick change width of dropdown using JavaScript
Javascript change width of div onclick
Javascript onclick to clear dropdown fields works only once per dropdown field
JavaScript/SASS: How to override default width of Google Maps API v3 Autocomplete dropdown based on width of input field
dropdown onclick on button not able to change the height
javascript dropdown onclick change element attribute

Onclick change width of dropdown using JavaScript

Tag : javascript , By : Chandra P Singh

Date : November 29 2020, 12:01 PM

This might help you According to Select2 Events, no click event available. Though you can use click on .select2-container like the following way:

$(function() {
  $('select')
    .select2({
      placeholder: 'Search Command...',
      width: '200',
      multiple: false,
      data: [{
        id: '',
        text: ''
      }, {
        id: 'testing1',
        text: 'testing1'
      }, {
        id: 'testing 1,2,3',
        text: 'testing 1,2,3gffffff'
      }],
      tokenSeparators: ['|']
    })
    $('.select2-container').click(function() {
      $(this).css('width','500px');
      $('.select2-dropdown.select2-dropdown--below').attr('style', 'width: 500px !important');
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />

<select></select>

$(function() {
  $('select')
    .select2({
      placeholder: 'Search Command...',
      width: '200',
      multiple: false,
      data: [{
        id: '',
        text: ''
      }, {
        id: 'testing1',
        text: 'testing1'
      }, {
        id: 'testing 1,2,3',
        text: 'testing 1,2,3gffffff'
      }],
      tokenSeparators: ['|']
    })
    .on('select2:open', function() {
      $('.select2-container').css('width','600px');
    });   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />

<select></select>

Comments

No Comments Right Now !

Boards Message :

You Must Login Or Sign Up to Add Your Comments .

Share :

Tags :

Onclick change width of dropdown using JavaScript , Javascript change width of div onclick , javascript dropdown onclick change element attribute , Javascript onclick to clear dropdown fields works only once per dropdown field , javascript onclick ,

Javascript change width of div onclick

Tag : javascript , By : Dean

Date : March 29 2020, 07:55 AM

hope this fix your issue getElementsByClassName returns an array of dom elements, it is not a single instance. You must loop over the array and style each element.
Have a look at the updated fiddle.

for( var i = 0; i < days.length; i++ ){
    days[i].style.width = "73px";        
}

Javascript onclick to clear dropdown fields works only once per dropdown field

Tag : javascript , By : SachinJadhav

Date : March 29 2020, 07:55 AM

I think the issue was by ths following , I can't say why the onclick action wasn't firing a second time on each dropdown, but based a few responses, I removed "javascript:" from the event and I was able to change the use of "onclick" to "onchange", which made the clearing of the dropdown boxes work as expected. So my new code is as follows:

<select name="search_month" onchange="$('#categories').val(null);" id="months">
  <option value="">----------------</option>
  ...                                                               
</select>
<select name="search_category" onchange="$('#months').val(null);" id="categories">
  <option value="">----------------</option>
  ...                                                               
</select>

JavaScript/SASS: How to override default width of Google Maps API v3 Autocomplete dropdown based on width of input field

Tag : javascript , By : Lee KW

Date : March 29 2020, 07:55 AM

I wish this helpful for you I have an issue where the autocomplete dropdown (div with class "pac-container") is always 4 pixels short of being aligned with the right side of the input field. Like below: , Try changing the box-sizing to on pac-container to content-box

.pac-container {
  box-sizing: content-box;
  padding-right: 4px;
}

dropdown onclick on button not able to change the height

Tag : javascript , By : AnToni00

Date : March 29 2020, 07:55 AM

around this issue I checked your code. Apparently, it's ok. Change Padding instead. Try:
padding: 5px 10px; //first-one(5px) for top and bottom; // Second-one(10px) for left and right. Let me know if it works, Good luck.