SQFormScrollableCard truncate title

[jamesgriffith9519]

The SC3 Admin project has a need for the title of the SQFormScrollableCard component to be truncated rather than wrapping it to a new line if the text is larger than the container.

[jamesgriffith9519]

My thoughts on this are that I think it could be accomplished with some minor CSS adjustments to the title. I'm curious if anyone has some thoughts on if this should be optional?

I was thinking if we were to make the truncating of the title optional, we could have a new prop, maybe something like 'shouldTruncateTitle" that if true adds the required CSS, or maybe we don't even need that and the title should always just truncate if its larger than the container. I'm curious to what the team thinks about that

[SeanGroff]

Can you post a screenshot of the issue?
What's the point of a title if it's truncated?
This sounds more like a Verbiage problem that UI/UX can assist with coming up with a shorter or abbreviated title.

[jamesgriffith9519]

Can you post a screenshot of the issue? What's the point of a title if it's truncated? This sounds more like a Verbiage problem that UI/UX can assist with coming up with a shorter or abbreviated title.

absolutely, to provide a little more context, here's a quick screenshot of the issue:

Normally how it's been used in sc3 admin is that the title is essentially the name/title of a DB record, some can get pretty long and it can cause that line wrapping to happen, especially on smaller screens. For example, in the screenshot, the name of the "Campaign Group" is "Test Web Campaign Group Creation".

[SeanGroff]

Can you post a screenshot of the issue? What's the point of a title if it's truncated? This sounds more like a Verbiage problem that UI/UX can assist with coming up with a shorter or abbreviated title.

absolutely, to provide a little more context, here's a quick screenshot of the issue:

Normally how it's been used in sc3 admin is that the title is essentially the name/title of a DB record, some can get pretty long and it can cause that line wrapping to happen, especially on smaller screens. For example, in the screenshot, the name of the "Campaign Group" is "Test Web Campaign Group Creation".

Got it. Thanks for this helpful context.

1. Designer question but Details > takes up precious space and it's already obvious from the UI the right pane is for details. Can we nix this?
2. In this context, truncation makes sense and we ideally handle this with CSS

[jamesgriffith9519]

Got it. Thanks for this helpful context.

1. Designer question but Details > takes up precious space and it's already obvious from the UI the right pane is for details. Can we nix this?
2. In this context, truncation makes sense and we ideally handle this with CSS

To your first point, yes! I believe this particular screenshot may be of one of the earlier views in the admin project, the newer ones have since nixed that "Details >" portion of it, and so I believe eventually all of the old views will get a small refactor to remove that portion of the title.

And perfect, tackling this with CSS I think maybe the simplest way to do it, I appreciate the feedback!