Vertical pagination if I use bootstrap hover in table style

[Marper63]

Hi,
selecting in “Basic Details”, “Display Method = Paginated” and
in “Types”, “Table Style = Bootstrap Hover” the page numbers are shown vertically. The correct pagination is only possible with “table style” equal to “standard”. Is it a bug? Can the problem be corrected?
Thank you

[Michael Gilkes]

@Marper63. Thanks for posting. Could you provide a link to a listing that shows the vertical page numbering? I just tested it, and I didn’t get didn’t get any issues.

It is possible that there is a style conflict with your site’s template CSS. Have you checked your browser’s DOM Inspector to see what is affecting the css?

[Marper63]

Hi micheal,
thanks for the prompt reply, I think that are you are right. Unfortunately I can’t understand what influences the css; anyway this is the page:

https://www.alloggisalento.it/cmmsite/index.php/component/sppagebuilder/?view=page&id=145

The site is under construction so I created an ad hoc page to be able to verify the problem.
If you browse through the menu you could accidentally access the identical page that I am programming and therefore encounter false parameters.
So I suggest to work only to the url written above.

Thank you
Ciao

[Michael Gilkes]

@marper63. Thanks for continuing the conversation.

OK, I had a look at your site and compared by test site with yours. Apparently, the css code to style the pagination, which should have been part of bootstrap, is not really there. I might have to add it to a later release to avoid this issue for others. However, to solve your issue, add the following css code to your template css file:

CSS

.pagination { margin: 18px 0; } .pagination ul { display: inline-block; margin-left: 0; margin-bottom: 0; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); } .pagination ul > li { display: inline; } .pagination ul > li > a, .pagination ul > li > span { float: left; padding: 4px 12px; line-height: 18px; text-decoration: none; background-color: #fff; border: 1px solid #ddd; border-left-width: 0; } .pagination ul > li > a:hover, .pagination ul > li > a:focus, .pagination ul > .active > a, .pagination ul > .active > span { background-color: #f5f5f5; } .pagination ul > .active > a, .pagination ul > .active > span { color: #999; cursor: default; } .pagination ul > .disabled > span, .pagination ul > .disabled > a, .pagination ul > .disabled > a:hover, .pagination ul > .disabled > a:focus { color: #999; background-color: transparent; cursor: default; } .pagination ul > li:first-child > a, .pagination ul > li:first-child > span { border-left-width: 1px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .pagination ul > li:last-child > a, .pagination ul > li:last-child > span { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61

.pagination {   margin: 18px 0; }   .pagination ul {   display: inline-block;   margin-left: 0;   margin-bottom: 0;   border-radius: 4px;   box-shadow: 0 1px 2px rgba(0,0,0,0.05); }   .pagination ul > li { display: inline; }   .pagination ul > li > a, .pagination ul > li > span {   float: left;   padding: 4px 12px;   line-height: 18px;   text-decoration: none;   background-color: #fff;   border: 1px solid #ddd;   border-left-width: 0; }   .pagination ul > li > a:hover, .pagination ul > li > a:focus, .pagination ul > .active > a, .pagination ul > .active > span {   background-color: #f5f5f5; }   .pagination ul > .active > a, .pagination ul > .active > span {   color: #999;   cursor: default; }   .pagination ul > .disabled > span, .pagination ul > .disabled > a, .pagination ul > .disabled > a:hover, .pagination ul > .disabled > a:focus {   color: #999;   background-color: transparent;   cursor: default; }   .pagination ul > li:first-child > a, .pagination ul > li:first-child > span {   border-left-width: 1px;   border-top-left-radius: 4px;   border-bottom-left-radius: 4px; }   .pagination ul > li:last-child > a, .pagination ul > li:last-child > span {   border-top-right-radius: 4px;   border-bottom-right-radius: 4px; }

• This reply was modified 3 years, 10 months ago by Michael Gilkes.
• This reply was modified 3 years, 10 months ago by Michael Gilkes.
• This reply was modified 3 years, 10 months ago by Michael Gilkes.

[Marper63]

With your code entered everything works perfectly.
Thank you very much for the prompt reply.

[Author]

Posts