1

I have built a webpage using Bootstrap. Currently, I have a few <select> elements with size=6 in a col-md-3 on the left and some other stuff in a col-md-9 on the right.

If one shrinks the size of the window, eventually the right column collapses underneath the left column (becoming rows instead of columns).

When this happens, I would like to decrease the <select> size (changing it to size=3). I'd like the reverse to happen as well (when the window is re-expanded into columns, the <select> elements return to size=6).

I would like to do a similar thing for another element (height instead of size), but I figure that if I can figure out size, I can figure out height.

How do I change an attribute when bootstrap shifts like that?

This is a simplified snippet from the code. I am using Bootstrap 3.

<div class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                    <div id="flight-selection-div" class="panel-group">
                        <div class="panel panel-primary flight-panel">
                            <div class="panel-heading flight-panel">
                                <h4 class="panel-title">Flights</h4>
                            </div>
                            <div class="panel-body">
                                <select size=6 class="form-control" id="flight-select" name="flight">
                                    <option value=null disabled>Select a flight here</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="panel-group">
                        <div class="panel panel-primary map-panel">
                            <div class="panel-heading map-panel">
                                <h4 class="panel-title">Map</h4>
                            </div>
                            <div class="panel-body">
                                <div id="map"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-9">
                    <img src="fisher2.png" class="img-responsive" id="img-ele" alt="Your data will appear here">
                </div>
            </div>
        </div>
Canuto-C
  • 391
  • 2
  • 7
  • 17
cdpautsch
  • 1,769
  • 3
  • 13
  • 24

2 Answers2

1

I would recommend using jQuery for this (which you must be using already if you are using Bootstrap). I got this piece of code from here and modified it some to give you a sense of what you can do:

$(window).resize(function() {
    if (window.innerWidth < 480) {

        $('#flight-select').replaceWith('<select size=3 class="form-control" id="flight-select" name="flight">');

     } else{

       $('#flight-select').replaceWith('<select size=6 class="form-control" id="flight-select" name="flight">');    

     }
        }).resize();
Jack Moody
  • 1,590
  • 3
  • 21
  • 38
  • Aha! Thank you. I was never sure what the breakpoint was for Bootstrap shifting its columns into rows. I assume that I could also use `$('#flight-select').prop('size','3')`? – cdpautsch Aug 24 '17 at 16:33
  • Yep. That seems like it would work as well according to jQuery documentation on .prop(). – Jack Moody Aug 25 '17 at 00:18
0

Do you need specifically to use the size attribute? Why don't you style your select width based on CSS width and media queries?

You can use the same media queries that bootstrap framework uses and set a width to your select according to the screen size you want:

See this answer: https://stackoverflow.com/a/30542215/8419161

André Franciscato Paggi
  • 46
  • 4
  • The `size` attribute determines the height , not the width. I am not dead set on using `size`, but it was the only way I was aware of to show multiple options at once in a ` – cdpautsch Aug 24 '17 at 16:31