Struggling to solve this supposedly simple problem, I'm reaching out for help. I need assistance in arranging multiple inputs with corresponding labels, all stacked horizontally on a single line as shown in the image.
Struggling to solve this supposedly simple problem, I'm reaching out for help. I need assistance in arranging multiple inputs with corresponding labels, all stacked horizontally on a single line as shown in the image.
When it comes to structuring data like this, there are a variety of approaches you can take. Personally, I find that using tables works well for tabular data, but for non-tabular information, it's best to explore other options such as DIVs. Below is an example showcasing a simple table layout:
Table:
<table width="100%" cellpadding="0" callspacing="0" border="0">
<tr>
<td width="200">LABEL 1</td><td> </td> <!-- padding table cell -->
<td width="200">LABEL 2</td><td> </td>
<td width="200">LABEL 3</td><td> </td>
</tr>
</table>
Click here for an example table on JSFiddle
Using Divs requires more effort since they are inline by default, resulting in labels appearing on different lines. To achieve a similar result, you can utilize CSS properties like "display: table-cell," or explore absolute and relative positioning with CSS.
<div width="100%">
<div style="position:absolute; top:0px; width: 33%;">LABEL 1</div>
<div style="position: absolute; top:0px; left: 33%; width: 33%;">LABEL 2</div>
<div style="position: absolute; top:0px; left: 66%; width: 34%;">LABEL 3</div>
</div>
Keep in mind that these examples assume your layout spans the entire width of the page or browser window.
Typically, when you need something to "occupy the remaining space" (such as your input box), there are 3 possible solutions:
HTML
<div class="container">
<div class="field">
<label for="in1">Label</label>
<div><input type="text" id="in1"></div>
</div>
<div class="field">
<label for="in2">Label</label>
<div><input type="text" id="in2"></div>
</div>
<div class="field">
<label for="in3">Label</label>
<div><input type="text" id="in3"></div>
</div>
</div>
CSS
.container {
padding: 20px;
background: #999;
overflow: hidden; /* used for float containment */
}
.field {
padding: 4px;
background: #fff;
border: 2px solid #999;
float: left;
width: 33%;
-webkit-box-sizing: border-box; /* effectively 33% width */
-moz-box-sizing: border-box;
box-sizing: border-box;
}
label {
float: left;
width: 100px; /* fixed label width */
}
.field div {
overflow: hidden; /* establish a new Block Formatting Context */
}
/* inputs fill the new BFC */
input {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Only one layout element was added, which wraps around the input. This is necessary because input doesn't naturally behave like a block element, as discussed here.
See fiddle: http://jsfiddle.net/RqzJC/
UPDATE: Revised to accommodate fixed width labels of 100px.
http://jsfiddle.net/UniqueUser123/Y8TbN/
HTML:
<div>
<div>
<div class="label">LABEL</div>
<div>content</div>
</div>
<div>
<div class="label">LABEL</div>
<div>content</div>
</div>
<div>
<div class="label">LABEL</div>
<div>content</div>
</div>
</div>
CSS:
div { width: 100%; }
div div {
width: 33%;
background-color: lightblue;
float: left;
position: relative
}
div div div {
background-color: lightcoral;
position: relative;
z-index: 2
}
div div div:last-child {
background-color: tomato;
position: absolute;
width: 100%;
z-index: 1
}
.label { width: 100px }
If you're looking for a classic "GUI widget layout engine" layout, the most optimal choice would be utilizing the CSS 3 feature known as flexbox. However, it's important to note that browser support for this feature is not consistently reliable at this time.
In cases where flexbox isn't feasible, achieving flexible "fill space" layouts often involves using table layout techniques. With the help of CSS and the display property, there's no requirement to structure the layout using traditional HTML tables. Below is an example similar to the layout depicted in your provided image:
<html><head>
<title>example</title>
<style type="text/css">
ul.myform { display: table; width: 100%; margin: 0; padding: 0; border-collapse: collapse; }
.myform li { display: table-cell; border: .1em solid gray; }
.myform li > * { display: table; width: auto; margin: .4em; }
.myform label { display: table-cell; width: 1%; padding-right: .4em; white-space: nowrap; }
.myform input { display: table-cell; width: 100%; }
.col1 { width: 33%; }
.col2 { width: 33%; }
.col3 { width: 34%; }
</style>
</head><body>
<form>
<ul class="myform">
<li class="col1"><span><label for="a">Label</label> <input id="a" name="a"></span></li>
<li class="col2"><span><label for="b">Label</label> <input id="b" name="c"></span></li>
<li class="col3"><span><label for="c">Label a bit longer</label> <input id="c" name="c"></span></li>
</ul>
</form>
</body></html>Within the markup, only one element is added purely for layout purposes: the <span> acts as the inner table within the table-cell.
The usage of width: 1%; on the label cell is not about setting an actual dimension but rather to minimize its width as much as possible (using an absolute value instead of a percentage won't achieve the same result). Additionally, white-space: nowrap; prevents the label from wrapping due to this constraint.
The classes like .col1 are assigned for defining specific column widths.
function show1() { console.log("ok1"); document.getElementById("a2").removeEventListener("click", delegate); } function show2() { console.log("ok2"); } function show3() { console.log("ok3"); } function delegate(event) { var flag = event.target ...
The issue arises when combining the desktop and mobile versions of the clock script. The first clock works fine on its own, but upon duplicating another set of scripts for the second clock, it encounters display problems. I have appropriately labeled the c ...
I am utilizing Google to create a QR code using a random number. Once the number is generated, it is saved as a variable. My intention is to incorporate this variable within an image link in an email. Below is an example of how I want to achieve this: Th ...
I ran into an issue with a previous question I posted, you can find it here Due to some formatting errors because it was my first time posting a question, the original question is currently closed. I have made edits and resubmitted it for reopening, but I ...
Consider this scenario: In a folder labeled /jscript, there are two files named my_js_file1.js and my_js_file2.js. I also have an /index.html page structured like this: <html> <head> <script type='text/javascript' sr ...
I am facing difficulty in designing a layout with two panels where the left panel has relative positioning and the right panel becomes fixed only after a specific scroll point. Additionally, I need the height of the right panel to adjust when the page scro ...
Seeking advice on how to position my pop-up at the top of the page and resize it to better fit the screen. Here is where you can find my landing page: yogavoga.com/2weekdiet Grateful for any assistance provided. .modal-content { margin: 5px auto; bac ...
Previously, some had difficulty understanding my question. I have an array of variables representing the ids of 5 divs. My goal is to change the color of each div sequentially for a brief moment before reverting back, mimicking the behavior of traffic ligh ...
I'm attempting to organize tables in a nested manner, instead of placing a table within each cell. My engineers have advised against simply styling the table to appear nested, and suggested that it would be more effective to wrap each header around th ...
So, I encountered a problem that involved parsing a URL to extract the hostname and pathname, then comparing the extracted pathname with a string. If you need help with this issue, check out this post: How do I parse a URL into hostname and path in javasc ...
Currently, I am attempting to implement a scrolling text box on a front-end page that will display the content from a text file named "msg.txt". <div class="scroll-slow"> <?php echo file_get_contents('../msg.txt'); ?> </div> ...
Here are some validation messages: <form name="dnaform" novalidate> <div style="padding-bottom:5px" ng-show="dnaform.uEmail.$pristine || dnaform.uEmail.$valid">Active directory account </div> <div style="padding-bottom:5px;" n ...
Is there a way to delay loading my modal HTML codes until after the user clicks a button, rather than having them load automatically with the template? HTML <!-- Template Codes--> <button data-toggle="modal" data-target="#modal-content" type="bu ...
Recently, I've been immersed in a web development project for a company. For the navigation bar, I opted to use the FlexNav JQuery plugin. While referencing the example on , I encountered an issue when attempting to add more than 5 list elements; they ...
These Sprite buttons are making me lose my mind. I'm so close to getting them to work, but not quite there yet. I've been playing around with this really simple sprite image: If you want to see the jsfiddle project, it's available here, bu ...
Is there a way to disable the default drag functionality of an input range element without affecting the click feature? Users should be able to change values by clicking instead of dragging. <input type="range" min="0" max=& ...
Hey there! I've been experimenting with the Smooth Div Scroll plugin which you can find on their website here: The implementation is pretty simple. I'm using the touch example, but with a twist - instead of images, I am using Divs to scroll thro ...
For my research project, I am exploring the possibilities of .epub files and experimenting with embedding JavaScript code to display data visualizations. I am currently using calibre to convert an HTML file containing D3 scatterplots into an .epub. The s ...
I've been attempting to implement functionality with bootstrap 4 cards, but I'm running into issues where the card size expands based on the length of the text. Below is my code: <div class="row row-container"> <div class=& ...
A friend of mine created a web page to help me learn some JavaScript. He designed a feature where the content in each div becomes visible as soon as the user scrolls past it. However, I noticed that the content appears too late for my liking. I would like ...