Position of modal on button group

zeckstein

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.

zeckstein

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!

allan

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

zeckstein

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.

allan

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

Allan

ruleboy21

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

allan

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

ruleboy21

Great. Thanks