Forum Stats

  • 3,728,127 Users
  • 2,245,554 Discussions
  • 7,853,348 Comments

Discussions

How do we stack the the buttons for a responsive design - Next, Back, Exit Buttons

Hi,

We are trying to stack buttons in a column.

It seems that OPA does not provide styling extensions to achieve this.

Parent Div element containing these buttons is not available for styling:


Best Answers

Answers

  • Matt_J
    Matt_J Member Posts: 11 Red Ribbon

    You can use class="opa-submit" or "opa-back" for the submit and back buttons.

  • User_AOYHB
    User_AOYHB Member Posts: 31 Red Ribbon

    @Matt_J class="opa-submit" or "opa-back" these classes allow us to modify the styling but doesn't allow us to stack the buttons which is driven by the parent div.

  • Richard Napier
    Richard Napier Member Posts: 180 Silver Badge

    Hi.

    This might not be appropriate for your situation, but if you apply flex-container styling to the parent DIV of the Restart button, then you could move the other buttons (append) to the same container,with flex-direction is set to column you have the means to create a stack of buttons similar to what you are asking about.

    This will be a control extension rather than a styling extension, and you probably would end up with 4 control extensions one to handle each of the buttons to avoid the update event redraw (re)placing the buttons back in the original locations, but it might take you part of the way to where you want to be.

    Hope that helps.

    Richard

  • User_AOYHB
    User_AOYHB Member Posts: 31 Red Ribbon

    Thanks @RichardNapier . It does help, only question is how were you able to change the styling of the Parent DIV of restart button?

  • Richard Napier
    Richard Napier Member Posts: 180 Silver Badge
    Accepted Answer

    Hi User_AOYHB

    In the JavaScript extension (and please bear in mind this was just me in my office making a quick demo) for the buttons, I used

    $(".opa-restart").parent().addClass("flex-container")

    At the very start of the process, to apply the class to the container element. Then I was able to append the other buttons to it and get the desired effect.

    Hope that helps.

    Richard

  • User_AOYHB
    User_AOYHB Member Posts: 31 Red Ribbon
    Accepted Answer
  • Richard Napier
    Richard Napier Member Posts: 180 Silver Badge

    Hi.

    No problem.

    You've accidentally marked your own message as the Answer by accident however. Would you mind marking my reply as the accepted answer, so other people can find it?

    Thanks!

Sign In or Register to comment.