In my site I limited the form components to be in a fixed size. at the same time, I allowed the label to break the text when the text is long and I wonder if there is a way to catch whether the label actually broke the text (so i could adjust the fixed height accordingly) or not
note that the label itself comes from the server (as a resource) and the site is presented on many device resolutions so I can't predict whether the text will break or not
my code looks like this:
HTML
<form>
<div class="long-label">
<label for="question1">What is your name?</label>
<input id="question1" name="question1" >
<span class="error" data-for="question1"></span>
</div>
<div class="long-label">
<label for="question2">What is your favourite colour?</label>
<input id="question2" name="question2" >
<span class="error" data-for="question2"></span>
</div>
</form>
CSS
.long-label {height:60px;}
.long-label label { white-space:normal;}
EDIT:
I've made a codepen example for what I'm trying to achieve
https://codepen.io/smallscalearmageddon/pen/eYNQGJK
I'll try to explain the scenario more clearly:
I have a form in my site with several inputs, labels above them and underneath them there are error spans that are being injected if and when the input value is not valid.
When that happens for a certain input, the error span is pushing the inputs underneath it down and the graphic guy said that it is ugly and the margin between the inputs should be fixed.
so I've fixed the height ({height:60px;}).
unfortunately, the labels above the inputs come from the server as resources in many languages and some of them are making the labels text vey long until it breaks into 2 lines.
when that happens + a validation error is being displayed - the error span is being overlaying the label of the input underneath it.
so what I was asking is:
is there a way to detect when the text breaks into a new line so I could fixed its height accordingly
I hope I was clear now
.long-label {min-height:60px;}
EDIT:
This pen is based on your example: https://codepen.io/ziad-darwich/pen/vYOQpyQ
Related
I have an Angular Material page with a few input containers.
Some of these containers are aligned side by side with a space distribution of 33 % and 66 %. I want only one label above these input fields.
<div layout="row">
<md-input-container flex="33">
<label>My Label</label>
<input type="text" ng-readonly="true" ng-model="text1"/>
</md-input-container>
<md-input-container flex="66">
<label></label>
<input type="text" ng-readonly="true" ng-model="text2"/>
</md-input-container>
</div>
I placed my label above the first input container and over the second container an empty label.
And this is exactly where my problem is located, because on smaller screens the label gets truncated. This is completely comprehensible, but in my case I don't want this behavior of Angular Material. How do I achiev this? Here is a demonstration of my problem. On a smaller screen the label gets cut of.
tl;dr
I want two input containers with only one label. The label should be visible all the time, also on small screens, but it gets truncated.
Thanks for any help.
It was too simple!
All I had to do was preventing the overflow: hidden; attribute, which is set by default from angular material.
The default truncation looked like this:
After changing the style sheet to overflow: visible !important; the result is exactly what i wanted:
I made an update on the plunker example given above. Here is the new version.
I am really interested in making a PHP page with user input boxes and various other elements to look like the control boxes you see on old school GUIs that had borders beginning and terminating with the box label.
See here:
How to do that with css?
Don't use a div. HTML has <fieldset> and <legend> which are designed for this usecase and render like that by default.
<fieldset>
<legend>Motor 1 Log</legend>
<label>Movements <input></label>
<label>Over-Currents <input></label>
<label>Amphous <input></label>
</fieldset>
I'm using the inline-help class from bootstrap next to an input field that has a "span11" class. The span does not appear inline with the input field and rather it shows up on the next line because of the class "span11"
Here is the code:
<div class="control-group error" id="password-control">
<label class="control-label" for="password-confirm">Confirm Password</label>
<input type="password" size="30" name="register[confirm]" id="password-confirm" class="span11">
<span class="help-inline">password did not match</span>
when I get rid of span11, it shows up next to the input field. I need the span11 for responsive text fields so I can't remove it.
Any idea how I can fix this?
Thank you!:)
In Twitter Bootstrap, <input>'s are intended to be sized using the classes:
input-small
input-medium
input-large
input-xlarge
input-xxlarge
The spanX classes are more intended for <div>'s and other containery elements (though I admit to having used them to good effect on other things).
If you are using the responsive CSS that is provided with Bootstrap, once you get down to phone-sized viewport widths all spanX classes become width:100%;, which will guarantee that your help-inline content will get pushed to the next line.
At least with input-small and input-medium they won't ever fill the entire width, and you could keep the help-inline there, as long as the viewport isn't ridiculously small.
In the following example (from Mozilla's site):
<div style="color:darkred"> The color of this text is the same as the one of the line: <div style="background:currentcolor; height:1px"></div> Some more text. </div>
Please take a look at this corresponding jsfiddle link.
If I remove "background:currentColor" from the style, the line it draws disappears. How does a style like this result in the addition of a line?
Thanks.
Because the div has a height of one pixel (1px), which means it is presented as a line - namely because there is no content of x-pixels height within it, it sizes itself appropriately (if no height was specified then it would collapse to 0). Therefore, because the div has a background colour (which doesn't match the colour on which it is rendered (which, if the colours did match, would give the illusion of invisibility)) you see one pixel height line of that colour.
Think of crushing a box down, or folding paper: you couldn't make it entirely disappear (out of existence, or current form, at least not easily) and, upon bringing yourself horizontal to the plane on which it sat, would still see it (or its colour/shade of, etc.)
Of course, concentrating on only that one not a solution wouldn't be too helpful, although others have come to your aid: use a span element to 'group' text within text, these are inline by default and by rights should only be output if there is text to go in one - this forgets for a moment that you explicitly specify a height value at all, which is what makes me wonder about the whole scenario.
because Div is a block element.
<div style="color:darkred"> The color of this text is the same as the one of the line: <span style="background:currentcolor; height:1px"></span> Some more text. </div>
I'm making a web app. In it there are times when a form may be "read only". To simulate this with HTML, I have it so that all the (dynamically created) text boxes that contain content are disabled. This works fine enough, but if there is very much text and not all of it is visible at once(especially in multi-line boxes) then there isn't a way for the user to scroll around in it. Also, another issue is its not possible to copy and paste text from disabled text boxes.
So what I am needing is a way to make it so you can not modify the content in a textbox, but you can select the text, and the scroll bar works.
Also, I'm testing this in Firefox 3.5, though I believe IE has similar problems.(something compatible with both please)
Use JS:
<input type="text" readonly="readonly" onfocus="this.blur();" />
Also, perhaps make a scrollable div instead (overflow:auto; in CSS)?
What about simply using a <div> element with a static height/width and overflow: auto? You can add additional styles to make it look like a <textarea>, if desired.
EDIT: Made swallowed tag visible. Now it makes sense.
this.blur() will make it impossible to select, I think.
<input type="text" readonly>
should help.
Is HTML 4 and XHTML 1.0 compatible. Don't know about future compatibility though (i.e. HTML 5).