How do I prevent a select box in a flex container from shrinking?

Question

I have some code that i'm working on. I'm using a flex container and I cant figure out how to prevent a smaller screen size from shrinking all my fields so much.

var crsdesc; //var for new window
function popup(mylink) {
  if (!window.focus) return true;
  var href;
  if (typeof(mylink) == 'string')
    href = mylink;
  else
    href = mylink.href;
  crsdesc = window.open(href, 'crsdesc', 'width=420,scrollbars=yes');
  crsdesc.creator = self;
  return false;
}

function toggleMacAddressHint(element) {
  var wired = document.getElementById('wired');
  var wireless = document.getElementById('wireless');
  if (element.options[element.selectedIndex].value == "WIRED") {
    wireless.style.display = 'none';
    wired.style.display = 'block';
  } else if (element.options[element.selectedIndex].value == "WIRELESS") {
    wired.style.display = 'none';
    wireless.style.display = 'block';
  } else {
    wireless.style.display = 'none';
    wired.style.display = 'none';
  }
}

function DropDownChanged(theDropDown) {
  var theTextBox = theDropDown.form.elements["device_other"];
  if (theTextBox) {
    theTextBox.style.display = (theDropDown.value == "") ? "" : "none";
    if (theDropDown.value == "")
      theTextBox.focus();
  }
}

function checkvalue(theDropDown) {
  if (theDropDown.value === "others")
    document.getElementById('device_other').style.display = 'block';
  else
    document.getElementsByName('device_other').style.display = (theDropDown.value == "") ? "" : "none";
}

function showfield(name) {
  if (name == 'Other') document.getElementById('div1').innerHTML = '<input type="text" name="other" />';
  else document.getElementById('div1').innerHTML = '';
}

function FormSubmit(theForm) {
  var theDevice = theForm.elements["device"];
  var theDropDown = theForm.elements["device_select"];
  var theTextBox = theForm.elements["device_other"];
  if (theDevice && theDropDown && theTextBox)
    theDevice.value = (theDropDown.value == "") ? theTextBox.value : theDropDown.value;
}

body {
  font-family: Futura, arial, sans-serif;
}
.boxed {
  border: 3px solid #FDB913
}
.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  text-align: center;
}
.flex-container > * {
  padding: 15px;
  -webkit-flex: 1 100%;
  flex: 1 100%;
}
.article {
  text-align: left;
}
header {
  background: #591f00;
  color: white;
}
footer {
  background: #591f00;
  color: white;
}
.nav {
  background: #eee;
}
.nav ul {
  list-style-type: none;
  padding: 0;
}
.nav ul a {
  text-decoration: none;
}
@media all and (min-width: 768px) {
  .nav {
    text-align: left;
    -webkit-flex: 1 auto;
    flex: 1 auto;
    -webkit-order: 1;
    order: 1;
  }
  .article {
    -webkit-flex: 5 0px;
    flex: 5 0px;
    -webkit-order: 2;
    order: 2;
  }
  footer {
    -webkit-order: 3;
    order: 3;
  }
}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>MY TITLE</title>
</head>
<body>
  <div class="flex-container">
    <header>
      <img src="./Assets/STACKED_WHITE.png" alt="logo" height="104" width="282"></img>
    </header>
    <article class="article">
      <h1>Device Registration</h1>
      <p>
        Register your game consoles or other devices on the Residential Network (ResNet).
        <br></br>
        <div class="boxed" style="padding: 10px ">
          <strong> You </strong> are responsible for the network activity of each and every device you register through ResNet. Please keep this in mind when you register devices.
        </div>
        <br></br>
        <div>
          Username: [this is a test name, input the actual code to make this work right]
        </div>
        <div>
          <div style="font-size:20px">Network type:</div>
          <select name="networkType" class="flex-container" onchange="toggleMacAddressHint(this);">
            <option value="none">Choose Network Type</option>&gt;
            <option value="none" disabled="">------------------------------</option>
            <option value="WIRED">Wired Network</option>
            <option value="WIRELESS">Wireless Network</option>
          </select>
        </div>
        <div>Mac address:
          <input type="text" name="mac" value="xx:xx:xx:xx:xx:xx" onblur="if (this.value == &#39;&#39;) {this.value =&#39;xx:xx:xx:xx:xx:xx&#39;;}" onfocus="if (this.value == &#39;xx:xx:xx:xx:xx:xx&#39;) {this.value = &#39;&#39;;}">
          <div id="wireless" style="display: none;">
            NOTE: Wireless MAC addresses may be called WLAN MAC Address.
          </div>
          <div id="wired" style="display: none;">
            NOTE: Wired MAC Addresses may be called LAN or Ethernet MAC Address
          </div>
        </div>
        <div>Device:
          <input type="hidden" name="device">
          <select name="device_select" onchange="showfield(this.options[this.selectedIndex].value)">
            <option value="none">Choose Device</option>
            <option value="none" disabled="">------------------------------</option>
            <option value="XBox_360">Xbox 360</option>
            <option value="XBox_One">Xbox One</option>
            <option value="Nintendo_Wii">Nintendo Wii</option>
            <option value="Nintendo_Wii_U">Nintendo Wii U</option>
            <option value="Nintendo_3DS">Nintendo 3DS</option>
            <option value="Playstation_3">PlayStation 3</option>
            <option value="Playstation_4">PlayStation 4</option>
            <option value="Playstation_Vita">PlayStation Vita</option>
            <option value="Streaming_Media_Device">Streaming Multimedia Device (Smart TVs, Apple TV, Nexus Q, Roku Streaming Box, etc.)</option>
            <option value="Other">Other</option>
          </select>
          <input type="text" name="device_other" style="display: none;">
          <div></div>
          <div id="div1" style="margin-left: 59px;"></div>
        </div>
      </p>
      <p><strong>*NOTE*</strong>: Screen mirroring and Air Play will not work on my wireless network</p>
    </article>
    <footer>Copyright © my house</footer>
  </div>
</body>
</html>

I also attached some screenshots of the webpage on a simulated iphone screen.

Iphone simulated screen size

An initial setting of a flex container is `flex-shrink: 1`. This means that flex items, by default, can shrink. You can disable this feature by applying `flex-shrink: 0` to flex items. More details here: http://stackoverflow.com/a/34355447/3597276 — Michael Benjamin, Nov 02 '16 at 16:55
I tried this after seeing your comment but it still doesn't work. It still shrinks in the simulated screen size. — brandontod97, Nov 02 '16 at 18:40
Im actually viewing it on a actual iPhone screen and its not adjusting to the size of the screen at all, its still using desktop resolution. is there any way to fix this? — brandontod97, Nov 02 '16 at 18:41

score 0 · Answer 1 · 2016-11-02T18:44:41.987

0

Use

<meta name="viewport" content="width=device-width, initial-scale=1">

in your head, to scale the content for the high density displays. You may need to tweak your site again, in case this breaks other stuff.

Check out this link to know more about viewports.

edited Nov 02 '16 at 18:44

answered Nov 02 '16 at 15:31

Sorry, i meant head, not header, did you use it there? – Nov 02 '16 at 18:45

How do I prevent a select box in a flex container from shrinking?

1 Answers1