My form is formatted by a 2 column table.
In the left column I use a <label>
and in the right column a <input type="text">
.
Some of the input boxes are required.
So the requirement is that for all the compulsary inputs, there should be a red asterisk next to the label.
However a label is designed so that it is always followed by a line break, so the asterisk automatically goes underneath.
What is the best way of making sure this does not happen, and the asterisk goes in the correct place next to the label?
I do not think the <div float="left>
option would work in a table.
This is the code as requested;
<tr>
<td class="leftCell"><span style="white-space: nowrap;"><label for="Subcontractor_CompanyName">Company</label><span style="display: inline;" class="errorHighlight">*</span></span></td>
<td class="rightCell"><input style="width: 300px;" id="Subcontractor_CompanyName" name="Subcontractor.CompanyName" value="096 club" type="text" data-val-required="Must enter the Company Name" data-val="true">
<span class="field-validation-valid" data-valmsg-replace="false" data-valmsg-for="Subcontractor.CompanyName">*</span></td>
</tr>
My attempt at using a <span style="white-space: nowrap;">
failed.
If you have no margin or padding applied and you still have this space, you could either use display: flex on the parent or display: block/inline-block on the label to get rid of these. Both label and input are display: inline , per default, so margin and padding bottom or top should not affect them.
If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).
Answers. You can use string. replace() method on the string value of the text box which will show line breaks on the web page.
Remove <br> Line Break with CSS and Replace with Space To do this we'll use CSS to change the content of the br tag which will prevent it from making a line break. Then we'll also add content using the :after pseudo-element. That will ensure the <br> tag is replaced with a space.
Or, if they have given the <label>
as block, you can do this way:
label {display: inline;}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With