Quick Links Web Part Display Bug

%3CLINGO-SUB%20id%3D%22lingo-sub-938540%22%20slang%3D%22en-US%22%3EQuick%20Links%20Web%20Part%20Display%20Bug%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-938540%22%20slang%3D%22en-US%22%3E%3CP%3EFor%20the%20Quick%20Links%20webpart%2C%20using%20the%20button%20layout%2C%20when%20I%20switch%20nothing%20other%20than%20the%20%E2%80%98Button%20appearance%E2%80%99%20option%20from%20%E2%80%98Outline%E2%80%99%20to%20%E2%80%98Fill%20color%E2%80%99%2C%20the%20height%20of%20each%20button%20drastically%20increases%20in%20size%20(both%20set%20to%20'one%20line')%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CU%3E%E2%80%98Outline%E2%80%99%20button%20appearance%3A%3C%2FU%3E%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F144162iDF3F625F6617B86C%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22clipboard_image_0.jpeg%22%20title%3D%22clipboard_image_0.jpeg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CU%3E%E2%80%98Fill%20color%E2%80%99%20button%20appearance%3A%3C%2FU%3E%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F144161i785D2B7408E9C928%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22clipboard_image_1.jpeg%22%20title%3D%22clipboard_image_1.jpeg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThank%20you!%3C%2FP%3E%3CP%3EMarissa%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-938540%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-942663%22%20slang%3D%22en-US%22%3ERe%3A%20Quick%20Links%20Web%20Part%20Display%20Bug%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-942663%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F428952%22%20target%3D%22_blank%22%3E%40marissa_sinai%3C%2FA%3E%20%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWorks%20ok%20for%20me%20in%20Latest%20Chrome%20and%20Edge.%20If%20you%20have%20a%20latest%20version%20of%20the%20browser%20and%20you%20are%20still%20getting%20it%20then%20the%20only%20thing%20to%20do%20is%20raise%20a%20ticket%20in%20the%20Office%20365%20Admin%20portal.%20Not%20sure%20how%20much%20importance%20they%20would%20put%20on%20a%20cosmetic%20issue%20but%20you%20never%20know.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHope%20that%20helps.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAndy%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-963897%22%20slang%3D%22en-US%22%3ERe%3A%20Quick%20Links%20Web%20Part%20Display%20Bug%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-963897%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F214649%22%20target%3D%22_blank%22%3E%40Andrew%20Hodges%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%20class%3D%22%22%3EThank%20you%20for%20the%20response!%20I%20have%20an%20update%20below%2C%20as%20well%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESo%2C%20it%20seems%20that%20when%20%E2%80%98Show%20descriptions%E2%80%99%20is%20set%20to%20%E2%80%98yes%E2%80%99%2C%20the%20following%20happens%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3E%3CSTRONG%3EWhen%20the%20%E2%80%98outline%E2%80%99%20appearance%20is%20used%3A%20the%20button%20height%20auto-resizes%20so%20that%20there%20isn%E2%80%99t%20extra%20(height)%20space%20for%20the%20individual%20Quick%20Link%20button%E2%80%99s%20non-existent%20description%20(see%20screenshots%2C%20below)%3C%2FSTRONG%3E%3C%2FSPAN%3E%3C%2FP%3E%3COL%3E%3CUL%3E%3CLI%3E%3CSPAN%3EIf%20just%20one%20Quick%20Link%20has%20a%20description%2C%20just%20that%20one%20button%20will%20increase%20in%20size%20to%20fit%20the%20description%2C%20the%20other%20buttons%20that%20don%E2%80%99t%20have%20descriptions%20remain%20the%20more%20compact%20height%20(preferable)%3C%2FSPAN%3E%3C%2FLI%3E%3C%2FUL%3E%3C%2FOL%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F151773iB7D5DC1CE19FF0AB%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Quick%20Links%20webpart%20with%20description%20(Outline%20style).png%22%20title%3D%22Quick%20Links%20webpart%20with%20description%20(Outline%20style).png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3COL%3E%3CUL%3E%3CLI%3E%3CSPAN%3ENone%20of%20the%20Quick%20Links%20in%20the%20web%20part%20have%20descriptions%2C%20however%2C%20%E2%80%98Show%20descriptions%E2%80%99%20is%20selected%20in%20case%20a%20description%20is%20need%20at%20some%20point.%20The%20Quick%20Link%20buttons%20do%20not%20increase%20in%20height%2C%20because%20they%20don%E2%80%99t%20have%20descriptions%20(preferable)%3C%2FSPAN%3E%3C%2FLI%3E%3C%2FUL%3E%3C%2FOL%3E%3CP%3E%3CSPAN%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-left%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F151778i621C413FC08E6B6E%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Outline%20button%20appearance.png%22%20title%3D%22Outline%20button%20appearance.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSTRONG%3EWhen%20the%20%E2%80%98fill%20color%E2%80%99%20appearance%20is%20used%3A%20the%20button%20heights%20don%E2%80%99t%20resize%20even%20if%20there%E2%80%99s%20no%20present%20Q.L.%20description%20for%20the%20individual%20Quick%20Link%2C%20or%20for%20any%20of%20the%20Quick%20Links%20in%20the%20webpart%3A%3C%2FSTRONG%3E%3C%2FP%3E%3CUL%3E%3CLI%3EIf%20just%20one%20Quick%20Link%20has%20a%20description%2C%20ALL%20buttons%20increase%20in%20size%20to%20fit%20a%20description%2C%20even%20though%20none%20are%20present%20(NOT%20preferable)%3C%2FLI%3E%3C%2FUL%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-left%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F151782i8826C09869158A8A%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Quick%20Links%20webpart%20with%20description%20(Fill%20Color%20style).png%22%20title%3D%22Quick%20Links%20webpart%20with%20description%20(Fill%20Color%20style).png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CUL%3E%3CLI%3ENone%20of%20the%20Quick%20Links%20in%20the%20web%20part%20have%20descriptions%2C%20however%2C%20%E2%80%98Show%20descriptions%E2%80%99%20is%20selected%20in%20case%20a%20description%20is%20need%20at%20some%20point.%20The%20Quick%20Link%20buttons%20all%20increased%20in%20height%2C%20even%20though%20they%20don%E2%80%99t%20have%20descriptions%20(NOT%20preferable)%3C%2FLI%3E%3C%2FUL%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-left%22%20style%3D%22width%3A%20936px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F151780iA769945522AB613E%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Fill%20Color%20button.png%22%20title%3D%22Fill%20Color%20button.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E
Occasional Contributor

For the Quick Links webpart, using the button layout, when I switch nothing other than the ‘Button appearance’ option from ‘Outline’ to ‘Fill color’, the height of each button drastically increases in size (both set to 'one line'):

 

‘Outline’ button appearance:

clipboard_image_0.jpeg

‘Fill color’ button appearance:

clipboard_image_1.jpeg

 

Thank you!

Marissa

2 Replies

Hi @marissa_sinai ,

 

Works ok for me in Latest Chrome and Edge. If you have a latest version of the browser and you are still getting it then the only thing to do is raise a ticket in the Office 365 Admin portal. Not sure how much importance they would put on a cosmetic issue but you never know. 

 

Hope that helps.

 

Andy

 

 

@Andrew Hodges 

 

Thank you for the response! I have an update below, as well:

 

 

 

So, it seems that when ‘Show descriptions’ is set to ‘yes’, the following happens:

 

When the ‘outline’ appearance is used: the button height auto-resizes so that there isn’t extra (height) space for the individual Quick Link button’s non-existent description (see screenshots, below)

    • If just one Quick Link has a description, just that one button will increase in size to fit the description, the other buttons that don’t have descriptions remain the more compact height (preferable)

Quick Links webpart with description (Outline style).png

    • None of the Quick Links in the web part have descriptions, however, ‘Show descriptions’ is selected in case a description is need at some point. The Quick Link buttons do not increase in height, because they don’t have descriptions (preferable)

Outline button appearance.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

When the ‘fill color’ appearance is used: the button heights don’t resize even if there’s no present Q.L. description for the individual Quick Link, or for any of the Quick Links in the webpart:

  • If just one Quick Link has a description, ALL buttons increase in size to fit a description, even though none are present (NOT preferable)

Quick Links webpart with description (Fill Color style).png

  • None of the Quick Links in the web part have descriptions, however, ‘Show descriptions’ is selected in case a description is need at some point. The Quick Link buttons all increased in height, even though they don’t have descriptions (NOT preferable)

Fill Color button.png