I can effectively create a two column layout in a <select> by using JavaScript to measure the text and add the appropriate number of spaces. However, depending on the font size, the space is ~4 pixels in width, meaning the column on the right kinda wavers to the left or the right up to 3 pixels at a time.
Fixed width is not the solution. Wavering actually looks better in this case. But an alternate space would be even better.
Is there a space of a different width that I can calculate in to reduce the waver?
There are various fixed-width spaces, but they do not work consistently across fonts.
If you need tabular presentation, use a table. This means that instead of a select element, you would use a set of radio buttons. You can then divide the radio button labels in two columns (and put the radio buttons in a column of their own, perhaps).
Related
I have a peculiar math problem. I am developing a hybrid mobile app using HTML/CSS/JS that will support multiple devices. for this reason I have not specified the input box width.
Now I need to truncate the text in the input box but since the width is not specified I cannot compare the length of the text field to a hardcoded value. I can however get the length of the input box (in px) and the font size i use is fixed (10 px)
Is there a way I can calculate how many 14px font size character can fit in a Xpx by Ypx input box?
The way I've achieved this in the past may not be efficient but it does the trick (just about).
The key here is to clone your text and start making alterations to it. You can, with javascript do this cloning on the fly. Put it in an invisible div off the page, and then break the text in to single character chunks. Each of these characters can then be wrapped in a span.
The next step is then to ensure you know your input box's width, and start adding up the widths of your spans, starting from the front. This should just be a case of getting all of the span elements in your custom "off screen" div and iterating through them.
Once you hit the magic width number (or go over it) you know that the number of characters from your word that you can have in the box.
There is a slight quirk with what you're describing, of course, and that is that you may also need to work out how many "lines" of text you can fit in the box, and amend your "total width" accordingly (if you have 1 line that is 100px wide, your max width would be 100px, but if it's 3 lines deep, the max width would be 300px).
As I say though, this may not be efficient processor usage...but it is a solution, and it doesn't require your font to be a certain size or type.
I am trying to create an input mechanism using the flex box model. I know it's not supported by all browsers, but that doesn't matter in this case. It really only needs to work on web-kit browsers.
I am trying to build a nice two column layout without needing to use specific widths. I have the flex property set to one on both the label and the input. However, as you can see, when the label element gets long, it messes up the width of the input that is next to it.
I want both label and input to be the same width down the column, but I want them to grow and shrink as the size of the window/device changes.
Is there a way to do this without having to set a width on either of the elements?
Update
I can set a max-width on the label elements to 5% and I basically get the desired effect. However, I'm still wondering if there is a way to do this without setting any width and using purely the flex box?
Here is a working jsFiddle.
The example you provided doesn't have columns at all, just the appearance that there are columns. Without actual columns you will have to set widths to make these 3 unreleated blocks look they are joined in some way.
You should be using the new CSS3 Flexible Box syntax, which is now 'flex' rather than 'box'. See the spec: http://www.w3.org/TR/css3-flexbox/ With this you can set the elements to have a <grow> <shrink> <default width> of 1 1 50%, so they will grow and shrink at the same rate and will each take up 50% of available width (you can adjust this or make it 60/40 or whatever).
Example JSFiddle: http://jsfiddle.net/XTa98/4/
Otherwise, if you want actual columns so that you don't have to set widths, you need to wrap all of the labels in their own "column" div and all of the inputs in their own "column" div.
JSFiddle: http://jsfiddle.net/XTa98/5/
This has actual columns and no widths set, but it does not degrade gracefully anymore since the elements are not in their own rows. To alleviate this you could always provide text-overflow: ellipses to truncate the text.
In any case, you have a trade-off. If you want the appearance of columns without actually using columns, you will need to set some type of width. Otherwise, you can use real columns but the elements are no longer joined as rows and you will need to account for the overflow when shrinking the browser width.
You don't have to wrap the elements in column divs to avoid setting widths. Just set each label and input to flex:1, and you'll get them dividing up the width equally. However, this is effectively just the same as setting each to be 50% wide, in this case, so I'm not sure what advantage it really has.
I'm rendering a form in a table with the labels in tags (left) and text inputs in tags (right of labels).
For the sake of flexibility, I'd like to write as little css as possible and have everything magically fall into place, such that:
the cells expand to accomodate the width of the longest label
the fields on the right expand to fill the whole width of the cell
I've been trying various combinations of width:100% and width:auto on these various elements but to no avail. Is doing this possible, or should I just give up and specify hard widths like width:Npx?
Not sure what your code looks like (if you post, answers are so much better...).
Anyway: cells will expand naturally to the width of the longest element if no width is specified, BUT you can't have the element expand to the width of the cell at the same time! That would make the calculation of the width impossible. So I'd recommend fixing the inner content somehow. Input fields look great when they are all the same length...
You have two options as far as I'm concerned. Either you implement a solution with tables that allows you to have fluid lengths for your labels, or you set them as fixed widths and use table-less markup. I personally see no compelling reason to choose one solution over the other, although some web developers will do almost anything to avoid using <table> elements in their markup.
That being said, this solution is quite easy if you are using tables: http://jsfiddle.net/Wexcode/VcSXU/
td:first-child {
white-space: nowrap; /* don't allow text to wrap to the next line */
}
I have a pretty basic question.
I am designing a form using HTML and CSS which should resize to the current page width (e.i. I have to use the relative units for all sizes). The form consists of several text fields all having different width and my client wants that they are arranged in a certain manner (like, for example, ZIP, City and Country to be three different fields in one row with different size proportions etc.).
To correctly layout the input fields along with their captions I put them into a table, using cells with different column span. I align the controls within TD with float:left and use relative width (like width:90%) to make the controls occupy the entire cell.
The problem I am facing is that my controls are aligned to the left and in the cells with different column spans the right margin looks jagged, i.e. all text input fields have slightly different width, because the cell have different widths and the size is proportional to cell width which may vary due to different colspan (see the picture).
How can I make my controls to look aligned on both sides?
P.S.: I am a web developer with some knowledge of HTML and CSS, but I am not at all a designer. Thus, this question might be utterly basic for a designer, but I failed to find a plausible answer with reasonable keyword combinations. If it is a sort of common topic (that I suppose) please just provide me with some clues how to formulate my question in the way to find answers.
i cant tell without your code but it looks like you may be using different font sizing for the input fields which i think could create the effect you are getting.
can you paste the css and html for the three elements you have shown in the pic?
I have a complex tree-like table layout (few cells on the left, many on the right), and I want to make certain cells (and their rows) vanish completely (with Javascript, based on class).
visibility:hidden just makes the contents invisible, and setting the text-size and border of the cells makes them small, but I'm stuck with a few pixels left. I've tried line-height:0, padding:0 border-spacing:0, but the cells are still taking up about two pixels, with another two pixels vertically between them.
Does someone have a list of the css attributes which have to be zero to get a cell to disappear completely?
Use the CSS display property:
style="display: none;"
If that doesn't work wrap the content in a <span> and use it on that instead