Button groups not inline

  • Hello.
    Button groups as shown in Customizr documentation, are not displaying inline (they are shown one under another):

    <div class="btn-group">
  <button class="btn">Left</button>
  <button class="btn">Middle</button>
  <button class="btn">Right</button>
</div>

    If I add style="display: inline-flex;" into div group, they appear inline

    Is there any customization in the theme to get it “out of the box”; or is it any bug?

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)

  • Probably a clash with one of your plugins. It does work on a fresh install.

    Site link would help, but also try the Plugin Test. Deactivate all your plugins, test. If OK, then re-Activate each Plugin one-by-one to find the culprit. Let us know which one if I’m right.

    I just tried this on my child theme and on Customizr parent. I then looked at it with Firebug.

    It worked correctly in my child theme, but not in the parent.

    In my child theme, I have switched off wpautop, which is an irritating, sorry, highly-useful part of WordPress that adds paragraphs to all your text if you forget to. (It also adds lots of spurious ones too, which is why I removed it.)

    Sure enough, in Firebug I see that it is automatically introducing a <br> between your <button>s. You can get around this by changing your code to:

    <div class="btn-group">
  <button class="btn">Left</button><button class="btn">Middle</button><button class="btn">Right</button>
</div>

    Thread Starter alf_

    (@alf_)

    Thank you ElectricFeet!!
    With the Firefox built in inspector, <br>s are not visible, but with Firebug I can see them, and writing the code in one line the buttons are shown as expected.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Button groups not inline’ is closed to new replies.