I want to present input forms in horizontal, want to have its labels as header (1st line is header include all labels of input form, 2nd line toward are repeated input forms).
I try to use 960 Grid System using grid_2, grid_3 for example apply for each field and its label.
However, the input has border, but label doesn't, so the input fields was not aligned tightly with header (labels). If I try
input
{
border: 0;
}
then it aligns correctly. But using this way I can not see the input field visible.
How can I align it vertical without different 1 or 2 px of border of input?
I don't believe the grid system is intended for use on labels and input fields.
Instead of applying grid_X class directly to label and field, you should apply to <div> that wraps around these input and labels, OR customize the grid class by defining input.grid_x and adjust the width.
Related
I'm trying to create a widget that will act as a navigation bar. It is formed by some buttons that are separated by arrows.
I'm trying to replicate this picture in Qt Designer using labels with the arrow character → . The problem is that this character is bigger than it seems so when I resize the container, the lower part of the arrow disappears.
I have tried to use the vertical layout using a vertical spacer to align the arrow character as the same height as the buttons but the character was cut anyways.
I can't reproduce your example by using just the standard settings.
I added two buttons and a label to the horizontalLayout and set the label font size to 55. I also set the text alignment to horizontal center and vertical center.
You will always have more space at the top cause this is the content of the ascii char.
Maybe it's better to use a simple icon?
EDIT:
You can also add a label or a button with a pixmap/icon which is resizeing with the window:
I was trying to style my form with Materialize CSS and there's something a little awkward with the data-success and data-error attributes: the words in the attribute appear to display in a vertical column, instead of displaying horizontally underneath the input field line. Here's a JS fiddle example: http://jsfiddle.net/8zgvyakn/1/. In a somewhat crowded form where such a lengthy error attribute may be necessary, the red text overlaps with other form fields. Is there any way around this, or is this a MaterializeCSS limitation?
The error text is an after of the label edit the width of the label to 100% and that should make the after 100% aswell.
I am using Bootstrap input controls with label. My form consists of many input controls, that need to fit into available space. Even when I use "sm" group objects, they occupy lot of space (Especially height). I tried changing attributes in css for inputs like [type="text"] etc. The height of field is affected but not the label portion.
Typing [type="text"] isn't going to affect the form labels. To change the label you need to type something like
form label
{
/* your styling goes here */
}
In my Flex 4.5 mobile app, I have an actionScript item renderer (that derives from Flex's LabelItemRenderer). I want to fit in exactly 2 lines of text, and then truncate the rest. The width and height of the label are fixed and known statically.
How can I do this? The StyleableTextField.truncateToFit() method only works for one line of text.
I've set wordWrap = true, so the text now flows into the second line - but I need to truncate the text if it doesn't fit in two lines.
I need it to show all the text if there is only one line. (in both cases the label should be vertically middle-aligned in my renderer)
I know how to override layoutContents to do sizing and positioning etc of the StyleableTextField. So I'm looking specifically for ideas to implement custom text truncation with the StyleableTextField).
Any ideas?
Unless you're using something specific to the StyleableTextField try the s:Label. It has a property maxDisplayedLines which you could set to 2 and it will handle the truncation.
I have a asp:Panel where Grouping text is equal to "string".Now this string comes on the left hand side on the upper half of panel border.I want this grouping text to come in the center as in a title of the panel.How can we do this
You can move it to the right using css. Although I don't know of a way to have it automatically centered.
Target it by using legend {margin-left:<px>;}