Pagination inside buttonsPanel -> alignment

Support
1

Hi,

want to to replace the simple_pagination with a pagination inside the buttonsPanel of a table.
The buttons should be on the left side and the pagination should stay on the right side
like the simplePagination does.

I cannot figure out how to do that.
The pagination works fine inside the buttonsPanel, but whatever I tried, I cannot get it aligned
to the right, like the simplePagination.

Any idea?

Regards
Roland

3

Hello,

ButtonPanel layout is based on FlowBoxLayout, so the alignment of components does not work like in HBox or VBox.
You can place HBox to the ButtonsPanel and configure the view, e.g.:

<buttonsPanel id="buttonsPanel" width="100%" alwaysVisible="true">
    <hbox width="100%" spacing="true" expand="spacer">
        <button id="createBtn" action="table.create"/>
        ...
        <label id="spacer"/>
        <pagination id="simplePagination">
            <loaderProvider loaderId="entityDl"/>
        </pagination>
    </hbox>
</buttonsPanel>

But it’s not a responsive solution. While resizing browser tab components won’t be wrapped.

1 Like
5

Hi Roman,

thx for the help.
I tried a similar thing but it did not work.
Also with your solution it looks like this:
image

Regards
Roland

6

I added a nowrap style to the pagination… no it works.

so, together with the solution from Roman it works fine for me

thx

7

Following the documentation (https://docs.jmix.io/jmix/backoffice-ui/vcl/containers/buttons-panel.html), I added the variable: $jmix-buttonspanel-flow: false; to the scss. However it has no effect.

Is still needed to put all the buttons inside an hbox inside the buttonsPanel?

@r.walde : how did you add the style nowrap to pagination?

Thanks for your help.

8

Hi,

just created a custom theme (described in the manual) and added:
.project_nowrap {
white-space: nowrap !important;
}

And that style I used for the pagination:

        <buttonsPanel id="buttonsPanel" alwaysVisible="true" width="100%" responsive="true">
                <hbox id="hbox1" width="100%" spacing="true" expand="spacer"  responsive="true">
                    <button id="createBtn" action="l1CpyTriggersTable.create"/>
                    <button id="editBtn" action="l1CpyTriggersTable.edit"/>
                    <button id="removeBtn" action="l1CpyTriggersTable.remove"/>
                    <button id="showLog"  caption="Show log"/>
                    <label id="spacer"/>
                    <pagination id="pagination" stylename="project_nowrap"
                                itemsPerPageDefaultValue="5" itemsPerPageVisible="true"
                                itemsPerPageOptions="10,20,50,100,200,500,1000, 5000,10000"
                                itemsPerPageUnlimitedOptionVisible="false">
                        <loaderProvider loaderId="l1CpyTriggersDl"/>
                    </pagination>
                </hbox>
        </buttonsPanel>
1 Like
11

Hello,

could you clarify Jmix version? I’ve tried to add:

$jmix-buttonspanel-flow: false;

to my-theme-defaults.scss file and ButtonsPanel does not wrap its content. Did you try to refresh browser page?

12

Hi Roman,

I am using Jmix 1.1.1.
Thanks for the hint. Refreshing the browser fixed the issue.

Thanks