Position of modal on button group

Position of modal on button group

zecksteinzeckstein Posts: 16Questions: 6Answers: 0

Is there a standard way to alter the positioning of the menu/pop-up that displays when clicking on a button group? Currently, the group appears to align to the left edge of its parent button and if the buttons are on the right side of the interface, it spills off the page to the right. For pop-ups (like for the SearchBuilder button) I would love to be able to position it as fixed and for the drop-down-type button groups I'd like them to drop-down to the left if possible.

This question has an accepted answers - jump to answer

Answers

  • zecksteinzeckstein Posts: 16Questions: 6Answers: 0
    edited August 2023

    Finally pinned it down with a custom class name and some jquery styling:

    $(document).on('click', '.btn-advanced-search', function() {
                setTimeout(function() {
                    // Find the closeable element within the clicked button's parent container
                    $('.btn-advanced-search').siblings('.dt-button-collection.dtb-collection-closeable').css({
                        'position': 'fixed',
                        'width': '800px',
                        'top': '100px',
                        'left': '50%',
                        'transform': 'translateX(-50%)',
                        'padding': '20px'
                    });
                }, 10); // A slight delay to ensure the collection is rendered
            });
    

    But, if there's a more "standard" way to do this, happy to know! :)

  • allanallan Posts: 62,056Questions: 1Answers: 10,173 Site admin
    Answer ✓

    You can use the collectionLayout option of any button that extends the collection button type, which you can see in action here.

    Unfortunately, SearchBuilder's button doesn't extend that button type - it calls the button().popover() method directly:

            this.popover(config._searchBuilder.getNode(), {
                align: 'container',
                span: 'container'
            });
    

    Perhaps I should make a way for the SearchBuilder button to specify those options... I can look into that if it would be useful for you.

    Allan

  • zecksteinzeckstein Posts: 16Questions: 6Answers: 0

    Nice, I didn't know about collection layout! I think being able to specify those options within SearchBuilder would be grand. That said, I did end up with a working solution, so don't rush for me. :)

  • allanallan Posts: 62,056Questions: 1Answers: 10,173 Site admin

    Awesome - good to hear you've got a working solution!

    Allan

  • ruleboy21ruleboy21 Posts: 14Questions: 3Answers: 0

    I wasted 3 good hours trying to figure out why collectionLayout wasn't working for searchBuilder button. @allan please were you able to look into this? I think been able to at least specify collectionLayout will be very handy.

    Thanks

  • allanallan Posts: 62,056Questions: 1Answers: 10,173 Site admin

    Sorry to hear this cost you some time. No, I haven't yet made any changes for this. It does seem like a good idea though. Added to the list.

    Allan

  • ruleboy21ruleboy21 Posts: 14Questions: 3Answers: 0

    Great. Thanks

Sign In or Register to comment.