Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fluid input elements

I got this form...

<form method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
    <fieldset>
        <legend>Who are you?</legend>
        <label for="first-name">First name</label><input type="text" name="first_name" required /><br />
        <label for="last-name">Surname</label><input type="text" name="last_name" required /><br />
        <label for="email">E-mail</label><input type="email" name="email" required /><br />
        <input type="button" name="submit1" id="submit1" value="Next" />
        <input type="button" name="clear" id="clear" value="Clear" />
    </fieldset>
</form>

With this CSS…

form {
    margin: 24px 0 0 0;
}

form legend {
    font-size: 1.125em;
    font-weight: bold;
}

form fieldset {
    margin: 0 0 32px 0;
    padding: 8px;
    border: 1px solid #ccc;
}

form label {
    float: left;
    width: 125px;
}

form label, form input {
    margin: 5px 0;
}

I'm looking for an easy way to make the input fields fluid so that the width of input elements is always relative to the width of the fieldset element. In other words, the width of the label (125px) and input element should always be 100% of the width of the fieldset element. Is there an easy way to do this (without adding divs)?

like image 586
rkhff Avatar asked Aug 19 '11 10:08

rkhff


People also ask

Which is the container of input elements?

The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.

What are the elements of the fluid model?

The elements are defined by eight nodes (FLUID30), 20 nodes (FLUID220), or 10 nodes (FLUID221), a reference pressure, and the isotropic material properties.

How do I flag the fluid-structure interface (FSI)?

The flag specification should be on the fluid elements at the interface. The fluid-structure interface (FSI) can be flagged automatically if acoustic elements are adjacent to solid structural elements (except for shell elements) and FSIs have not been flagged manually.

What is the solution output associated with the elements?

The solution output associated with the elements consists of the following: Nodal displacements and pressures included in the overall nodal solution.

How to number element nodes for fluid30?

For FLUID30, element nodes can be numbered either as shown in Figure 30.1: FLUID30Geometryor may have planes IJKL and MNOP interchanged. All elements must have 8 nodes.


1 Answers

See: http://jsfiddle.net/thirtydot/pk3GP/

You can do this by adding a harmless little span around each input:

<span><input type="text" name="first_name" required /></span>

And this new CSS:

form input {
    width: 100%;
}
form span {
    display: block;
    overflow: hidden;
    padding: 0 5px 0 0;
}

You can also do it with display: table, which is usually a better approach: How can I put an input element on the same line as its label?

like image 186
thirtydot Avatar answered Sep 21 '22 02:09

thirtydot