Title component not visible in "Pages" (desktop) display?

[Miroslav_Madaric]

Your answer in the style “this is not a bug, this is the feature” confuses me further! Breadcrumb component is shown in large screen view, but this doesn’t solve my problem: with screen title I have frozen information on thescreen top also during the scrolling. In addition breadcrumb solution is the dirty one because in mobile view two same texts appear on the top.

So, forget breadcrumbs, back to the bug: how is it supposed to be correct functionality when the screen title is shown in one view and not shown in another view of the same user screen? I understand that the buttons and other elements are displayed differently, but they are always there (e.g. menue icons in heading in large screen and in the bottom for mobile). But there is absolutely no reason supposed to suppress the screen title display in large view!

[Miroslav_Madaric]

“works as designed” doesn’t comply with best practice.
I never stated that it is something new, I bumped to it tryng to have frozen content on the screen while scrolling.
Why on earth the screen title appears on mobile and NOT on large screen?
Here I can partially accept the position “this is not a programming bug”. If this is SUPPOSED to work like that, this is a design bug. But stil a bug!

[Miroslav_Madaric]

here the comparisom face2face mobile and large screen views on desktop:

So, the line in red I miss in larger window. Instead, there is a heading in green, which is ok instead of tab icons in mobile, but screen title is definitely missing!
If this is intentionally, the purpose is unclear to me!

[Miroslav_Madaric]

I explained the bug in detail below. I can’t access to the support ticket because I am on NGO paid plan!?

[Jeff_Hager]

I understand what you are saying. My initial understanding was that you were trying to use a Title component, which you have listed as one of your components, but it is now apparent that you are not actually using that component to display anything. If the Title Component was the issue, then I would definitely say it’s a bug. However, what we are arguing about is a design decision determined by Glide. Yes, I’ve fought with that page title on occasion, trying to get things to look good on both desktop and mobile devices, but I have always found suitable alternatives. Is it a bug…no. Is it an undesirable design decision… probably, but that largely depends on each person’s opinion. Some people may actually prefer that it works that way.

As fellow users just like you, there isn’t a whole lot we can do other than to offer alternatives. This issue is something that needs to be taken up with Glide or submitted as a feature request. As a moderator, I’ve done all I can by escalated the post, but it’s ultimately up to Glide if they choose to act on it.

[Himaladin]

Yes, it’s a matter of how to respond to responsive design. Since the nav-tab is moved down on mobile, the void at the top is filled with the title. If combined with the title component, several display models will appear to respond to it that can be selected. Maybe you can add your own text at the very top of the screen, but you can’t put it in the navigation position if it is not supported by CSS.

[Miroslav_Madaric]

Tnx a lot! Forget Title component, I mentioned it due to my confusion.
Design decision by Glide: “Do not display screen title in page view!”.

In general, I have really no problem with programming bugs, they will be not denied and will be probably fixed. As experienced developer, I have huge problem with lousy “design decisions”, like this one. The outcome is much worse compared to programming bugs, because of the strong denial approach.

Please do have patience and think over: what is the PURPOSE of “design decision” not to show screen title in large screen view? Here the AI opinion on this issue:

" Limitations of the Title in Glide Pages (Desktop Version):

• In the mobile version of Glide apps, the title is usually always visible at the top, which is useful for displaying important information like a timer or status.
• In Glide Pages (desktop view), the title might disappear or behave differently, which could be why you’re unable to use the Title component in the same way as in the mobile version."
  ???

[Miroslav_Madaric]

Tnx for your comment. It is fantastic related to this issue!

“responsive design” is new notion for me, so I asked someone more clever than my self about it in the context of screen title disappearing on large screen in Glide, here the answer from AI:

"The issue of not displaying the screen title in desktop view can indeed be seen as a flaw or limitation related to responsive design in Glide apps. Here’s how this situation connects to responsive design principles:

1. Inconsistency Across Devices

Responsive design aims to ensure that the user experience remains consistent across all device types. If the Title component is visible on mobile but not displayed in the desktop (or Glide Pages) view, it creates inconsistency. Users might rely on the title for navigation or contextual information on mobile, but when switching to desktop, the absence of the title might leave them disoriented or confused about the screen they are on.

2. Loss of Key Information

The Title component is often used to provide important information, such as the current screen’s context (e.g., “Profile” or “Quiz Timer”). If the title disappears in desktop view, users may lose that reference point, which can lead to a suboptimal user experience. This breaks the responsive design principle where every screen should display the relevant content in an accessible way, regardless of the device being used.

3. Not Adapting to Larger Screens

A key aspect of responsive design is adapting layouts for larger screens, ensuring that the UI uses the extra space effectively. In the case where the title isn’t displayed on a desktop, this shows that the design fails to properly scale up or adjust for larger displays. Titles are important in desktop apps and websites to guide users, and failing to display the title can make the desktop experience feel incomplete or unfinished.

4. UI/UX Discrepancy

Responsive design focuses on providing a seamless user experience across different devices, ensuring that elements either adapt, reorganize, or reformat based on the screen size. However, in this case, the Title component is completely absent from the desktop view, rather than adapting or resizing itself. This violates the core principle of responsive design, where elements should adjust rather than disappear.

5. Potential Usability Issues

Not displaying titles on the desktop may cause usability issues. Titles often provide users with a quick understanding of the context of the current page, especially in apps with multiple sections or flows. In a mobile-first design, elements like the title are often made smaller or simpler to fit on smaller screens, but when scaling up to larger desktop views, the expectation is that the user will see more, not less.

How It Should Work in a Truly Responsive Design:

• On mobile, the Title component could be displayed in a smaller size, or in some cases, reduced for space efficiency, but it should never be completely hidden on larger devices like desktops.
• In a responsive desktop view, the Title should ideally become more prominent, as desktop users typically have more screen space available, and such elements contribute to an organized, professional-looking interface.

Conclusion:

The issue of not displaying the screen title in desktop view is a clear break from responsive design principles because it creates inconsistency across devices, leads to loss of information, and does not make effective use of available screen space. In true responsive design, elements should adapt or reorganize, but they should not disappear entirely unless there’s a specific reason (like optimizing for minimalism on small screens).

To resolve this issue, Glide would ideally ensure that the Title component is visible across all views, with appropriate adjustments for each device size to maintain a consistent and user-friendly experience."

So it is not a bug, it is a flaw! I am not a native english speaker, so I wasn’t sure what “flaw” stands for: blemish, bug, defect, failing, fault, foible, glitch, pitfall, weakness .
This reminds me to: " If it looks like a duck , swims like a duck , and quacks like a duck , then it probably is a duck ."
Or: " If it looks like a bug , bothers like a bug , and functions like a bug , then it probably is a bug .".
Really fantastic, Himaladin, thanks for “responsive design” enlightment!

[Himaladin]

Thank you for sharing your thoughts! From my perspective, design is something quite relative and often comes down to consensus or personal preferences. I definitely don’t intend to discourage you from expressing your opinion; rather, I’d like to assist in solving the issue you’re facing.

If you feel that having the screen title is essential, you can still achieve this by using the components I mentioned earlier. Hopefully, this helps maintain the design consistency without fully relying on Glide’s default behavior. Best of luck!

[Miroslav_Madaric]

Tnx a lot, realy! Can you provide me with short instruction how can I implement CSS for this, if it is not too complicated?

[Himaladin]

I haven’t fully thought through or understood what kind of layout you’re aiming for, especially on the desktop view where the space is already quite filled with navigation buttons. However, I’ve previously posted some CSS that completely removes or replaces the native Glide nav-tabs. This method allows you to break free from relying on Glide’s default design and gives you more flexibility.

🖱️ Create Your Own Custom Tab/Sub-tab Navigation

What I’m sharing below uses an example of a button block component to replace native navigation and allows you to organize tabs to be placed within a specific main tab as sub-tabs. The following method is open to many possibilities for using components and styles beyond the example I provided, such as floating menus, involving rich text components, or custom components with your own style. Feel free to share your creative styles/designs in this thread to share with other community members. [Sc…

[Miroslav_Madaric]

My issue was very simple: I need screen title on the top, frozen against scrolling!

Srdačan pozdrav / Best regards!

[Himaladin]

If that’s the case, let’s go with the simplest solution:

1. Add a 3-column container containing the following components: a back button, a text component for the title, and a spacer for the third column. Set the container with an accent background.
   
   

   

2. Assign the CSS class name “hide-customTitle” to your container component.

3. Place the following CSS code in Settings > Appearance > custom CSS box. This will hide the component on mobile screens. (Don’t forget to turn off “use compiled CSS” and enable “preview custom CSS”).

#page-root:has(.mobile-layer) .hide-customTitle {
display: none;
}

/*Forces components from the container to be inline*/
.hide-customTitle .threeColumns {
    grid-template-columns: repeat(3, minmax(0px, 1fr));
}

Let me know if anything is less than perfect.

[Himaladin]

Sorry, I got distracted. I forgot about the sticky issue and this is the case in the detail screen.

#page-root:has(.mobile-layer) .hide-customTitle {
display: none;
}
/*Forces components from the container to be inline*/
.hide-customTitle .threeColumns {
    grid-template-columns: repeat(3, minmax(0px, 1fr));
}
/* Stick on top*/
.hide-customTitle{
position: sticky;
top: 0;
}

[Miroslav_Madaric]

tnx a lot, I will check it tomorrow, this will by 1st css!

[Himaladin]

You’re welcome! Everyone experiences it. However, I believe you will love her it.