Working on creating a flexbox form where labels and inputs are on the same line. Have successfully achieved the desired layout using flex properties like flex-basis.
However, encountered an issue when trying to nest the flexbox within an element with a fixed width, causing the layout to break.
For reference, please check the provided fiddle and observe the outcome with and without the div {width:30%}
Seeking advice on potential solutions to overcome this challenge.
You're attempting to mimic a grid or table layout using flexbox, which isn't ideal for that purpose. To achieve the desired result without setting a min-width, consider utilizing a different display type.
Given the lack of robust browser support for CSS Grid, the next best option is CSS Table.
div.lesswide {
width: 30%;
margin-top: 20px;
}
form {
display: table;
width: 100%;
}
form div {
display: table-row;
}
form label {
display: table-cell;
width: 30%;
}
form input {
display: table-cell;
width: 60%;
}<div>
<form>
<div>
<label>A</label>
<input type="text">
</div>
<div>
<label>LONG</label>
<input type="text">
</div>
<div>
<label>SOMEWHAT LONGER</label>
<input type="text">
</div>
<div>
<label>INTHEMIDDLE</label>
<input type="text">
</div>
</form>
</div>
<div class="lesswide">
<form>
<div>
<label>A</label>
<input type="text">
</div>
<div>
<label>LONG</label>
<input type="text">
</div>
<div>
<label>SOMEWHAT LONGER</label>
<input type="text">
</div>
<div>
<label>INTHEMIDDLE</label>
<input type="text">
</div>
</form>
</div>Updated version based on feedback
form {
display: table;
width: 100%;
}
form > div {
display: table-row;
}
form label {
display: table-cell;
width: 30%;
}
form input {
width: 100%;
box-sizing: border-box;
}
form div div:first-child {
display: table-cell;
width: 30%;
}
form div div:last-child {
display: table-cell;
width: 70%;
}
form div .side-by-side input[type=button] {
width: 30%;
}
form div .side-by-side input[type=submit] {
width: 70%;
}
@media screen and (max-width: 550px) {
form div div:first-child,
form div div:last-child,
form label {
display: block;
width: auto;
}
}<div>
<form>
<div>
<label>A</label>
<div>
<input type="text">
</div>
</div>
<div>
<label>LONG</label>
<div>
<input type="text">
</div>
</div>
<div>
<label>SOMEWHAT LONGER</label>
<div>
<input type="text">
</div>
</div>
<div>
<label>INTHEMIDDLE</label>
<div>
<input type="text">
</div>
</div>
<div>
<div>
<input type="button" value="Button">
</div>
<div>
<input type="submit">
</div>
</div>
</form>
</div>
<br>
<div>
<form>
<div>
<label>A</label>
<div>
<input type="text">
</div>
</div>
<div>
<label>LONG</label>
<div>
<input type="text">
</div>
</div>
<div>
<label>SOMEWHAT LONGER</label>
<div>
<input type="text">
</div>
</div>
<div>
<label>INTHEMIDDLE</label>
<div>
<input type="text">
</div>
</div>
<div>
<div>
</div>
<div class="side-by-side">
<input type="button" value="Button"><input type="submit">
</div>
</div>
</form>
</div>In order to make the form div expand to fill up the entire width, you can include the CSS rule width:100%;
For a demonstration, you can check out this example on JSFiddle: https://jsfiddle.net/fjqjrs9j/1/
Experience the power of a versatile flexbox Form
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,800");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: "Open Sans", helvetica, sans-serif;
font-size: 24px;
color: rgba(0, 0, 0, 0.5);
}
body {
background: #f9f9f9;
}
main {
position: relative;
width: 100%;
}
h1 {
padding: 20px 0 0;
font-weight: 600;
font-size: 4rem;
}
h1,
h5 {
text-align: center;
}
h5 {
margin: 0 0 20px;
}
.ruler {
position: relative;
display: block;
left: 50%;
margin: 0 0 30px -320px;
width: 640px;
height: 6px;
line-height: -20px;
background: rgba(0, 0, 0, 0.1);
}
.ruler span {
display: block;
position: absolute;
padding: 8px;
width: 80px;
top: -22px;
left: 280px;
text-align: center;
background: #efefef;
}
textarea,
input {
display: inline-block;
font-family: "Open Sans", helvetica, sans-serif;
margin: 10px;
padding: 10px;
background: rgba(255, 255, 255, 0.8);
border: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 4px;
font-size: 1rem;
font-weight: 300;
color: #454545;
}
textarea:focus,
input:focus {
outline: 0;
}
textarea {
height: 300px;
}
.flexy-parent {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 800px;
margin: 0 auto;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: start;
align-content: flex-start;
}
.flexy-item {
-webkit-box-flex: 1;
-ms-flex: 1 0 300px;
flex: 1 0 300px;
}<main>
<h1>Flex Form</h1>
<h5>SIZE WINDOW</h5>
<div class="ruler"><span>640px</span></div>
<section class="flexy-parent">
<input class="flexy-item" type="text" placeholder="Responsive input fields...">
<input class="flexy-item" type="text" placeholder="will break at 640px...">
</section>
<section class="flexy-parent">
<input class="flexy-item" type="text" placeholder="flex-grow: 1">
<input class="flexy-item" type="text" placeholder="flex-basis: 300px">
</section>
<section class="flexy-parent">
<textarea class="flexy-item" placeholder="And thanks to flexbox, everything stays nice and tidy."></textarea>
</section>
</main>Currently, the code in my form looks like this: <form action="https://www.paypal.com/cgi-bin/webscr" target="_BLANK" method="post"> <input type="hidden" name="cmd" value="_xclick"> <input type="hidden" name="business" value="paypal@ ...
I'm working on a dropdown menu that is populated with items using a foreach statement. When an item is selected, I need another dropdown menu to appear where specific items can be specified. First Dropdown - Categories (Completed) When a Category is ...
I have a jQuery function that looks like the one below. The result is displayed in a span, but when the page is reloaded, this span briefly disappears and then reappears. Is there a way to prevent this from happening? I need it to stay visible at all tim ...
Hey there, I'm curious about using Jquery Ajax to retrieve a numeric value from a website. Any suggestions on where I should begin? Any advice would be greatly appreciated. Thanks in advance! Best regards, SWIFT ...
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>PHP links</title> <?php echo '<div style="background-color:#ccc; padding:20px">' . $_POST['message'] . '</div>'; ...
It seems that finding this is proving more difficult than anticipated, even though it's such a simple concept... Is there an equivalent function in JavaScript to PHP's htmlspecialchars? While it's possible to create your own implementation, ...
<form name="vesselForm" novalidate> <input type="text" id="owner" name="ownerEdit" required ng-blur="vesselForm.btnCC.attr('value', 'Change Customer')"/> <input type="button" name="btnCC" value="Customer" /> </fo ...
My challenge involves analyzing an HTML document in string form to locate a specific keyword and identify the tag in which it appears. For instance, if my document looks like this: $string = "<html> <head> <title> ...
Currently, I am in the process of developing a rails application and my aim is to incorporate a button that executes a javascript onclick function. The code snippet I am using for this purpose is: <%= button_tag "Action" type: "button", onclick: "test( ...
I am faced with an SVG containing numerous paths like the following: <svg version="1.1" id="svg2" inkscape:version="0.91 r13725" sodipodi:docname="drawing.svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://w ...
I've implemented a custom walker in my Wordpress site: class Custom_Walker_Nav_Menu extends Walker_Nav_Menu { function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) { if ( $depth ) $indent = str_repeat("& ...
My goal is to create a chat app using Vuejs 3 and Vuetify 3, but I'm encountering an issue aligning the chatbox with the v-card component. Instead of being positioned at the bottom of the v-card, the chatbox (green) appears at the bottom of the page. ...
In my development process, I am working on a basic plugin using the Wordpress Plugin Boilerplate. I have implemented AJAX to create an action triggered by a button press to remove an item from a custom database table I have set up. The AJAX function, butto ...
I have a query regarding my coding problem. I am trying to create two pop-ups that occupy half of each screen. As I am new to JavaScript and jQuery, I want to ensure that I am doing it correctly. Is there a way for the left side to slide out from the left ...
I recently undertook a project at work that involved displaying multiple PDF thumbnails/images on a webpage. These files were dynamically loaded from a directory on my system. Each thumbnail corresponded to a PDF file stored in a different directory. My g ...
Seeking assistance with ajax and HTML forms. I'm currently utilizing PARSLEY validation () for validation rules. However, I am encountering a challenge where the validation does not integrate database validations. For example, I need to verify if the ...
Is there a way to have an HTML button trigger one of two functions randomly on click event? I’m utilizing PHP on the server side and jQuery on the client side. I've tried using the following code but nothing happens when I click the button image... ...
Is there a way to reset the input field in this specific scenario? const [username, setUsername] = useState({ username: "", usernameError: "" }); const handleUsername = (inputUsername) => { if (inputUsername.length > ...
I'm currently working on an angular project with primeng for the UI components. My focus at the moment is on customizing the p-menu component, specifically the appearance of list items that are not active. The challenge I'm facing is that the act ...
I've been attempting to extract a value from an input tag, but all I keep getting is an empty string. Upon inspecting the frame source, it appears as follows: <input type="hidden" name="" class="code_item" value="00-00000159" /> In order to re ...