Note, this is not just another "margin-right" post. Select2 seems to be screwing me over.
I have a form that looks like this:
And this is what the same formatting looks like with an error — the email address error is formatted correctly.
Edit: Revisiting this question, it's not clear to me how the second image is related. I think the point was that I could control whether the error message displayed next to or under the form item but not the button. This was years ago at this point so I don't quite remember, but I wanted to add this disclaimer.
Obviously the New button should be next to the patient dropdown.
Here's the problem:
When you tell Select2 to do its job on a select, it hides that element and adds several of its own nested elements to replace it. However, any classes you place on the select do not get transferred to these generated elements.
I've set margin-right:100% for .select2-container, which is what handles the spacing. This is to avoid the behavior in the second screenshot. I don't know of any other way to force the error message onto the next line.
If I set margin-right:0px, the button goes next to the dropdown, like I want, but then the error message also sits next to it (pictured above).
HTML source for bottom picture: (I'm posting the source for the second picture because it shows both what I want and what I don't want):
<div class="form-group">
<label class="control-label col-md-2" for="Email">Email Address</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-regex="Invalid email format" data-val-regex-pattern=".*" data-val-required="The Email Address field is required." id="Email" name="Email" type="email" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span>
</div>
</div>
This code markup is directly below that. The select2 stuff doesn't show up in view-source, hence the screenshot.
Fix that I'd like to avoid:
I could set margin-right:0px, then wrap the dozens of other select boxes in a div that has margin-right:100%, but that would be a raging pain in the butt.
Attempted solution that didn't work:
Setting margin-left:100% or margin-left:600px, etc on the error class.
Summary:
I need to put the New button directly next to the Select a patient... dropdown, but I don't have access to the style for the dropdown.
If it makes any difference, I'm using ASP.NET MVC with Bootstrap.
Your span is a inline element - An inline element has no line break before or after it, and it tolerates HTML elements next to it.
What I did was made it an inline-block element - An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element
So as default it will be broken from it's line and align next line properly. If. It's still in the same line. In inline-block element we can set width and height as in the case of inline element it's not possible.
Tip: Always use inline-block element for your wrappers for better alignment and wrapping it's children's properly.
Related
I saw the code below, in one of my studying codes:
<form>
<label for="firstName">First Name:(click here cause cursor go inside the input box)</label>
<input id="firstName" type="text">
</form>
I find that the pair of for and id attributes connect the label and input element in the way that the cursor goes inside the input box automatically by clicking on label.
Which other pair of HTML elements can be connected to each other by the for and id attributes set? If it works for many other HTML elements, is there any list or source of the default action occurred by connecting one of them in each pair element?
According to w3school, we can use for with <label> and <output> element. Here is the link.
Adding a for is important, even if they are adjacent. I seem to recall hearing that some screen readers for the visually impaired have problems otherwise. So if you want to be friendly to those who are perhaps using alternate browsers/screen readers, use this method.
I am new to bootstrap forms. I see that the UI is different when the input is nested inside a label. Can someone explain me why?
Here is the code snippet
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label>userName:
<input class="form-control col-sm-5" formControlName="userName" type="text">
</label>
</div>
<div class="form-group">
<label>userName:</label>
<input class="form-control col-sm-5" formControlName="userName" type="text">
</div>
</form>
My page is rendered as shown in an image. My question is why does the input element appear shorter in the first and longer in the second row?
it`s according HTML Way of treating Codes as Block and Inline elements.
A block-level element always starts on a new line.
A block-level element always takes up the full width available (stretches out to the left and right as far as it can).
A block level element has a top and a bottom margin, whereas an inline element does not.
An inline element does not start on a new line.
An inline element only takes up as much width as necessary.
Source 1 Source 2
and the way bootstrap treat it according to flexbox theory
The only difference between this fiddle and this other version of the fiddle is that the 2nd one has </label><label for="address_zip" class="zip"> without a line break after the closing </label> tag.
<label for="address_state" class="state">
<span>State</span><input name="address_state" type="text" placeholder="CA" required="" class="field is-empty">
</label><label for="address_zip" class="zip">
<span>ZIP</span><input name="address_zip" type="text" placeholder="94107" required="" class="field is-empty">
</label>
I've experienced similar weirdness before. Line breaks are tricky.
So, I figured "I'll live with the fact that the HTML won't have a new line after the closing label tag, even though that looks sloppy."
However, then I noticed that a nearly identical webpage I'd coded (with just different CSS) seems to be immune from this line break problem.
Why?
Your form is basically one long line, since there are no block sections such as div. You added a display: flex to each label, but not to fieldset, so that each label is on its own row.
When you add a break line between your labels, that break line is added to the HTML view as a space, which makes it too long to fit into one row.
Here is how the code should look like:
<div>
<label for="cardholder-name"> Name </label
<input name="cardholder-name" type="text" placeholder="Jenny Rosen" class="question field is-empty personHead">
</div>
You might have to redo some css to align it properly, but this is the proper format.
I am looking for some guidance on how to write an Xpath query to verify that a specific checkbox is checked (the divs nested in the panel-body div are checkboxes). What I tried to do is make sure that a checkbox div with the corresponding label containing the text "Evaluations" contains the class "checked". Here is my HTML:
<div class="panel-body">
<div class="checkradios-checkbox checkradios access icon-checkradios-checkmark checked">
<input id="access_conferences" class="checkradios access" name="access_conferences" value="true" checked="" type="checkbox">
</div>
<label for="access_conferences">Conferences</label>
<br>
<div class="checkradios-checkbox checkradios access icon-checkradios-checkmark checked">
<input id="access_evaluations_viewing" class="checkradios access" name="access_evaluations_viewing" value="true" checked="" type="checkbox">
</div>
<label for="access_evaluations_viewing">Evaluations - Viewing</label>
<br>
</div>
And here is my Xpath: //label[#for="access_evaluations_viewing"]/preceding::div[#class="checkradios-checkbox checkradios access icon-checkradios-checkmark checked"]
The problem is my test case is passing even when that box is unchecked, which tells me my xpath is grabbing other elements. Some of the other checkboxes in the panel-body div are also going to be checked, so what I think may be happening is my Xpath is checking for the next preceding div with a class of "checked", regardless of the text that div's label contains.
Edit: as was suggested, I have tried referencing the div preceding the label. The problem with doing this is that not every box in the panel-body is going to necessarily be checked. I only need to confirm that those associated with "Evaluations" are checked. Referencing the div above the label fails when one or more of the boxes other than "Evaluations" is unchecked. This is my revised Xpath:
//label[#for="access_evaluations_viewing"]/preceding-sibling::div[contains(#class, "unchecked")]
I switched to doing the negative comparison because contains(#class, "checked") will pass for both checked and unchecked boxes.
If you need to match label that contains "Evaluations" text you may try
//label[#for="access_evaluations_viewing"][contains(text(), "Evaluations")]/preceding::div[#class="checkradios-checkbox checkradios access icon-checkradios-checkmark checked"]
These 4 elements are siblings, so when you at the Label, you must go to the Div above to get the checkbox element.
Try this XPath:
//div[#class='panel-body']/label[contains(.,'Evaluations')]/preceding-sibling::div[1]
The HTML tag <label> may not contain block elements by definition. The following code is wrong in HTML 4, although ist works in most browsers:
<input type="radio" value="A" name="ABC" id="ABC_A">
<label for="ABC_A">
<p>Option A</p>
<p>Having a good time with HTML.</p>
</label>
I could make a block element from the <label> via CSS, but this still remains invalid HTML code. And in some instances, it makes sense to format one label into multiple paragraphs.
My question is: Is there a valid way in HTML to use block elements as a label for an input?
Possible workarounds, that I have considered inappropriate are:
Creating one label within each paragraph (why should one input have a dozend labels - and which one should a screen reader read, then?)
Using JavaScript to have the input "clicked" when the block element is clicked. I am searching for a solution that will work without scripting (and that is supported by vommon screen readers)
And ideas? Thank you!