how to resize and position a list of items in Jquery Mobile 1.4

Question

how to resize and position a list of items in Jquery Mobile 1.4

196 views Asked by ubi At 11 December 2020 at 03:00

I have found in jquery mobile this code to select multiple items.

<div class="ui-field-contain" >
    <label for="select-custom-19">Multiple:</label>
    <select name="select-custom-19" id="select-custom-19" multiple="multiple" data-native-menu="false" >
        <option>Choose options</option>
        <option value="1"> 1st </option>
        <option value="2" selected="selected">2nd </option>
        <option value="3" selected="selected"> 3rd </option>
        <option value="4">4th </option>

    </select>

</div>

I have found a way to reduce the size of the list box like this :

<select data-mini="true" data-inline="true" name="select-custom-19" id="select-custom-19" multiple="multiple" data-native-menu="false" >

It's smaller but not the size I would like (I would like even smaller) - how to do it? I have tried : style="width:5%;" but it doesn't work.

Also I would like to fix this list box in a specific position. For example, when I want to place a button in a position in the screen I use this, and it works fine :

<button style="position: absolute; top:470px; left:310px;" onclick="stopMusic()" type="button"></button>

but

 <select style="position: absolute; top:470px; left:310px;" data-mini="true" data-inline="true" name="select-custom-19" id="select-custom-19" multiple="multiple" data-native-menu="false" >

doesn't work. Thank you for your help

Original Q&A

There are 2 answers

**deblocker** · Answer 1 · 2020-12-11 09:05:02

Good catch. The native select will be wrapped by the framework, but the data-wrapper-class won't work (it seems to be an open TODO which hasn't be never fully implemented for the selectmenu by the JQM team). The keypoint here is to find the parent wrapper div which has class ui-select and style that one.

You can either:

set a custom class for the container element
add a custom class after the select widget creation

Here is an example which shows both options:

$(document).on("selectmenucreate", "#select-custom-19", function(e, ui) {
  $(e.target).parent().addClass("my-select-class");
});

.my-select-container-class .ui-select {
  border: 1px solid red !important;
  width: 100px !important;
  position: absolute;
  right: 0;
}
.my-select-class.ui-select .ui-btn {
  background-color: aliceblue !important;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" />
  <script src="https://code.jquery.com/jquery-2.2.3.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.js"></script>
</head>
<body>
  <div data-role="page" id="page-one">
    <div data-role="content">
      <div class="ui-field-contain my-select-container-class">
        <label for="select-custom-19">Multiple:</label>
        <select name="select-custom-19" id="select-custom-19" data-mini="true" multiple="multiple" data-native-menu="false">
          <option>Choose options</option>
          <option value="1">The 1st Option</option>
          <option value="2" selected="selected">The 2nd Option</option>
          <option value="3" selected="selected">The 3rd Option</option>
          <option value="4">The 4th Option</option>
        </select>
      </div>
    </div>
  </div>
</body>
</html>

**ubi** · Answer 2 · 2021-01-03 22:51:05

This is how I wrote what you said, jquery mobile etc is written in the head... It's not working still have the same big box choice in the same position

  <html>
    <style>
    
    .my-select-container-class .ui-select {
      border: 1px solid red !important;
      width: 100px !important;
      position: absolute;
      right: 0;
    }
    .my-select-class.ui-select .ui-btn {
      background-color: red !important;
    }
    </style>
    
    <body>
    
    <div data-role="content">
    <div class="ui-field-contain my-select-container-class" >
        <label for="select-custom-19">Multiple:</label>
        <select   name="select-custom-19" id="select-custom-19" multiple="multiple" data-native-menu="false" >
            <option>Choose options</option>
            <option value="1">The 1st Option</option>
            <option value="2" selected="selected">The 2nd Option</option>
            <option value="3" selected="selected">The 3rd Option</option>
            <option value="4">The 4th Option</option>
    
        </select>
    
    </div> 
    </div>
   
</body> 
    </html>

TechQA.

how to resize and position a list of items in Jquery Mobile 1.4

There are 2 answers

Related Questions in JQUERY

Related Questions in JQUERY-MOBILE

Related Questions in PHONEGAP

Related Questions in JQUERY-MOBILE-SELECT

Popular Questions

Popular Tags

Trending Questions