question

TimStevic-7194 avatar image
0 Votes"
TimStevic-7194 asked JulieWang-MSFT commented

Change display size of a field within Gallery view

I had posted this in another forum and it was suggested I come here.

I have a site built using Microsoft Lists. One of the fields is an executive description that can be verbose (by design). The field is fine in normal list view and I can hover over the field to get further lines of information.

When I switch to gallery view and access a record, the display for the executive description does not show much detail, and clicking on the "show more" does not do anything. The only way to see all of the content is to press on the field to go to edit mode and then use the scroll bars to scroll through.

For instance:

133348-image.png

In the above example - I would like to see more entries of the field and be able to use the white space to the right of the field. This is an important field for the user in this view.

Is this possible without using PowerApps?



Mia from Microsoft replied:

**Hi Tim,


Welcome to Microsoft Community.


Based on the detailed description and screenshot, it seems like you want to make a field display a larger size to show the complete contents/texts in a SharePoint list within Gallery view.


We are sorry to convey that engineers here focus on the out-of-box features in SharePoint Online and have no way to change the size of a field. You can submit your suggestions or ideas in the related community so that the related engineers could improve the demand to change size of showing fields. Welcome to the SharePoint group. (microsoft.com). Besides, the demand can be realized by CSS codes and for a reference: sharepoint online - Change form field width - SharePoint Stack Exchange. You can post threads in the related community to get support about CSS codes.


For your workaround to click See more in the item propriety box, it shows the complete content when I click See more button based on my test. Hence, it is suggested to create a new list for test and see if the issue will be reproduced.

Feel free to post back if there have anything I can do for you.


Best Regards,
Mia**


To which I discovered I had modified the field attributes with JSON:


Thanks, Mia - I actually think I figured it out - but not sure there is anything I can do about it. I had introduced from custom formatting for that field in the List view since the field will grow and grow over time (it is a status field). I limited the number of lines displayed on the list view but allowed a hover over the field to see more lines.

I guess the Gallery view uses this same formatting and does not allow the hover functionality - so I am limited in what I can display.

Here is the json:

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"font-size": "12px"
},
"txtContent": "=(substring(@currentField, 0, 500) + '...')", <- I assume this is the offender?
"customCardProps": {
"formatter": {
"elmType": "div",
"txtContent": "@currentField",
"style": {
"font-size": "12px",
"color": "green",
"padding": "5px",
"width": "400px"
}
},
"openOnEvent": "hover",
"directionalHint": "rightCenter",
"isBeakVisible": true,
"beakStyle": {
"backgroundColor": "white"
}
}
}

I assume there is no way around this?


office-sharepoint-online
image.png (22.4 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

JulieWang-MSFT avatar image
0 Votes"
JulieWang-MSFT answered JulieWang-MSFT edited

@TimStevic-7194,

----------------------------------------------------Update-------------------------------------------------------------------------

According to my test, the hover event is applicable to the list layout, however not to the gallery layout, because the JSON format of the list and gallery layout is not common.

To format rows in 'List' or 'Compact List' layout, select 'List' in 'Choose layout' dropdown in the formatting pane and use the rowFormatter or additionalRowClass properties.

To format cards in 'Gallery' layout, select 'Gallery' in 'Choose layout' dropdown in the formatting pane and use the formatter property.

------------------------------------------------------------------------------------------------------------------------------------------
To see all contents of a multiple lines of text column, format the column like this:

 {
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "style": {
     "overflow": "auto",
     "max-height": "auto"
   },
   "txtContent": "@currentField"
 }

In normal list view, it will show all contents as shown below:

133428-image.png

When we switch to Gallery view, the gallery size will not be changed, however when we click the item, all of contents will be shown:
133350-image.png


If an Answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.




image.png (104.5 KiB)
image.png (115.1 KiB)
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi Julie - thanks for looking at this. This is not what I want, however. I want to:

  1. Limit the amount of lines displayed in List view and allow a hover over to display all - this is to keep the list shorter in length. I am able to do that now with the JSON I supplied as reference.

  2. When in Gallery view - allow the "show more" function to show the rest of the lines. So if the Executive Status fied has grown to 2000 characters, I want to limit the field to 500 characters in list view, allow the hover function to display the full 2000 characters - and then find a way to display all 2000 characters in Gallery view (since I cannot do a hover function in this view - or at lest the once coded above does not allow this functionality.).



The problem is trying to see all the text in a field in Gallery view and not force my user to have to switch back to list view and hover to see it.


Does this make sense and is this somehow possible?


0 Votes 0 ·

@TimStevic-7194

In order to get a better forum experience, we changed your answer to a comment.

I have updated my answer, please check it.

0 Votes 0 ·
TimStevic-7194 avatar image
0 Votes"
TimStevic-7194 answered JulieWang-MSFT commented

Hi Julie - this sort of gets me there - but being able to really limit the number of lines displayed in the List view and using the hover option would be something I would like to keep.

Is there a way to keep my original code above and somehow display all the lines in the gallery view? I would really like to only show 4 or 5 lines in List View - and then more in Gallery with the "show more" feature working.

· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@TimStevic-7194,

The short answer is no, because the hover event in the column format does not work in the gallery view, and there is no similar view format that allows us to achieve the same effect as in the list view.

0 Votes 0 ·