Plcaeholder removing whitespace between controls
-
I have a couple of placeholders in a form to hide / show fields depending on a boolean. My form controls are all laid out like the following, each contol is on it's own line and when output as html (afaik) should still be on it's own line.
School (if applicable):
I have found however when the controls in the placeholder are rendered they all squashed up with no whitespace in betweeen them. It seems the placeholder is removing the whitespace. Is there any way to stop this.
-
I have a couple of placeholders in a form to hide / show fields depending on a boolean. My form controls are all laid out like the following, each contol is on it's own line and when output as html (afaik) should still be on it's own line.
School (if applicable):
I have found however when the controls in the placeholder are rendered they all squashed up with no whitespace in betweeen them. It seems the placeholder is removing the whitespace. Is there any way to stop this.
It's not the placeholder - in HTML, any sequence of whitespace characters (including line-breaks) is usually treated as a single space. http://www-sul.stanford.edu/tools/tutorials/html2.0/whitespace.html[^] If you want each control to render on a new line, you'll need to insert an HTML line-break between the lines:
Line 1<br />
Line 2<br />
Line 3
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
-
It's not the placeholder - in HTML, any sequence of whitespace characters (including line-breaks) is usually treated as a single space. http://www-sul.stanford.edu/tools/tutorials/html2.0/whitespace.html[^] If you want each control to render on a new line, you'll need to insert an HTML line-break between the lines:
Line 1<br />
Line 2<br />
Line 3
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
Sorry I haven't explained what I mean properly. I don't want the controls to render on a new line. I would like the whitespace kept in the html output so it gives that single space. I've added the html below to better explain. This is what the controls in the placeholder output like, no whitespace between them even though there is whitespace / line breaks in the ASCX files as shown in my original post.
<label for="ContentPlaceHolderDefault_MainContent_MainContent_ContactForm_18_School" id="ContentPlaceHolderDefault_MainContent_MainContent_ContactForm_18_lblSchool">School (if applicable):</label><input name="ctl00$ctl00$ctl00$ctl00$ContentPlaceHolderDefault$MainContent$MainContent$ContactForm_18$School" type="text" maxlength="50" id="ContentPlaceHolderDefault_MainContent_MainContent_ContactForm_18_School" />* required* invalid
-
Sorry I haven't explained what I mean properly. I don't want the controls to render on a new line. I would like the whitespace kept in the html output so it gives that single space. I've added the html below to better explain. This is what the controls in the placeholder output like, no whitespace between them even though there is whitespace / line breaks in the ASCX files as shown in my original post.
<label for="ContentPlaceHolderDefault_MainContent_MainContent_ContactForm_18_School" id="ContentPlaceHolderDefault_MainContent_MainContent_ContactForm_18_lblSchool">School (if applicable):</label><input name="ctl00$ctl00$ctl00$ctl00$ContentPlaceHolderDefault$MainContent$MainContent$ContactForm_18$School" type="text" maxlength="50" id="ContentPlaceHolderDefault_MainContent_MainContent_ContactForm_18_School" />* required* invalid
The markup below is the html encoding for a space char, you can use those to create sort of a shim in between things.
" " Well, I having trouble with getting it to show, as you can see, it's invisible. & nbsp; Take the space out between the ampersand and the n [edit] Now I'm confused, you don't want the space now, perhaps because you placed the span tags or labels inside the p element, all the controls may be justified in alignment, creating spaces in between. So replace the p element with the div element, so they display inline.
