Styling HTML FORM elements with padding, with width 100% - javascript

I'm styling a form by using a table with fixed-width columns and I want the input elements inside the <td> to fill the container. I know the CSS box model and I know the elements would bleed through with width: 100%, but the problem is with its consistency.
<input> elements bleed through as expected but <select> elements don’t. This results in making my fields not line up properly. I've tried all properties like overflow, display, whitespace... it doesn’t make any difference. What’s with the <select> element? I can see in Firebug that they have the same box model properties with the input element, but they don’t render the same.
I’m using HTML 5 doctype and this happens both in Firefox and Chrome.
Right now, I’m fixing this using a JS function which selects all elements with class stretch and computes and sets the static width to make it fit inside the container. This perfectly lines up the elements of the form. (I had to exclude <select> elements because their widths were already okay... weird quirk.)
Is there a pure CSS solution to this? I wouldn’t want to run this function everytime a part of the page is updated, like on AJAX calls...

You could use box-sizing: border-box; on textfields and textarea's.
It solves te difference with the selectbox.

The best way is to fake the borders of the elements with a div.
<div class="formholder>
<textarea></textarea>
</div>
With this CSS:
.formholder {padding:10px;background:white;border:1px solid #ccc}
.formholder textarea {width:100%;padding:0;margin:0;background:white;border:0}
Of course, you can expand that for other fields. Some browsers might give you issues. Chrome and webkit allow you to resize textareas but if you add resize: none; to your CSS, it should disable it but YMMV.

It may help you to know the following results from various usability studies.
1) For most forms, people prefer to see the label just above the form element:
2) People find it useful if the form elements are sized appropriately to help suggest how much information is expected.
<ul>
<li><label for="firstname">First Name</label><br>
<input type="text" id="firstname" name="firstname" size="15"></li>
<li><label for="age">Age</label><br>
<input type="text" id="age" name="age" size="3"></li>
<!-- ... more list items -->
</ul>
Note: the list in this example would be styled so that it doesn't appear as a bullet-point list. Using lists in this way helps with accessibility as screen readers will tell the user how many items are contained in the list.
I thought this might be useful as it suggests that your efforts may be a bit wasted trying to layout the form in a table and stretch all inputs to the same length.
http://dev.w3.org/html5/markup/input.html#input

Not the most helpful answer, but CSS styling of form elements is pretty unreliable between browsers. A JavaScript solution like yours is the best bet.
Two reasons for the unreliability:
Some features of form elements can’t be described by CSS. The <select> element is a good example: there aren’t any CSS properties that can describe the different ways a <select> element looks on different operating systems.
Trying to work out which CSS properties should affect form elements, and how, is a rat’s nest for browser makers, so they’ve mostly left it alone. Safari is a notable exception; see e.g. http://webkit.org/blog/17/the-new-form-controls-checkbox-2/
You can argue that form elements should look the same between sites regardless of the site owners’ intentions, so that users know what they’re clicking on.
See http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/ for a deeper examination.

Say your html looks somewhat like this:
<form><table><tr>
<td><input type="text" /></td>
<td><select><option /><option /></select></td>
</tr></table></form>
How about just using the input and select for setting the width?
td { width: auto; }
input[type=text] { width: 100px; }
select { width: 100px; }
Or did I get your problem wrong?

The following CSS works for Moz Firefox, for html input elements (submit, button, text), textarea elements, and even select elements. The select elements are nearly equal length in the browser I'm trying.
table {width:100%;}
form input { width: 100%; }
form textarea { width: 100%; overflow-y: scroll; resize: vertical; }
form select { width: 100%; }

Related

Accessibility: 2 links with same text and different HREF

In a web application I have lists of things with the following structure:
As you can see, when we list items (users, roles or anything basically), we have some associated actions on the right, highlighted on yellow. In this case all items have a Delete option.
However, if I run a ADA compliance tool, I get a warning saying:
Warn: Ensure that links that point to different HREFs use different
link text.
What would be correct way to fix this as all the Delete links obviously point to a different link (for example: javascript:Delete(123)). I know it's just a warning I could ignore, but it might be good to fix it.
I don't want to change the link text to Delete XYZ as it would be way redundant and it might not fit in the screen either.
I'm using the Firefox's Accessibility Evaluation Toolbar for the test.
Edit: When using a screen reader, the tab order is Administrator, Delete, Advisor, Delete, Instructor, Delete, ... as the items are also links that take you to the details/edit of each of those items. I'm not an expert on accessibility, but it looks redundant since it's already reading the item before each Delete.
Use a screenreader only class on a more descriptive element if you don't want to put the proper text labels in.
Bootstrap has a really handy little style .sr-only you can add to your stylesheet for elements you only want screenreaders to see:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
Just put the style on a more verbose version of the 'delete' div/span:
<div class="sr-only">Delete Administrator</div>
Similar to staypuftman's suggestion, I would also use Bootstrap's .sr-only class but I would assign it to a span surrounding the extra words only so that you only see "Delete" in the button while the accessibly hidden text is part of the button semantically and will be read when the button has focus.
Like so:
<button type="button" id="deleteAdvisor">
Delete
<span class="sr-only"> Advisor</span>
</button>

Select2 4.0.0 - change inputbox height

whenever I use select2, the empty box is just one line high.
When input is added, the box expands accordingly, but always just the exact amount needed.
How can I change it so my input box is at least 100px high, even if empty? In some cases, I expect the box to be 100px or even higher when filled, so it looks really dumb in my layout, if the box is just 16px high in the first place.
The HTML element to which I'm applying select2() is a Select element with "multiple=multiple" (I need multiple inputs eventually.)
I googled a lot, and also searched in this forum, but nothing worked so far.
I tried including something like this in my custom css file:
.select2-container .select2-choice {
min-height:100px !important;
}
But it didnt't change anything. Maybe those tipps are for older versions of select2? I'm using 4.0.0.
How can I enlarge the box?
Solution:
I added this to my css. It's all about getting the css selectors right (which indeed seem to have changed, recently). I extracted their names by inspecting my HTML output.
.select2-container .select2-selection--multiple{
min-height:100px;
padding-bottom: 50px;
}
.select2-selection.select2-selection--multiple {
min-height: 100px;
}
Tested on the examples page.
I would just pad the select2-choices container a bit so you can still have a dynamic height but be sure that the element can never make contact with the bottom of the container. You can also put the min-height here I think.
.select2-container-multi .select2-choices {
padding-bottom: 4px;
min-height: 26px;
}

How to align jQuery UI selectmenu with buttons?

I've been struggling with this for a while (I'm really not experienced with jQuery UI).
I'm trying to implement a jQuery UI that has a selectmenu next to some regular buttons. For some reason I can't understand, the selectmenu is mis-aligned; it's way higher up on the page than the buttons.
Here's what it looks like:
I'm not sure if this is a bug or not, it sure looks very wrong to me. I've been struggling for quite a while now but haven't been able to figure it out.
The markup is really very basic so I don't think it's very helpful to include it here., but it's all here: http://jsbin.com/afixij/10/edit?html,css,js,output. Widen the Output to see all three elements (the selectmenu, and the buttons Foo and Bar) on the same line.
You could just apply vertical-align:middle to the dropdown which is made up of spans to get the buttons aligned properly with the dropdown.
#speed-button{
vertical-align : middle;
}
Bin
It appears there is no option to provide a custom classname for select menu widget (It is bad if that is the case) as applying rule to a class would be much better. You could as well do:-
Apply a classname for the select
and in css provide a generic rule for any .menu-buttons
.menu-button + .ui-selectmenu-button{
vertical-align : middle;
}
Bin2
It might actually be easier to make the actual buttons (not menu) up by using
<button style="vertical-align: top"></button>
It can be inlined and creation of a custom class isn't required.
The solution I applied was to place the content I wished to be vertically aligned in a display: flex entry. For example:
<div style="display: flex; align-items: center;">
... other elements here
</div>
for more details on this display type, see this excellent discussion:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
To expand on the marked answer, there is a way to obtain the jquery object the selectmenu creates. Make sure you initialize the selectmenu first or it won't work.
$("#speed").selectmenu();
$("#speed").selectmenu("widget").addClass("fixAnnoyingSelectAlignmentClass");
CSS:
.fixAnnoyingSelectAlignmentClass
{
vertical-align: middle;
}

HtmlService - Suppress Firefox arrow in select element

Edit: This question is already different from the one that was voted duplicate, How to remove the arrow from a select element in Firefox. That question was referenced in the question from the start - before trying to get your daily limit of close votes, please read the question.
I'm using the HtmlService of Google Apps Script to display an HTML form, including jQuery and javascript. Using the recommended stylesheet for Google Doc add-ons, this is how a select box appears in Chrome:
Here's the same thing, in Firefox. Note the extra superimposed arrow.
How can I get rid of that overlay in Firefox?
I've tried the techniques described in How to remove the arrow from a select element in Firefox, but the accepted and highest voted answers stopped working in more recent versions of FF, and didn't work for me. Other solutions involving overflowing the select and hiding the overflow with an enclosing div are interesting, but since they also eliminate the desired "up/down" arrows, they aren't acceptable for this application.
HTML
<div class="block form-group">
<label for="my-selection">Select an option:</label>
<select class="width-100" id="my-selection">
<option value="Option 1"></option>
<option value="Option 2"></option>
<option value="Option 3"></option>
</select>
</div>
CSS
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<!-- The CSS package above applies Google styling to buttons and other elements. -->
<style>
.width-100 {
width: 100%;
}
select {
height: 31px;
}
</style>
I tried your code in Firefox v37.0.1 and it looks exactly the same as Chrome and Safari (no extra arrow). Maybe google updated their css file?
Other solutions involving overflowing the select and hiding the overflow with an enclosing div are interesting, but since they also eliminate the desired "up/down" arrows, they aren't acceptable for this application.
You just need to re-implement the up/down arrows. I think you can manage two triangles. In my experience, this is the only reliable solution to this problem.
Try,
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
You may use above. However this trick is reported to be not working somewhere between Firefox v30 - Firefox v35.
For firefox v30 wise, below seems to be working according to the source.
You may throw javascript agent to find browser source to act accordingly.
(window.navigator.userAgent)
.styled-select {
overflow: hidden;
width: 200px;
}
#-moz-document url-prefix(){
.styled-select select { width: 110%; }
}
Follow this Github link for further reference.
https://gist.github.com/joaocunha/6273016

Is it better to use divs or tables to contain columns of links?

I have a page with 3 columns of links at the bottom. Each column is put into a div and all three divs are wrapped into a big div that is centered on the page. Is this something that is better suited to a table or is a table the wrong element for the job?
You can also use <ul> & <li> for this.
#horizontal {
width: 100%;
background: #eee;
float: left;
}
#horizontal ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}
This will create horizontal columns using li elements, and then you can stuff the HTML to create individual links in each li.
The Rule of Thumb is:
Use Divs for layout, tables for tabular data.
On a side note, check out etymology of the term Rule of Thumb, quite humorous.
the question you want to ask yourself is, are your links a part of any tabular data?
if yes, tables are your choice. If no, then you should use divs.
Its important to use the semantically correect element to create a page, although other elements may result in the same effect, possibly with less effort.
As for your links, it seems they are not part of a table. I'd suggest the use of divs and proper css.
jrh
I don't think tables are a good choice for this. Simply having three columns doesn't constitute tabular data in my book. With some clean markup and a good stylesheet, you can have a much more flexible way to accomplish this. If you use left floated divs, simply give them a percent width so that they fill up the parent container (100 / number of elements)%. That way, if you want to add another column its a simple markup change a single stylesheet change. This way you wont have to deal with browser table wonkyness and have a great deal more flexibility in its design - on top of that you can change the layout completely without leaving your stylesheet.
The main principle behind HTML is to "markup" the MEANING of your data.
I'll use the above principle as a guide:
If you have 3 columns just because it looks nice - then there is no meaning to your columns, and you should try to use DIVs (which are meaningless "container" elements).
If you have 3 columns because there are 3 categories of links, then a TABLE is fine. Imagine if you gave headers to each list of links - this makes a TABLE with a THEAD necessary.
And in fact, each column is an "unordered list" - which translates into a UL element with LI elements.
And since you have a list of links, you will use, of course, A elements.
So from first-principles, you should have this structure:
<DIV> or <TABLE> (with <TR>/<TD>)
-> <UL>
----> <LI>
-------- <A>
Contrary to other answers, a table could be a semantic solution. If the three sections are distinct from each other and have a title, you can use <th> for the titles and <td> for each of the links. I think that's perfectly semantic.

Categories

Resources