Liquid Textfield Width

Liquid textfield width

Yeah length is for character count, not width.

You want the text box to fill all available space short of what the button takes up? This is doable with a table (but I consistently get booed on Stack Overflow for suggesting tables). Let's say for the sake of argument you use DIVs with display:table, but just for simplicity I'll illustrate with actual table markup.

<table cellpadding=0 cellspacing=0 width=100%>
  <tr>
      <td><input type="text" style="width:100%"></td>
      <td style="width:0"><input type="submit"></td>
  </tr>
</table>

The width 0 on the button cell might seem odd, but table cells take their widths only as suggestions. It'll stretch to fit the content no matter how skinny you make it.

Expand textfield width to fit input as typing

Depends what browsers are you trying to target. New browsers probably support some way of doing this only via CSS, but I doubt IE6 has such a functionality.

So if you need legacy browser support, then I suggest sticking with JavaScript.

Fluid input elements

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?

CSS: fluid text input with floated-right button

Although they all expressed good ideas, I was having trouble getting the various suggestions to look consistant across browsers. After iterating on this a bunch I came up with the following solution which looks good for everything > IE7 and doesn't require any additional containers.

http://jsfiddle.net/tjlahr/hUeZS/

Basically the solution for me was:

1) button { float: right; position: relative; top: -28px; }

2) Use browser resets to cancel some of the extra padding and margins that get added to the button element.

3) Set the height of the input and button to further maintain consistant sizes between browsers.

Input size vs width

You can use both. The css style will override the size attribute in browsers that support CSS and make the field the correct width, and for those that don't, it will fall back to the specified number of characters.

Edit: I should have mentioned that the size attribute isn't a precise method of sizing: according to the HTML specification, it should refer to the number of characters of the current font the input will be able to display at once.

However, unless the font specified is a fixed-width/monospace font, this is not a guarantee that the specified number of characters will actually be visible; in most fonts, different characters will be different widths. This question has some good answers relating to this issue.

The snippet below demonstrates both approaches.

@font-face {    font-family: 'Diplomata';    font-style: normal;    font-weight: 400;    src: local('Diplomata'), local('Diplomata-Regular'), url(https://fonts.gstatic.com/s/diplomata/v8/8UgOK_RUxkBbV-q561I6kFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;}@font-face {    font-family: 'Open Sans Condensed';    font-style: normal;    font-weight: 300;    src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v11/gk5FxslNkTTHtojXrkp-xBEur64QvLD-0IbiAdTUNXE.woff2) format('woff2');    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;}p {  margin: 0 0 10px 0;}input {  font-size: 20px;}.narrow-font {  font-family: 'Open Sans Condensed', sans-serif;}.wide-font {  font-family: 'Diplomata', cursive;}.set-width {  width: 220px;}

<p>  <input type="text" size="10" class="narrow-font" value="0123456789" /></p><p>  <input type="text" size="10" class="wide-font" value="0123456789" /></p><p>  <input type="text" size="10" class="narrow-font set-width" value="0123456789" /></p><p>  <input type="text" size="10" class="wide-font set-width" value="0123456789" /></p>

Change width of HTML form using CSS

Looks fine to me:

.container{  width: 100%;  background: tomato;}
#search {    max-width: 75%;}
form {    width: 75%;  background: gray;  margin: 0 auto;}

<nav class="navbar fixed-top navbar-expand-lg navbar-dark">        <div class="container" id="home">            <form method="post">                <div class="input-group md-form form-sm form-2 pl-0" id="search" method="post">                    <input type="text" name ="search" id ="search" placeholder="Search Users" aria-label="Search" class="form-control my-0 py-1">                    <div class="input-group-append">                        <button class="btn btn-outline-secondary" type="submit" id="navbarButton"><i class="fas fa-search text-grey" aria-hidden="true"></i></button>                    </div>                </div>            </form>            <button class="navbar-toggler ml-auto" type="submit" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">                <span class="navbar-toggler-icon"></span>            </button>

Fluidly vertically expanding DIV or TEXTAREA

Is this what you want to do?

http://jsfiddle.net/wa5zU/2/

body, html {
    height:100%;
    margin: 0;
    padding: 0;
}
p {
    text-align:justify
}
*
{
   box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;   
}

textarea {
    resize:vertical;
    height: calc(100% - 20px) ;
    width:100%;      
}

.text-content
{
    height: 80%;
    overflow: auto;
    padding: 10px;
}

.editor
{
  height: 20%; 
  overflow: hidden;
  padding: 10px;
}

---

Related Topics