Change the size upon changing the browser automatically-CodePudding

Good Day I'm new with Jquery language, can anyone help me with my problem. Right now, it needs to refresh the page in order to apply the change of size but I want to change the size value of the select option when the browser resize automatically without refreshing the page.

<select data-drupal-selector="edit-keyword" multiple="multiple" name="keyword[]" id="edit-keyword" class="form-select"
            onchange="if(this.value != 0) { this.form.submit(); }" size="10" style="height: 100%;">
            <option class="filter-item br-8 f-14-med" value="211">AI</option>
            <option class="filter-item br-8 f-14-med" value="176">Carbon Capture</option>
            <option class="filter-item br-8 f-14-med" value="186">Clean energy</option>
            <option class="filter-item br-8 f-14-med" value="196">COVID-19</option>
            <option class="filter-item br-8 f-14-med" value="216">Digital Twins</option>
            <option class="filter-item br-8 f-14-med" value="201">Digitization</option>
            <option class="filter-item br-8 f-14-med" value="181">Energy Mix</option>
            <option class="filter-item br-8 f-14-med" value="26">Hydrogen</option>
            <option class="filter-item br-8 f-14-med" value="206">IoT</option>
            <option class="filter-item br-8 f-14-med" value="31">Keyword 2</option>
            <option class="filter-item br-8 f-14-med" value="226">LNG</option>
            <option class="filter-item br-8 f-14-med" value="191">Oil ＆Gas</option>
            <option class="filter-item br-8 f-14-med" value="221">Power Plant</option>
        </select>

CSS:

.form-select {
  display: inline-block;
  width: 100%;
  text-align: center;
  white-space: pre-line;
  overflow-y: unset;
}

.form-select  option {
  background: white;
  display: inline-block;
  border-radius: 5px;
  border: solid;
  border-width: 1px;
  padding: 5px;
  margin: 5px;
  }

  .form-select  option:hover {
    background: lightblue;
}

.form-select select {
  text-align-last: center;
  padding-right: 29px;
  direction: rtl;
  }

Script:

$("select[multiple]").each(function() {
    if(window.matchMedia("(max-width: 767px)").matches){
        // The viewport is less than 768 pixels wide

        var size = Math.round(parseFloat((this.length/2))  parseFloat((this.length/2))/2);
    } else{
        var size = parseFloat((this.length/10).toFixed()) parseFloat((this.length/10).toFixed());
    }
    $(this).css("height","100%")
    .attr("size",size);
    });

CodePudding user response：

Take a look at resize event for jquery

This fires when the window size changes, so you could try something like this:

$(document).resize(function(){
    // Your function here
});

CodePudding user response：

You can use JQuery .resize() method. I modified your script so that it automatically call a function for options when window resize.

The code is written below:-

$(window).resize(function(){
    $("select[multiple]").each(function() {
        if(window.matchMedia("(max-width: 767px)").matches){
            // The viewport is less than 768 pixels wide
    
            var size = Math.round(parseFloat((this.length/2))  parseFloat((this.length/2))/2);
        } else{
            var size = parseFloat((this.length/10).toFixed()) parseFloat((this.length/10).toFixed());
        }
        $(this).css("height","100%")
        .attr("size",size);
    });
});