This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Tagged: , ,

Columns within Accordian Toggle not aligning

  • Creator
    Topic
  • January 12, 2016 at 7:49 pm #24627
    scottman
    Member

    When I add a column shortcode in an toggle the content of the n+1 column begins 1 line down from column n. Is there a way to have these stay aligned within a toggle?

    The same shortcode outside of the toggle has the proper alignment in each column. To verify, try using the standard 3 column shortcode within a toggle and notice that the text for each column begins one line down from the previous one.

    • This topic was modified 6 years, 7 months ago by scottman.
  • Creator
    Topic
, ,
Viewing 8 replies - 1 through 8 (of 8 total)
  • Author
    Replies
  • January 12, 2016 at 10:31 pm #24629
    Jason Bobich
    Keymaster

    Hello,

    Unfortunately, these shortcodes were not built to be nested within each other. You can use custom HTML, if you like, though.

    [raw]
[toggle title="Title here..."]
<div class="column grid_4">Column 1…</div>
<div class="column grid_4">Column 2…</div>
<div class="column grid_4 last">Column 3…</div>
[/toggle]
[/raw]
    January 13, 2016 at 4:10 pm #24634
    scottman
    Member

    Thanks that worked!

    January 26, 2016 at 6:06 pm #24805
    scottman
    Member

    What is the best way to center a [button] on a page? I have been playing with the [one_third] type shortcodes and they exhibit the same problems as the toggle (the button in n+1 column is n+1 lines below the previous).

    Is there an “align=center” type property for the [button]? If there was such a property I could just put a button on each line and have them centered. This would flow well across various screen sizes.

    Example of misaligned items below:

    [one_half]
    [button color=”default” link=”https://clients.mindbodyonline.com/classic/ws?studioid=22488&stype=40&prodId=137&#8243; size=”small” align=”center” target=”_blank” block=”true”]Once a week attendance – $60[/button]
    [/one_half]
    [one_half last]
    [button color=”default” link=”https://clients.mindbodyonline.com/classic/ws?studioid=22488&stype=40&prodId=136&#8243; size=”small” target=”_blank” block=”true”]Unlimited weekly attendance – $75[/button]
    [/one_half]

    January 26, 2016 at 9:30 pm #24810
    Jason Bobich
    Keymaster

    As inline-block elements, the buttons can be centered based on the text alignment of the container. One trick is that you can add the class text-center to the columns. Also, your buttons can’t have block="true" obviously.

    [one_half class="text-center"]
[button color="default" link="https://clients.mindbodyonline.com/classic/ws?studioid=22488&stype=40&prodId=137" size="small" target="_blank"]Once a week attendance – $60[/button]
[/one_half]
[one_half class="text-center" last]
[button color="default" link="https://clients.mindbodyonline.com/classic/ws?studioid=22488&stype=40&prodId=136" size="small" target="_blank"]Unlimited weekly attendance – $75[/button]
[/one_half]
    January 27, 2016 at 6:14 pm #24820
    scottman
    Member

    Thanks Jason that class is a good tool to center the button in the column but I still have the issue with the buttons not aligning at the top. Try this code and see if you have the same results. The second button is one line below the first.

    [one_half class=”text-center”]
    [button color=”default” link=”https://clients.mindbodyonline.com/classic/ws?studioid=22488&stype=40&prodId=137&#8243; size=”medium” target=”_blank” block=”false”]Youth once a week – $60[/button]
    [/one_half]
    [one_half last class=”text-center”]
    [button color=”default” link=”https://clients.mindbodyonline.com/classic/ws?studioid=22488&stype=40&prodId=136&#8243; size=”medium” target=”_blank” block=”false”]Youth unlimited weekly – $75[/button]
    [/one_half]

    January 27, 2016 at 7:30 pm #24821
    Jason Bobich
    Keymaster

    Are you wrapping everything in the [raw] shortcode?

    January 27, 2016 at 8:31 pm #24822
    scottman
    Member

    No I haven’t tried to wrap the section in [raw]. Just tried it and it worked! What settings does [raw] override?

    [raw]
    [one_half class=”text-center”]
    [button color=”default” link=”https://clients.mindbodyonline.com/classic/ws?studioid=22488&stype=40&prodId=137&#8243; size=”medium” target=”_blank” block=”true”]Youth once a week – $60[/button]
    [/one_half]
    [one_half last class=”text-center”]
    [button color=”default” link=”https://clients.mindbodyonline.com/classic/ws?studioid=22488&stype=40&prodId=136&#8243; size=”medium” target=”_blank” block=”true”]Youth unlimited weekly – $75[/button]
    [/one_half]
    [/raw]

    January 27, 2016 at 9:03 pm #24823
    Jason Bobich
    Keymaster

    It makes it so WordPress doesn’t put automatic formatting (i.e. inserting line breaks) around that content. Anytime you use any kind of complex shortcode where several of them are stacked together, you should wrap it in the [raw] shortcode.

    And for columns, if you need auto formatting within the columns themselves, you can do it like this — 

    [raw]
[one_half wpautop="true"]
Paragraph 1...

Paragraph 2...
[/one_half]
[one_half wpautop="true" last]
Paragraph 1...

Paragraph 2...
[/one_half]
[/raw]
  • Author
    Replies
Viewing 8 replies - 1 through 8 (of 8 total)
  • The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.