How do I resize my inputs depending on the screen size (chosen by the user in the popup)
Question
const sheets = document.getElementById('sheets'); const siteDocument = document.getElementsByTagName('body')[0]; const amountOfColumns = 2; const amountOfRows = undefined; for (var i = 0; i < amountOfColumns; i++) { const myNewElement = document.createElement('input'); myNewElement.width = siteDocument sheets.appendChild(myNewElement) } for (var x = 0; x < amountOfRows; x++) { }
#titletext { font-size: 5vh; }
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="popup"></div> <h1 id="titletext">Excel Sheets</h1> <div id="buttons"></div> <div id="sheets"></div> <script src="script.js"></script> </body> </html>
My questions:
How do I get it so the width the element created depends on the width of the screen your using (the user chooses amount of inputs rows and columns), I want to make it responsive and in case there is a bunch of inputs I want to make it so it fits on the screen without having to use the scroll bar (because it's a big pain and I want to code something actually good...)
(You don't have to answer this question) Is vh (view-height) good for responsive web design?
UPDATE:
I want an equation that let's me have ALL the columns and rows on the screen, if I had say 10 columns it should all be on the screen (NOTE: The reason an equation is needed is because I want the columns and rows to be choosen by the user(Is this a bad approach? I'm not sure how I would do it without that)
1 answers
solution1
1 ACCPTED 2020-12-31 00:17:04
You can do something with a grid and assign a repeat value of 1fr for the number of columns the user inputs for gridTemplateColumns . and just set a min-width and min-height in CSS for the input to something small like 1px and it will be responsive. Take a look at this. You can change the number of columns and rows you have in the js code and run it and see how it auto populates and it all fits. I also did some calc math for the height of your cells based on the number of rows as well. This should fit a fairly large and reasonable amount of inputs onto any sized screen before a scrollbar appears. here's the fiddle to play around with: https://jsfiddle.net/uypm84e7/
const sheets = document.getElementById('sheets'); const siteDocument = document.getElementsByTagName('body')[0]; const amountOfColumns = 5; const amountOfRows = 20; for (var x = 0; x < amountOfRows; x++) { for (var i = 0; i < amountOfColumns; i++) { const myNewElement = document.createElement('input'); myNewElement.width = siteDocument sheets.appendChild(myNewElement) document.getElementById("sheets").style.gridTemplateColumns = "repeat(" + amountOfColumns +", 1fr)"; } } var inputs = document.getElementsByTagName("input"); for (var z = 0; z < inputs.length; z++) { inputs[z].style.height = "calc((50vh/" +amountOfRows +") - 3px)"; //inputs[z].style.maxHeight = "calc((80vh/20) - 100px)"; }
#titletext { font-size: 5vh; } #sheets { display: grid; } input { min-width: 0px; min-height: 0px; }
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="popup"></div> <h1 id="titletext">Excel Sheets</h1> <div id="buttons"></div> <div id="sheets"></div> <script src="script.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.