line break in [acceptance] shortcode

  • Resolved manare

    (@manare)


    8 years, 3 months ago

    Hi.
    This is driving me mad…
    I’m trying to add the field acceptance and a line of text just beside. However, I always get a line break, no matter what I do.
    I’ve already tried all kind of combinations, added clases, id’s in order to get the acceptance tickbox and the text right in the same line…. no way…
    Am I missing something??

    I tried to force it in many ways:

    [acceptance acceptance-602]My text won't stay in the same line

    ———– OR ————
    <p>[acceptance acceptance-602]My text won't stay in the same line</p>

    ———– OR ————
    [acceptance acceptance-602 class:myclass]My text won't stay in the same line

    [CSS:]

    .myclass input{
vertical-align: baseline !important;
display: inline;
/*display: inline-block;*/
}

.myclass {
vertical-align: baseline !important;
display: inline;
/*display: inline-block;*/
}

    ———– OR ————
    <div><ul class="inline"><li>[acceptance acceptance-602]</li><li>My text won't stay in the same line</li></ul></div>

    [CSS:]

    .inline {
    display: inline;
    list-style: none;
    margin: 0;
}
.inline li {
    display: inline;
}

    Any hint or idea will be most welcome.
    Cheers,

    https://www.ads-software.com/plugins/contact-form-7/

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    Try switching to the default theme.

    Thread Starter manare

    (@manare)

    Hi Takayuki.
    I see. It does not have this problem with a default theme.
    I managed to solve it today by overriding this:

    span.wpcf7-form-control-wrap {
    display: inline-block;
    vertical-align: top;
    width: 100%;
}

    with this:

    span.wpcf7-form-control-wrap {
    display: inline;
    vertical-align: baseline;
    top: 6px;
    width: 100%;
}

    I wrote my solution here, just incase somebody else faces such problem once.
    Can’t understand though that the inline-block results in a line break with my current theme.
    Cheers,

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    I think “width: 100%” was causing the problem. And, with “display: inline”, the width property has no effect, I guess.

    This is not a good solution. If you make a change to the CSS class .wpcf7-form-control-wrap that wraps the acceptance checkbox, this changes all of the wrappers of form fields and ultimately screws up layouts.

    If you just put the input code in that also doesn’t work because then the acceptance validation does not work and the user can submit the form without checking the checkbox.

    Another solution would be to put the acceptance boxes inside of a div and give it a class, then you can target them more specifically without it making changes to all .wpcf7-form-control-wrap.

    <div class="acceptance-container">
[acceptance agreed_1] Agree to this
</div>

    Then:

    .acceptance-container .wpcf7-form-control-wrap {
    display: inline-block;
}
    • This reply was modified 7 years, 9 months ago by mikenytola.
    • This reply was modified 7 years, 9 months ago by mikenytola.

    @mikenytola

    I have done what you are suggesting. And it seems to work for the desktop version. But on the mobile version the acceptance box disappears and only the text is there….you have an idea to fix it?

    This works for me (for desktops):

    <label style="width: 100%">
<span style="width: 5%;float: left;">[acceptance acceptance-xxx]</span><span>&nbsp;&nbsp;I have read and agree&nbsp;<a href="https://website.com/privacy-policy/" target="_blank" style="color: blue;">the privacy policy</a></span>
</label>

    Note: Do not add any space.

    Not for me :/

    Still not inline…

    https://www2.pic-upload.de/img/33011551/INLINE.png

    Try to make a screenshot, with the tool to “inspect element” from the browser, and thus we can see the html code that has been generated…

    I have to adapt the code depending on the wordpress template. Even in some templates, I do not have to add anything.

    Here you go ??

    https://www2.pic-upload.de/img/33011773/p1.png

    This is in the Contac Formular:
    <div class="acceptance-container"> [acceptance agreed_1] TEXT.</div>

    This in my CSS:

    .acceptance-container .wpcf7-form-control-wrap {
    display: inline-block;
    top: 15px;
    width: 8%;
}

    My solution is not so elegant. I implement styles directly into the element, trying not to affect the plugin’s own styles.

    The whole code is wrapped inside the label tag, to which I force the width of 100%. And then I just added 2 span. One for the checkbox and one for the informational text, in order to keep inline.

    This solution is not useful in all cases, as it depends on the theme I am using. I really have to play until all the pieces fit as I need them.

    I’m sorry, but I do not know how I can help you. Regards.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘line break in [acceptance] shortcode’ is closed to new replies.