logo
down
shadow

Onclick change width of dropdown using JavaScript


Onclick change width of dropdown using JavaScript

Content Index :

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 : facebook icon twitter icon

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;
}

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.

javascript dropdown onclick change element attribute


Tag : javascript , By : HokieGeek
Date : March 29 2020, 07:55 AM
Related Posts Related QUESTIONS :
  • Why Named Function Expression itself cannot assign Name to another Value?
  • How to reset scroll position on single page pagination
  • How to scroll to bottom of page, when a new message is sent - Socket.io
  • How to reconstruct audio blob from a base64 encoded String?
  • How to calculate numbers within an array of objects
  • Using JavaScript to change CSS properties of SVG circles for all circles that was not clicked
  • Is there value in propTypeing repeat required properties at every level of nested components?
  • Call function if variable does not exist in a filter
  • localStorage value doesn't get updated automatically
  • React not updating state with setState correctly inside promises
  • Direct native JavaScript or jQuery method to get containing block of an element
  • Dynamic JSON object to Html Table
  • How to send Id and file to same controller?
  • How to Make a jQuery Table Cell(td) clickable to Run a Function?
  • Prevent the duplicate function onchange event jQuery
  • Reactjs Input Upload doesn't return local URL
  • An unexpected 'StartObject' node was found when reading from the JSON reader. A 'PrimitiveValue' node was expected
  • How to filter a JSON Array, with an eventListener input value at keyup
  • How to separate the different properties of filter in css?
  • Why dont work change event of bootstrap input spinner?
  • How to hide overflow text content in react
  • Is there another way to write line 6
  • Cypress - how to find by text content?
  • How to setstate for the dynamic checkboxes in a loop in react?
  • Is display:none safe?
  • How to create a form to change part of a href url of a button?
  • Put many function inside function in Javascript
  • how to exit from loop after a ajax call
  • Do Angular Reactive Form Validator.min/max check Perform Type Conversions before checking the value?
  • How to Replace Text Within Script Tags Using JQuery
  • add variable to object if not undefined using short-hand
  • How can I effectively curve my items inside a list?
  • Add new record Keyboard Shortcut on Kendo Grid Mvc
  • Time and Date running on page
  • Looping through page links puppeteer doesn't return values from the newly loaded page
  • Problem with Navigator.geoLocation.getCurrentPosition not working
  • Trying to change the id of an element with Javascript
  • Embedded Schema Inserting Blank in Meteor using Collection2
  • avoid useEffect to render at first load?
  • Why is this CSS transition only working correctly on the some clicks? How to solve it?
  • Interpolated values does not reflect the latest values in an Angular app
  • Javascript classes define attribute in constructor or outside the class
  • How to block scroll event passing through to iframe until iframe is active?
  • What is the purpose of "constructor" method in javascript?
  • Stencil JS not working with non-default imports
  • Are frameworks misleadingly named for marketing purposes?
  • React <Redirect> after transition not working
  • How to send multiple parameters in a function using EJS
  • React conditional style on custom click
  • Push a block of information to an array X times based on an external variable
  • How do I populate dropdown with names, and values (numeric ids)?
  • How to apply styling to elements created with .insertAdjacentHtml method
  • Positioning key:value of an object
  • Referencing DOM Elements with React Hooks
  • TypeError: Method "getRange" of null when using multiple scripts (Libraries) in Google scripts
  • Why can't I check if an environment variable is undefined?
  • Is there a way to find what parts are the same between two strings?
  • Every change done with magicscroll and greensock get reset when I hit the bottom of the page
  • Fix a 'Cannot read property handleClick of undefined error' (and issues related to deleting an item from the DOM)
  • Answer to message if sent within a period of time
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com