Bootstrap OPAC: Current charges not aligned properly on mobile device
Bug #1928005 reported by
Terran McCanna
This bug affects 1 person
Affects | Status | Importance | Assigned to | Milestone | |
---|---|---|---|---|---|
Evergreen |
Fix Released
|
Medium
|
Unassigned | ||
3.6 |
Fix Released
|
Medium
|
Unassigned |
Bug Description
In 3.6.1 with Bootstrap OPAC:
The tables listing the current charges do not align up properly when 1) The window is too narrow (like on a mobile device) and 2) The library does *not* take online credit card payments.
See attached screenshot for example.
Changed in evergreen: | |
status: | New → Confirmed |
Changed in evergreen: | |
milestone: | 3.6.4 → 3.7.2 |
Changed in evergreen: | |
status: | Fix Committed → Fix Released |
To post a comment you must log in.
This issue is caused from column headers being defined in CSS that only appear when the table is collapsed on smallish screens, and the table is presented in a vertical format. The CSS is as follows:
.chargesTable td:nth- of-type( 1):before { content: "Select"; display: flex; } of-type( 2):before { content: "Owed"; display: flex; } of-type( 3):before { content: "Billing Type"; display: flex;}
.chargesTable td:nth-
.chargesTable td:nth-
It happens when Credit Card payment is not turned on because the 'select' column does not exist.
I don't think that this table has enough columns displayed to worry about presenting it in a vertical format.
The attached patch removes the class names from the table that render it in a vertical format and wraps the table in a div with 'table-responsive' class. An image of the results is attached.
Also, if column names are defined in CSS, do they get translated? Something to ask Eva to look at on her small screens.
A proposed patch is at https:/ /git.evergreen- ils.org/ ?p=working/ Evergreen. git;a=shortlog; h=refs/ heads/user/ gcollum/ lp1928005- Bootstrap- opac-charges- not-aligned