{"id":3148,"date":"2014-01-09T10:23:30","date_gmt":"2014-01-09T16:23:30","guid":{"rendered":"http:\/\/bililite.com\/blog\/?p=3148"},"modified":"2014-01-09T10:23:30","modified_gmt":"2014-01-09T16:23:30","slug":"input-elements-that-fill-the-available-space","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2014\/01\/09\/input-elements-that-fill-the-available-space\/","title":{"rendered":"Input elements that fill the available space"},"content":{"rendered":"<p>With my <a href=\"http:\/\/bililite.com\/blog\/2013\/12\/12\/new-jquery-plugin-status\/\" title=\"New jQuery plugin, status\"><code>status<\/code> plugin<\/a>, I'd generally like the input element to take up the whole line, or at least the part that's not taken up by the prompt and by other messages. Evidently, that's a <a href=\"http:\/\/www.google.com\/search?q=css+input+width+remaining+space\">common concern<\/a>, with a pure CSS solution that relies on <code class=\"language-css\" >overflow: hidden<\/code> to create a new <a href=\"http:\/\/colinaarts.com\/articles\/the-magic-of-overflow-hidden\/\">block formatting context<\/a> that makes <code class=\"language-css\" >width: 100%<\/code> mean \"100% of the space not taken up by floats\".<\/p>\n<p>So the solution is to make sure that everything that is <em>not<\/em> the input element is <code class=\"language-css\" >float<\/code>ed, and that the input element is wrapped with an element that is <code class=\"language-css\" >display: block<\/code> and <code class=\"language-css\" >overflow: hidden<\/code>, and the input element is <code class=\"language-css\" >width: 100%<\/code> (and <code class=\"language-css\" >box-sizing: border-box<\/code> to make sure the border doesn't overflow).<\/p>\n<p>It's unfortunate that we need the non-semantic wrapper to set the size that the input can be 100% of, but I don't see another option. It also requires that the <code class=\"language-css\" >float<\/code>ed elements come <em>before<\/em> the input element in the DOM, so my <a href=\"http:\/\/bililite.com\/blog\/2013\/12\/12\/new-jquery-plugin-status\/\" title=\"New jQuery plugin, status\"><code>status<\/code> plugin<\/a> has to use <a href=\"http:\/\/api.jquery.com\/prependTo\/\"><code class=\"language-javascript\" >prependTo<\/code><\/a> for messages and <a href=\"http:\/\/api.jquery.com\/appendTo\/\"><code class=\"language-javascript\" >appendTo<\/code><\/a> for the input element.<\/p>\n<p>As an example (the text is all editable):<\/p>\n<pre><code class=\"language-html demo\" >\r\n&lt;div&gt;\r\n  &lt;span style=\"float: left\" contenteditable&gt;Prompt String:&lt;\/span&gt;\r\n  &lt;span style=\"float: right; color: red\" contenteditable&gt;Important Message&lt;\/span&gt;\r\n  &lt;span style=\"overflow: hidden; display: block; padding: 0 1em\"&gt; &lt;!-- the padding isn't essential; it's just decorative --&gt;\r\n    &lt;input style=\"width: 100%; box-sizing: border-box; -moz-box-sizing: border-box\"\/&gt;\r\n  &lt;\/span&gt;\r\n&lt;\/div&gt;\r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>With my status plugin, I'd generally like the input element to take up the whole line, or at least the part that's not taken up by the prompt and by other messages. Evidently, that's a common concern, with a pure CSS solution that relies on overflow: hidden to create a new block formatting context that [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3148"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=3148"}],"version-history":[{"count":3,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3148\/revisions"}],"predecessor-version":[{"id":3151,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3148\/revisions\/3151"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=3148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=3148"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=3148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}