Center Element (extension) With new Layout

Center Element (extension) With new Layout

ITAppData@HomeStreet.comITAppData@HomeStreet.com Posts: 54Questions: 13Answers: 2
edited February 16 in Editor

I am working on converting a few pages that used the legacy "dom" to put some buttons centered between the pageLength and search.

Previously the dom was set as so:

dom: "<'row'<'col-4'l><'col-4'B><'col-md-4'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 float-right'p>>"

With layout it's much cleaner, however I'm having a hard time getting the buttons centered (they don't necessarily need to be between pageLength and search, though that would be nice)

Layout is:

            layout: {
                topStart: 'pageLength',
                top: 'buttons',
                topEnd: 'search'
            }

Tried to attach screenshots, but the button isn't working to attach images

This question has an accepted answers - jump to answer

Answers

  • ITAppData@HomeStreet.comITAppData@HomeStreet.com Posts: 54Questions: 13Answers: 2

    Looks like the image button started working again.

    Here are the screens of what I'm talking about:

    dom:

    layout:

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin
    Answer ✓

    Each position can be an array of "features" as well as just a single feature:

    layout: {
        topStart: [ 'pageLength', 'buttons' ],
        topEnd: 'search'
    }
    

    That would bring it all on to one line, although it wouldn't centre the buttons. There isn't currently a built in way to have three or more items equally spaced - however, one option might be to have them all in a single array:

    layout: {
        top: [ 'pageLength', 'buttons', 'search' ],
        topStart: null,
        topEnd: null
    }
    

    And then use flexbox in CSS to space them out. That might be the most flexible option.

    Another option might be to include pageLength in your buttons array.

    Allan

  • ITAppData@HomeStreet.comITAppData@HomeStreet.com Posts: 54Questions: 13Answers: 2

    Thanks @allan as usual :smile:

    I'll keep playing around with it and see what I can come up with

Sign In or Register to comment.