[Enhancement] Modal title should support long titles

[bommariusser]

Is your enhancement request related to a problem? Please describe.
Right now our modals truncate on long titles, which makes some important text go away.

Describe the solution you'd like
We would like the text to truncate only on scrolling down - So it will show the whole text when opening a modal.

Describe alternatives you've considered
We also thought of showing the whole title all the time, but prefer truncating on scrolling, like our page-template.

Also we have thought about scaling the title down to a p / 16 px before making the header bigger, down to the same size as the toolbar title.

[flemcito]

Tech refinement:
The modal header uses the ion-toolbar, which is quite limited with respect to what can be adjusted. Unfortunately the props that control height/overflow behaviour are not exposed. https://ionicframework.com/docs/api/toolbar.

• One way forward could be to replace the ion-toolbar with a custom component, but I am unsure of the implications this would have (ie. risk of breaking changes).
• Another way could be to create a variant of the modal with the collapsible header and make it an explicit choice to opt into that behaviour - so not to risk breaking existing implementations.
• A third option could be to place the modal heading in the content area, and only use the toolbar to show a trunctacted heading when scrolled (like we do on pages)

[MartinSkovsen]

I'll add to this by refering to recently merged PR #1217, which displays how the toolbar is currently being used. #1355, not-tech-refined issue, also has some relevance to this.

[stale]

This issue has been automatically marked as stale because of no recent activity. It will be closed in 10 weeks if no further activity occurs. Thank you for your contributions.

[LVinther]

@henrikvoetmand we need this enhancement for all our "Samtykker/aftaler" (across DRB) so we need to prioritize this issue 😄

[stale]

This issue has been automatically marked as stale because of no recent activity. It will be closed in 10 weeks if no further activity occurs. Thank you for your contributions.

[LVinther]

@henrikvoetmand as mentioned before this issue is important for all our "Samtykker/aftaler" but it is now 'Stale'. Is it possible to prioritize this issue? :)

[henrikvoetmand]

@alxzak can we prioritize this issue?

[stale]

This issue has been automatically marked as stale because of no recent activity. It will be closed in 10 weeks if no further activity occurs. Thank you for your contributions.

[MadsBuchmann]

Is this worth taking a look at?
https://ionicframework.com/docs/api/title#collapsible-large-titles

[bommariusser]

how does that work @MadsBuchmann ? :D can you demo that?

[MadsBuchmann]

@bommariusser got nothing to demo. I commented the above link as we stumbled upon it when discussing this issue yesterday. It's might just be a lever exposed by the ionic framework that we might use to implement the functionality, in a way exposed by the framework :D

[bommariusser]

alright @MadsBuchmann :) sounds great! The showcase is not so "not developer" friendly though so its hard to really understand what collapsible means :D sounds like something that gets smaller :P so like a sticky page-title kinda thing or font scaling kinda thing :)

[MadsBuchmann]

Tech refinement

I've spent some time looking into three different solutions for this:

1. Using ionics collapsible title functionality a PR with a POC has been uploaded in POC: Ionic collapsible title solution #2067.
2. Simply making the title part of the content and never have it in the toolbar.
3. Always having the title in ion-toolbar and truncating it on scroll

I think we should go with no. 1. I've written down some pros & cons for this solution in #2067. The second will not be implemented due to UX considerations. When researching the third solution i stumbled into the problems mentioned by @flemcito by not being able to control overflow behaviour.

There's still a couple of things to consider:

• How do we make this so it becomes opt-in?
• Is there a way to dynamically applying the solution? Such that if the title is too long for the modal it will automatically use the collapsible title functionality?
• What should the API for using it be?
• How to make this so it does not affect other types of modal than the default one.
• The solution requires us not to use ion-title as it will truncate the title in ion-content - instead we should use a heading tag. Which level should this be?
• Should we carry out [Housekeeping] Remove deprecated ModalConfig title #2060 as part of this? (i vote yes)
• How do we ensure the title is not displayed on load (this is a more technical detail and probably does not have to be discussed in plenum. Just something to watch out for)
• How do we make it possible to modify text-position as a consumer? In some cases it should be centered others left aligned.

After talking with @henrikvoetmand the styling for the title when it is part of the content should be the same as the title for page in #2030

[MadsBuchmann]

The gift that keeps on giving 😅... Status right now is that #2174 contains all necessary functionality for enabling collapsible titles for modals that are not routed.

The modal configs for routed modals are hard coded and this is giving us some API troubles... A seperate issue has been created for this: #2192