Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 17, 2016 at 12:18 pm #633670
    indigotin

    I have been trying to get inline buttons within an accordion toggle, but haven’t had any success. Each button appears on a new line. I have been using the following code, which works if I put it in a code block element:

    <div class=”outer”>
    <div class=”inner”>
    <button id=”display” class=”action_button”>Show</button>
    <button id=”hide” class=”action_button”>Hide</button>
    </div>
    </div>

    The corresponding css is:
    .outer
    {
    width:100%;
    text-align: center;
    padding: 10px;
    }
    .inner
    {
    display: inline-block;
    }

    I also tried this solution, which had no effect: https://kriesi.at/support/topic/enfold-buttons-next-to-each-other-within-same-columns/

    Any help would be greatly appreciated.

    Thanks

    • This topic was modified 8 years, 7 months ago by indigotin.
    May 17, 2016 at 12:37 pm #633686
    Andy

    Hey indigotin,

    Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)

    Best regards,
    Andy

    May 17, 2016 at 12:53 pm #633709
    indigotin

    Andy,

    Thanks for quick response. Details in the link.

    Thanks

    May 18, 2016 at 6:35 am #634183
    Rikard

    Hi,

    You have a line break tag in between the elements, try to remove it or add this to your Quick CSS:

    #display br {
display:none !important;
}

    Regards,
    Rikard

    May 18, 2016 at 9:18 am #634241
    indigotin

    Rikard,

    Thanks for spotting this. I have no idea how the line break tag is appearing as my html does not contain a line break tag:

    <div class=”outer”>
    <div class=”inner”>
    <button id=”display” class=”action_button”>Show</button>
    <button id=”hide” class=”action_button”>Hide</button>
    </div>
    </div>

    I assume that the <br> tag being put in by the theme somehow. Is there some way to stop it doing that?

    The same html does not have a <br> tag added when used in a code block content element, so this seems to be something caused by the accordion element.

    May 18, 2016 at 1:55 pm #634445
    Andy

    Hi,

    try this code:

    .inner {
display: flex;
}

    Best regards,
    Andy

    May 18, 2016 at 5:19 pm #634665
    indigotin

    Andy,

    Thanks that works, the buttons are now inline in the accordion and in the code box. Any idea how I can put a bit of space around them so that they don’t appear stuck to each other?

    I’ve tried:

    .inner {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    }

    and also tried replacing space-between with space-around or center. All three ways center the buttons like I want, but they don’t seem to put any space between them.

    Any ideas?

    Thanks

    May 18, 2016 at 5:47 pm #634678
    indigotin

    Andy,

    I’ve solved the problem I just added a margin to my buttons.

    Thanks for your help in sorting this out.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Buttons inline in the accordion toggles’ is closed to new replies.