Change display size of a field within Gallery view

Question

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:

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?

Answer 1

@Tim Stevic ,

----------------------------------------------------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:

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:

---

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.

Answer 2

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.