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.
Currently, I am facing a slight issue. My goal is to only run the code when the input characters are numbers. This is the snippet of code I have been working with: $(".jq-sales, .jq-variablecosts, .jq-fixedcosts, .jq-additional-sales, .jq-sales-units, .j ...
What is the best solution for handling element manipulation, such as on Chrome? I have a button that can be hidden or disabled. By using Chrome's elements, it is possible to change it from hidden/disabled to visible/enabled, triggering my click functi ...
Within a div, there is a body element structured like this: <div id = "TextBox1"> <iframe id = "TextBox1_1"> #document <html> <head></head> <body></body> </html> </iframe> </div> I have attempte ...
When creating an ecommerce website using Wordpress, I utilized Python for scraping data from other websites to compare prices and bulk upload products through a CSV file. My next goal is to learn Vue and transform the website into a PWA as it will be esse ...
Can someone assist me in using preg_replace for the following scenario: <p style="background:white"> <span style="font-size:10.0pt;font-family:"Trebuchet MS","sans-serif""> Coût de la prestation : 43.19 . ...
I have created several HTML files. On the main page, I simply inserted some code like this: <a href="new.html> <img src="img/button" id="buttonid"> </a> When I click the button, it takes me to the new.html page. I would like ...
Here's a simple case to reproduce the issue: <div style="display: inline-block; position: relative; border: 1px solid black;"> short <div style="display: flex; position: absolute; border: 1px solid black; top: 100%; lef ...
On my wordpress website, I encountered a strange issue with some photos. Specifically, an image of a cross in a circle is getting a weird border around it, but only on certain resolutions (such as width:1506). Despite inspecting the element, I couldn' ...
I have been working on customizing my menu by using the unicode character \25C6 to represent a black solid diamond as a spacer between labels. After searching for solutions on Stack Overflow, I attempted to implement the suggested method using the bef ...
After researching various solutions, I came across a method to change the font color of all disabled fields by using the following code snippet: input[disabled=disabled] { /* your style */ color: #fff !important; } However, I have multiple disabled fie ...
My images are displayed in a horizontal line, but some have different sizes. I want to center all the images within their container div for a better look. Is there a way to do this automatically with CSS so that the images remain centered regardless of siz ...
In my search.html file, I have set up a form where users can input their search criteria and click the search button to find information within a database of 1000 records. The HTML part is complete, but I am unsure how to create the action link for the for ...
I am utilizing a vuetify autocomplete component to showcase a list of names for users to select from. In the case where a user enters a name not on the list, I want to ensure that value is still accepted. Check out my code snippet below: <v-autocomplete ...
While working on a page in Chrome, I encountered an issue where I wanted a modal to show up when a user clicked on an image. However, the functionality was not working as expected on my localhost. Upon further inspection, I believe there might be a problem ...
I'm currently working on a CSS design that involves positioning an image within a span tag. Here's the CSS code I have: .dc-mega-icon { background-image: url(...); display: inline-block; position: absolute; top: 18px; width: ...
Struggling to locate the source of the margin-top when utilizing the affix plugin on my Navbar. You can view [my website here] for better understanding. Should I be implementing Javascript to solve this issue? My current skills in that area are not very ...
Before I start writing the code myself, I am searching to see if there is already a solution available or if someone has previously outsourced the code. Below is an example of my date selection: I want to create a feature where selecting a month will aut ...
I am experiencing a display issue on Android and iPhone due to conflicting css commands. Here's what's happening: I am using React + React Leaflet with a header, main, and footer all set to width 100% within a parent div with body set to width an ...
After spending some time searching, I am unable to find a satisfactory solution to my issue. I have a "finance" tracker that includes hidden divs which are displayed using jQuery when the corresponding button is clicked. Additionally, I have an Asset Track ...
I am facing an issue with fitting an image inside a div container. Here is my code structure: <div style="background-color: red; height: 200px; width: 200px;"> <ion-img src="{{kategori[i].img}}"></ion-img> & ...