Changing style and position of created multi-select drop-down checkbox

Question

I am trying to create the front end for an web application. I already have the backend developed in python. I am new to this territory of web design/development

I have some html and javascript code which uses jQuery multiselect.css and jQuery multiselect.js to create a dropdown multiselect checklist. However I am confused with how i can change the style or position of the dropdown, as I am already using jQuery multiselect.css

I added the css and the js under the head tag

  <link href="jquery.multiselect.css" rel="stylesheet"> 

  <script src="jQuery.js"></script> 
  <script src="jQuery-MultiSelect-master/jquery.multiselect.js"></script>

And then I am creating the dropdown list in html and using jQuery to initialize it

<select id='testSelect1' multiple>
  <option value='1'>Item 1</option>
  <option value='2'>Item 2</option>
  <option value='3'>Item 3</option>
  <option value='4'>Item 4</option>
  <option value='5'>Item 5</option>
</select>

<script src="./test.js"></script>
<script>
   $('#testSelect1').multiselect({
   columns: 4,
   placeholder: 'Select Countries',
   selectAll: true
 });
</script>

This puts the multiselect on the left and makes the dropdown width as wide as the page width and height longer then needed. I am trying to modify it so that it would appear in the middle and the size of the dropdown isn't as bit and colour of the dropdown array is different

score 0 · Answer 1 · answered Nov 11 '19 at 09:49

When you are adding styles and scripts to project it should look like this

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>

    <!-- style goes here -->

  </head>
  <body>

    <!-- scripts go here -->
  </body>
</html>

Style always go on top of document, between <title></title> tags. It is recommended to put scripts just before <body> tag closes. Here you can read why

There is that..

If you want to style that dropdown firstly we need to see how does it look like right because we can't help you blindly. But you could do this

select {
 <!-- style for select goes here -->
}

select option {
 <!-- style for option goes here -->

if you want your select to be 300px wide you can add this

select {
  width: 300px;
}

Again. Post some screenshots and update the question with it if this didn't help

Changing style and position of created multi-select drop-down checkbox

1 Answers1