1

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

deblocker
  • 7,629
  • 2
  • 24
  • 59
ubi
  • 41
  • 5

2 Answers2

1

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>
deblocker
  • 7,629
  • 2
  • 24
  • 59
  • Another option: https://stackoverflow.com/questions/20851624/jqm-select-pre-render/20853755#20853755 (First part). – Omar Dec 11 '20 at 12:41
  • @Omar class native gives me another kind of box , it is smaller true but I would like the same list format. Plus how can I change the position? – ubi Dec 11 '20 at 14:56
  • @deblocker it doesn't do what I really need. The alice blue box stays the same size, and I would like it smaller. Plus how can I put this box in an other position? Or may be I am not sure how to proceed... in your example there is no class in the select widget as you told me to do – ubi Dec 11 '20 at 15:00
  • Hello @deblocker well, I know I am not an expert. – ubi Dec 29 '20 at 21:17
  • Hello @deblocker well, I would like to have this select box even smaller. and to put it in a position I want. or, I know I am not an expert, but how should I Write the code? the first 2 paragraphs are to put between or only the 2nd ?one? and inside the select widger i should write class = $(e.target).parent().addClass("my-select-class") – ubi Dec 29 '20 at 21:37
  • @ deblocker , below this is how I wrote your code – ubi Jan 03 '21 at 22:52
  • @ubi: I am sorry, can't debug incomplete code. Simply copy & paste my full working example. – deblocker Jan 04 '21 at 08:43
  • @deblocker This is what I did, copy paste... at least can you tell me if the structure I wrote below is the good way? – ubi Jan 04 '21 at 17:48
-1

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>
ubi
  • 41
  • 5