Problem With Cell/tablet Display
Lorna Guttormson
We have 2 problems in cell/tablet displays on our home page. The page consists of 5 sections. The 4th section has 3 columns across. The columns are 'Upcoming Events, Recent Results and Major Events. The problems :
- Only the first column (Upcoming Events) displays on cell - they do show on tablet and laptop
- That first column has a scroll bar if there are enough events currently to warrant a scroll bar within the height of the section. This scroll bar does not display on the cell or tablet so the user cannot see all the events. It does show on laptop.
Atick Eashrak Shuvo
Accepted AnswerHello,
Thank you for the detailed update.
Regarding the custom.css file: when adding CSS through Template Options → Custom Code, the styles are stored in the database and injected dynamically—they do not appear in the physical custom.css file inside templates/pitech/css/. This is expected behavior. At the moment, we do not have a dedicated help document explaining this distinction, but your observation is correct: template-injected CSS and file-based CSS are handled separately.
About the fit-content behavior: it doesn’t repeat the content; rather, it adjusts the element’s height based on the content itself. Since your goal is to keep the box a fixed size and allow the content to scroll, fit-content would not be the right solution.
If the scroll only works with very delicate gestures, that suggests a structural or CSS conflict affecting the scroll container. With the current layout, a full redesign of that section may indeed give you a cleaner and more reliable result—especially if the content list is large or interactive.
Atick Eashrak Shuvo
Accepted AnswerHello Lorna,
Sorry for the inconvenience. Please check the display now. The issue was a fixed height set for the section. This worked when three columns were displayed in a row, but on mobile, the height was insufficient to display all elements. The elements were rendering but hidden due to the height constraint. I've added some custom CSS to resolve this.
Please check and if this doesn't solve the issue, please reach out and I'll look into it more deeply.
Best regards
Lorna Guttormson
Accepted AnswerHello Atick Unfortunately, your change did not work. I cannot find the custom css you inserted - can you tell me where it is? I have checked the column, the row, the page and the template and see no new css. I do not see any change to the height of the row either.
How the events are gathered: The events and the results are gathered from an outside database through an Ajax call in a js called by a module. At any given time there may be 0 - 10 events + the link to the calendar at the end and 0-4 results + the link to all results at the end.
The effect now: very strange (although I did get this when I first started working on this page over a year ago). I have set the date to Sept. 1 for testing purposes when we had 8 events and 1 result. What is now displayed on laptop is the 8 events + calendar repeated 4 times - the last 2 have each event showing 2-3 times. On cell it is even stranger - twice the set of 8, then twice the set of 8 each repeated, then 1 set of each event 3 times! I don't think the repeats are even consistently wrong!
Display before your change: This module displays correctly on our other test system (ottawaotest.ca/testj4) so you can see what it was before your changes. It worked correctly on laptop but not on cell. Also, it has always worked well on our current site (ottawaoc.ca) where the module is placed in an article. I could attach a screen shot but don't see that option here.
Further test of your change. I changed the date in the js to today so there are no events & 3 results. It repeats a message and the calendar link 3 times on laptop, 6 times on cell. The results are similar. On cell the event module shows 5 times, the results 6 times - some of them repeating each result 2-3 times each as well. Again I could send a screenshot but...
The proper output with any date can be seen on the Events page -https://ottawaotest.ca/oocj4/events, so it does work on a SP page (any size) but not within a restricted row. I would like to keep it on the home page if there is any way around this.
Sorry, I was hoping to spare you the complexity of this. I hope I have explained it clearly.
Atick Eashrak Shuvo
Accepted AnswerPlease clear your browser and joomla cache and check again. I have added the css in you template custom.css file JRoot/templates/pitech/css/custom.css
Lorna Guttormson
Accepted AnswerI had and have again cleared my browser a number of times and cleared cache.
Interesting. I had checked the custom.css carefully in the interface but hadn't checked within file manager. In file manage JRoot/templates/pitech/css/custom.css I don't see any of the css that we have put into System/site templates/styles/pitech ->template Options->custom_code. Is there a help document that explains this?
I am not familiar with fit_content. It seems it is trying to fill whatever space there is and just keeps repeating until full? In any case, it does not seem to be a solution. We don't want the size of the box to adjust to the content..we want the content to allow a scroll bar. I did find, this morning that the cell does scroll - sort of - if you lightly touch the screen with one hand and try to move it up or down carefully with the other you might manage to see all of the list - Unless you have another idea, it looks like I need to redesign entirely!