I'm currently working on refactoring one of our Form Controller so that we can use it for a public facing site. Currently it's generating a table layout for the forms, but I am trying to get it done using CSS forms.
I am trying to reproduce something that would look like this http://www.stylephreak.com/uploads/source/cssforms/cssform.php
Issue I am having is that every CSS form examples I find seems to assume a fixed width for the left column label. I have no control over what goes in the label in my case, it's coming from a user editable translation bank. With a table it's super easy I would simply use whitespace:nowrap; and the longest label would decide on the td's width and everyone is happy.
Is it possible to do something similar with CSS? I've tried using min-width and forcing it not to wrap. This worked but only pushes the current control right and screwed up the alignment, not to mention that min-width isn't supported in IE 6.
Is it really that bad to use a table for form layouts? It's tabular data and make sense when linearized after all no?
You can set the <label> css to display: table-cell and the containing <div> to display: table-row. This will mimic the behavior of using a table without actually using a <table>.
<div style="display: table-row">
<label style="display: table-cell; padding: 0 1em; text-align: right;" for="fm-firstname">First Name:</label>
<input type="text" name="fm-firstname" id="fm-firstname" />
</div>
<div style="display: table-row">
<label style="display: table-cell; padding: 0 1em; text-align: right;" for="fm-lastname">Last:</label>
<input type="text" name="fm-lastname" id="fm-lastname" />
</div>
This will look great in any recent browser (Firefox, Chrome, IE8+). In IE7, the textboxes won't be aligned correctly.
Well, here's a solution that is a bit unconventional, but I think the simplicity should work for all browsers.
The sample fiddle.
Accessibility doesn't seem to be a problem, for both keyboard and mouse control act as whished. The main disadvantage of course is that this page does not render well if CSS is turned off. Are there somewhere statistics about that? And also don't I know how screen readers will react to this wantonness.
To my knowlegde forms always occupy 100% of the available width. You could use that.
If it's allowed to fill up the whole width of the provided container for this form, then this seems a valid answer:
The sample fiddle.
The minor disadvantage in this case is to choose the ratio between the width of the labels and the inputs.
Related
So, I'm attempting to make my own website (Yeah, I finally sucked it up and started doing markup, sigh) - problem I'm having is I'm trying to center a button, and it's offset a little. Without the <center> it's all the way to the left.
Also tried :
style="align-items:center"
<div id="form-container" style="align-items:center;">
<div>
<fieldset>
<center><input class="button0" value="Install Redux" type="button" /></center>
</fieldset>
</div>
</div>
You just have to put <center> before your <div> and close it after </div>.
Like this:
<center>
<div id="form-container" style="align-items:center;">
<div>
<fieldset>
<input class="button0" value="Install Redux" type="button" />
</fieldset>
</div>
</div>
</center>
I've also made a CodePen and a JSFiddle for you.
Try text-align:center on the parent, or use left:0;top:0;position:relative;webkitTransform:translate3d(-50%,0%,0%); where parent doesn't have position:static (the default)
I would also recommend checking out Bootstrap because it has a nice grid layout that lets you define which 12ths of the page you want columns to lay in, simply by defining classes like .btn-default or .nav or in your case class="col-xs-12" inside that other column
They also have really nice styles for forms and input buttons etc. (see video on my example site below)
Try resizing your browser while looking at their examples. Pretty much, you define class="col-xs-12" if you want it to appear as 12/12 width of the row on extra small (mobile) and LARGER devices, and you can mix them class="col-xs-12 col-md-6" so it will split the row on larger (tablet) size devices. It's the number 1 repository on GitHub, and only takes about 30 minutes to read through the Grid Layout and search around for "Nav" and "Button" elements.
I recently made a quick site http://neaumusic.github.io, feel free to check it out, and good luck
Two ways:
1) Set margin-left: auto; AND margin-right: auto; to the containing div OR
2) Set display:flex; AND justify-content:center;to the parent container.
Google flex box for a little more information, its very useful for layout once you get the hang of it.
As stated in the comments, the center tag is no longer supported.
What about if you try #form-container { text-align: center; } ? It will center all children, including button.
I would definitely recommend using flexbox, the only issue being ie8/9 support.
It really makes layout so much easier and you don't have to create very specific, often arbitrary margins to get your stuff to align nicely, particularly vertical alignment.
Your alignment options are split between the container and the items. It does row and column layout too.
Here is a link I used to get me started.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I am tearing my hair out on this one and it seems I am probably not searching the right terms and the google results I get seems to be general layout type of questions.
I have some data that I wish to represent in a web page. There are some 20~30 fields of different data. If I were to do it with what I know, I would so something like this(total of 3 columns and 30 rows each field is different data):
<table>
<tr><td>Field1:</td><td><input id="dataforField1"></input></td><td>Field2:/td><td><input id="dataforfield2"></td></tr>
<tr><td>Field3:</td><td><input id="dataforField3"></input></td><td>Field4:/td><td><input id="dataforfield4"></td></tr>
</table>
However I have been reading lately that div is much preferred when presenting non-tabular data. So I attempted to do this:
<div style="float:left;">
<ul>
<li>Field1</li>
<li>Field2</li>
<li>Field3</li>
</ul>
</div>
<div style="float:left;">
<ul>
<li><input id="tag1...</li>
<li><input id="tag2...</li>
<li><input id="tag3...</li>
</ul>
</div>
but my field labels are not lining up with my data input elements. Field1 seems to match input1 horizontally. But when I get to field10, it is off by a lot. I tried it without ul and li and use br after each, but I can't seem to get them to line up.
Question:
How do I get them to match if I don't do table?
I need clarification on the word "tabular". If my data were a table, it would only ever going to have 1 row. When is it okay to use table?
What do people use to line things up when they are trying to implement similar things?
Edit:
I want Field1 to line up horizontally with input tag1 and so on.
Edit2:
Added a picture to show how things are not lining up. it would be the same without li.
I would generally suggest adopting a grid system for this purpose. There are many great ones. My favorite one for web development is Bootstrap's grid. Bootstrap as a framework is amazing as well.
I will also add a quote of my comment regarding this:
... It is really recommended to only use a table when you are actually
willing to show a real table with information in it. The old way of
presenting forms in tables to achieve alignment is just a no-no these
days. Grid systems do it better and they are more responsive.
However.
The disalignment was caused by loss of relativity between the text (labels) and the input fields. As the list goes longer, the proportions are losing. This is because the height of the text is not the same as the height of the input field.
CSS:
li {
height: 40px;
}
This makes sure all <li> elements will have the same height. Of course it's recommended to apply the style to a class and not directly to an element, but this is just for the sake of the solution.
CodePen: http://codepen.io/arielweinberger/pen/jqveoX
I haven't managed to re-produce what you said you are experiencing.
For labels and inputs you should use, you guessed it: labels and inputs. Put each pair under the same parent, make them inline-blocks with a fixed width and you're good to go. No need for external tools, this is as basic as it gets.
label {
margin-right: 10px;
width: 120px;
display: inline-block;
}
<div style="float:left;">
<ul>
<li><label>Field1</label><input/></li>
<li><label>Field2</label><input/></li>
<li><label>Field3</label><input/></li>
<li><label>Field4</label><input/></li>
<li><label>Field5</label><input/></li>
<li><label>Long Field Name</label><input/></li>
<li><label>Field6</label><input/></li>
<li><label>Field7</label><input/></li>
</ul>
</div>
I've got two pages, one made with div's and CSS, one made with the notorious table.
The CSS Page...
...and the Table page.
At first glance, they're pretty similar. Both sport a 2x2 grid of rounded "buttons", which resize based on the window around them.
Now, put this in the context of a mobile phone. That's right, shrink that result-frame down (horizontally, don't worry about vertical).
Originally, i just had the CSS version, but there's specific browser widths in which text on the left drops down to two lines where text on the right stays at one, as the strings are different lengths. It just so happens that with the actual strings, most phone resolutions cause this annoying situation to occur.
However, the table predictably acts the way I would want it to. The table has a concept of "rows" as well as "columns", so the columns stay aligned and as a cell in one row gets taller, so do all the rest.
Is there a way to mimic this behavior in CSS? I'm constantly told how bad tables are for accessibility, etc. And I'm a fan of keeping <table> for actual tables of data, not layout.
I know of the adjacent-selector, but I couldn't find a way to say "make your min-height the same as my height, and vice-versa".
Also, obviously this could be done with a script. But unless someone here has a passionately feels that for this problem, javascript > CSS && javascript > Table, let's stick to CSS.
Every sane browser today should support the display: table/table-row/table-cell/... property, which converts your divs to a nice table, but without touching the html markup.
Here is your transformed code:
http://jsfiddle.net/eU6Xe/5/
HTML:
<div id="main">
<div class="row">
<div class="button">
Some text here
</div>
<div class="button">
And more text here
</div>
</div>
<div class="row">
<div class="button">
More Text
</div>
<div class="button">
Lots of text here
</div>
</div>
</div>
CSS:
div #main {
display: table;
width: 100%;
}
div.row {
display: table-row;
}
div.button {
display: table-cell;
}
To be honest both versions are not accessible, and both are equally as annoying to use.
First and foremost: Why aren't you using <button>s or <input type="button">?
It isn't semantically correct for both demos. Tables are not meant to do anything besides hold data. A button should be used for submitting/cancelling/clearing forms. A <div> is that whatchamacallit you keep in your junk drawer, that you use for a last resort.
Table Method
There is no way to make the table accessible. It will be always bee seen as a table, but since this is being incorrectly used, the WAI-ARIA role of presentation needs to be used. However this will tell assistive technology to ignore the fact it is a table, thus chunking the words together. The only way to make the cells clickable, is via an onClick, which may be fired automatically depending on the AT and the way you construct the onClick. Thus not allowing the person get past it, and since they won't know it is a table, they can't jump over it.
CSS Method
First the <h2> elements are used incorrectly. <h2> are to denote sections of a page that contribute to page hierarchy, which it makes little sense that a button would be part of the hierarchy. Next, a <div> doesn't recieve focus by default. Third, if you attach an onClick to the <div>, you run into the same issue as above.
Using ARIA, you can make <div>s act like buttons but your code becomes:
<div class="left-col">
<div class="button" tabindex="-1" role="button">
Some text here
</div>
<div class="button" tabindex="-1" role="button">
And more text here
</div>
</div>
OR
<input type="button" value="some text here" />
I've created a nice set of form elements in Photoshop and am looking to convert them into HTML and CSS. The simple input-text form will have a background image, as the field does not change in size. However, the text-area form will dynamically change size as the user types.
Normally, to build out this sort of style, I'd wrap the form field in divs, as such:
<div class = "textarea-top">
<div class = "textarea-bottom">
<textarea></textarea>
</div>
</div>
Or by using multiple background-images in one wrapping div:
<div class = "textarea">
<textarea></textarea>
</div>
Is there a better way to approach this? To restate, the field styles are advanced images that can be repeated (for the body of the field), and have styling for the top and bottom. The question is, what is the best practice in dealing with these advanced form styling?
I'm not entirely sure what you mean by "best practice", but one thing I'd improve are the semantics.
You could (should?) use <fieldset>'s instead of a, rather meaningless, <div>.
And you don't need to use two <div>'s around the textarea, or even multiple background images on a single <div> (which is a CSS3 property, and not widely-supported).
Instead, you should wrap the <textarea> in a <label> element, and nest your background-images as I've described below:
Try this:
<fieldset class="expandableInput">
<label>
Semantic text:
<textarea></textarea>
</label>
</fieldset>
Bonus: wrapping form elements in <label>'s like this, affords a larger click area, for the user to gain focus on the form element at hand. Just be wary of <select>'s, which doesn't play nice (even though it's valid HTML)
The CSS would be something like:
.expandableInput {background: url(/path/to/first/img);}
.expandableInput label {display: block; background: url(/path/to/second/img);}
.expandableInput textarea {display: block; margin-top: 3px; background: url(/path/to/third/img);}
Also;
For consistent looks on form elements, in every browser & platform, I can highly recommend Nathan Smith's Formalize CSS (it requires JS for HTML5 support in older browsers).
I've already figured out that Firefox's sizing of textareas is buggy - it always adds one to your rows and cols settings. But I've decided to just ignore that. The problem is that Firefox also refuses to put in the vertical scrollbar, even if I type a friggin' short story into the box.
Am I doing something wrong (i.e. invalid)? Is there a workaround?
<textarea rows="1" cols="35" name="Cmnt1"></textarea>
(I want to use a one-row textarea instead of an input type=text precisely because the latter doesn't provide scrollbars. All the other browsers will give you a vertical scrollbar even on a one-row textarea.)
Note that this field will almost always contain just a single line of text, but it needs to accept more "just in case". A text input field is less than satisfactory (<-- understatement) because it always hides the overflow. In every other browser, a single-row textarea works exactly as I want. I vehemently disagree that what I want is a usability problem. Unfortunately, the way it behaves in Firefox is a usability problem.
Edit: turns out there's a bug with my installation of Firefox. :/
I know this is really old, but I have a similar issue and found the answer to your question in the process. Playing with a jsfiddle ( http://jsfiddle.net/z8btg/1/ ) in firefox revealed that the vertical scrollbar is only visible if there is room to display both the up and down arrow graphics. (Click on the little resize icon and make it small / big.) For me, the sweet spot is 34 pixels.
What I am trying to do:
I need the textarea to be one line until the textarea is focused, then I change it to a larger (popout style) textarea.
Try setting the overflow css property to "scroll". For example:
<textarea rows="1" cols="35" name="Cmnt1" style="overflow: scroll;"></textarea>
Edit: Sorry, should be overflow-y: scroll.
Focus on the textarea, hit the return key.
This sounds like a pretty terrible idea, by the way.
I used something like this to present a html link to visitors, needed to fit into the design and usability is just fine for it's intended function:
<input type="text" name="linkHTML" id="linkHTML" style="width: 95%;" value='YOUR TEXT CONTENT' onfocus="this.select()" onclick="this.select()" />
Set width as needed (% or px).
On click will highlight for copy.
Try setting the height of the textarea to 1em with CSS (which means one line-height unit) and set the rows to a higher value.
I am using Firefox 2.0. The scrollbar on the textarea does not show up until the height of the textarea is 32px (which is about two lines of text). If the height is less than that the scrollbars disappear -- probably because there is not enough room to show the arrow icons.