I am trying the below solution but it is not working for me. I am getting a line break after the single line field. any help is greatly appreciated.
#q48, #q49 {float:left;padding-left:1px;padding-right:3px;}
#q49 {min-width:180px;width:180px;}
#q49 .cf-field, #q49 input {width:100%}
#q49 .cf-label {display: none;}
Jason is right about the width for inline-block. However, to have your text wrap around, try the above. Hope this helps!
That gives me another idea.
You could put all the text into a single Custom HTML, then add a span element in between the "I," and the rest of the text.
something like,
<p>I, <span class="spacer"></span> have been notified that the following text is only here for testing purposes and has no real meaning. The purpose of this is to only demonstrate the viability of overlaying a field onto the text.</p>
NOTE: I just put a space on each side of the span to give the field room on either side.
Next, set the span width equal to the width of the field and put it immediately after the input and use absolute position to overlay the input field.
In the following example, I added a class called "inlineField" to the input field.
Here is the CSS I used,
.spacer {
width: 180px;
display:inline-block;
}
.inlineField .cf-label {
display:none;
}
.inlineField,
.inlineField .cf-field,
.inlineField input {
width:180px;
padding:0 !important;
}
.inlineField {
position:absolute;
margin-left:21px;
}
The nice part is that it should still work well even if the page width changes.
Hello Jason,
This is what I've been looking for. Great answer. But I'm missing something. My field is ending up below my html block.
I'm using the following CSS:
.spacer {
width: 180px;
display: inline-block;
}
.inlineField .cf-label {
display: none;
}
.inlineField,
.inlineField cf-field,
.inlineField input {
width: 180px;
padding: 0 !important;
}
.inlineField {
position: absolute;
margin-left: 21px;
}
and have assigned the class of inlineField to the single line field which is directly below the html.
Can you tell what I am missing?
Thank You
Lloyd
You're changing the width of the fields, but not the parent container.
The display inline attribute is likely being applied, but the q48, q49 and q50 elements still fill up the entire width so each "row" is filled by a single element.
To make display:inline-block work, you'll need to set a width for those elements to give the inline blocks room to fit next to each other.
thank you both!