Pagination issue on user upload screen

[aarkerk]

Hello,

On the user upload screen the pagination is showing weird. On other list of files view, the pages are nicely displayed next to each other. But on the upload screen every item of the pagination (arrows, pages) are displayed vertically. See screenshot: https://imgur.com/a/AvgVqEy

And can these buttons on the same page get better aligned? https://imgur.com/a/c5INmq4
It would be nice to have the Start upload button displayed behind the file field.

Phoca Download 5.0.10 on Joomla 5.2.2, with Joomlart Purity IV template.

Thanks for the help.

[christine]

Hi,

We can say more about this when we see it live. Depends on template, bootstrap, grids etc.

Possible option (custom.css or user.css):

Code: Select all

.com_phocadownload .pagination {
display: inline-block;
}

or:

Code: Select all

.com_phocadownload .pagination {
display: flex;
}

or ...?
But this is just a guess.

Kind regards
Christine

[aarkerk]

Hi Christine,
I've tried both suggestions, but they don't work, unfortunately.
This feature is restricted to registered users on the site. I have created a testuser and some dummy files so you can see for yourself. Since I'm new at the forum, I cannot DM you for the credentials. Is there another way to send this to you?

Kind regards,
Thomas

[christine]

Hi Thomas,

PN only possible after several posts from you.

It depends on the template.
ad screenshot 2: in Cassiopeia it's OK. So horizontal.
ad screenshot 1: it's like yours.

In test with Cassiopeia temporary:

3 options (all works), try either, or:

Code: Select all

li.page-item {
display: inline-grid;
}
li.page-item {
display: inline-block;
}
li.page-item {
display: inline-flex;
}

Or PD specific:

Code: Select all

.com_phocadownload .pagination li.page-item {
display: inline-block;
} 

Kind regards
Christine

[aarkerk]

This works! I used the PD specific solution, which works with all three display parameters. Awesome.

And how about the upload form (https://imgur.com/a/c5INmq4)? The start upload button is displayed below the select file button. It looks like the table class="pd-user-upload-table" is only half the width of form id="phocadownload-upload-form".
Sorry for all the question, but I'm just a novice at CSS.

Thanks.

Regards,Thomas

[christine]

Hi Thomas,

This works! I used the PD specific solution, which works with all three display parameters. Awesome.

Thats'fine.

It looks like the table class="pd-user-upload-table" ...

Yes. The "problem" ist, because in Cassiopeia it is correct:



Just try:

Code: Select all

table.pd-user-upload-table {
display: block !important;  
}

or above with: display: flex; or: display: grid;

or:

Code: Select all

form#phocadownload-upload-form {
display: inline-flex;
}

Kind regards
Christine

[aarkerk]

Hello Christine,

The suggestions didn't work. However, it made me try different combinations. What finally worked is:

Code: Select all

form#phocadownload-upload-form {
display: grid;
}

Thanks for the help.

Regards,
Thomas

[christine]

Hi Thomas,

In the second code I wanted to add: display: grid; similar to the first code

Groetjes
Christine