How to make scale text-fields and slider-bars when resizing a window (HTML/JADE/CSS)

Question

I currently have a div called controPanelChamber that has a few other divs nested inside of it to look like the following (when in fullscreen): which is great. The code is as follows

div#controlPanelChamber
    h2(id="control_panel_header") Control Panel
    div#label_control_panel
        label(id="panel_label") Max Retry (1 - 5)
        label(id="panel_label") Scan Frequency Seconds (1 - 30)
        label(id="panel_label") Max Sleep Time (0 - 10)
        label(id="panel_label") Max RSSI Change ( 1 - 100)
        label(id="panel_label") Max RSSI History Length (1 - 20)
        label(id="panel_label") RSSI Coefficient (0 - 2)
        label(id="panel_label") Scans Per Report (1 - 20)
    div#text_control_panel
        input.maxRetryInput(id="textfield", type='text', value='#{max_retry}')
        input.scanFrequencyInput(id="textfield", type='text', value='#{scan_freq}')
        input.maxSleepInput(id="textfield", type='text', value='#{max_sleep}')
        input.maxRSSIChangeInput(id="textfield", type='text', value='#{max_rssiC}')
        input.maxRSSIHistoryInput(id="textfield", type='text', value='#{max_rssiH}')
        input.RSSICoefficientInput(id="textfield", type='text', value='#{rssi}')
        input.scansPerReportInput(id="textfield", type='text', value='#{scan_per}')
    div#slider_control_panel
        input.maxRetry(id="sliders", type='range', min='1', max='5', steps='1')
        input.scanFrequency(id="sliders", type='range', min='1', max='30', step='1')
        input.maxSleep(id="sliders", type='range', min='0', max='10', step='1')
        input.maxRSSIChange(id="sliders", type='range', min='1', max='100', step='1')
        input.maxRSSIHistory(id="sliders", type='range', min='1', max='20', step='1')
        input.RSSICoefficient(id="sliders", type='range', min='0', max='2', step='0.001')
        input.scansPerReport(id="sliders", type='range', min='1', max='20', step='1')

This is exactly how I want it to look; however, when I resize the window, not everything scales accordingly, causing it to look something like the following if the window is small enough The CSS I have looks like this:

body {
  font: 13px "Lucida Grande", Helvetica, Arial, sans-serif;
  background-color: #E6E6E6;
  width: 100%;
}

#control_panel_header {
  color: white;
  font-size: 250%;
  width: 100%
  background-color pink;
  border-color: white;
  text-align: center;
}

#controlPanelChamber {
  border-radius: 5vw;
  width: 40vw;
  height: 25vw;
  margin-left: 29vw;
  background-color: #57C441;
  float: left;
}


#label_control_panel {
  width: 18vw;
  height: 15vw;
  margin-left: 2vw;
  margin-bottom: 2vw;
  background-color: #57C441;
  float: left;
}

#text_control_panel {
  width: 3.8vw;
  height: 15vw;
  margin-left: 2vw;
  background-color: #57C441;
  float: left;
}

#slider_control_panel {
  width: 8vw;
  height: 15vw;
  margin-left: 2vw;
  margin-bottom: 2vw;
  background-color: #57C441;
  float: left;
}

#panel_label {
  width: 16vw;
  font-size: 1vw;
  color: white;
  margin-bottom: 1vw;
  margin-top: 0.1vw;
  margin-left: 1vw;
  float: left;
}

#textfield {
  font-size: 1vw;
  width: 2.9vw;
  height: 1.25vw;
  margin-bottom: 0.6vw;
  margin-left: 0.2vw;
}

#sliders {
  margin-bottom: 1.1vw;
  margin-left: 0.3vw;
  width: 7.5vw;
  float: left;
}

I'm fairly new to front-end developing, but my understanding is that VW is used in order to make sure that size stays relative to the window, such that no matter the dimensions of the window the object with size specified in VW units stays relatively the same. I'm having trouble figuring out how to make the control panel look the way it does in the first image for all window sizes, so any help will be appreciated, thanks!

score 0 · Answer 1 · edited May 23 '17 at 12:08

So vw stands for view-width and while it helps in making your divs resize on change of window style it only adjusts depending on the width of the windows on not the height.

My suggestion would be to use vh or view-height too in some of your CSS to make it respond to height as well as width although a cleaner and more efficient way would be to use the @media css controller to change the size of the divs depending on what screen size the page is being currently viewed at.

This method might seem painful and time-consuming but will give you greater control in the future. More can be seen here.

For more details on making responsive sites, see how to make a responsive website using html/css and javascript.

How to make scale text-fields and slider-bars when resizing a window (HTML/JADE/CSS)

1 Answers1