Display full size image column in Skybow form

TRAN Soung

• Created February 26, 2021 13:54

Dear Skybow community,

I am beginner in using skybow Add-In

I have an image column in my list and I wonder if it is possible to display this column directly in full size in my Skybow form ? I only can display thumbnail. I know that if I click on the thumbnail a popup open and shows the full size.

I also tried with column Hyperlink or picture but still can't have what I need.

Many thanks for your help.

Best

Soung

 

 

 

Modern Forms for SharePoint and Teams - skybow Add-In

0

• 

  Christof

  • April 09, 2021 13:30

  Hi TRAN Soung
  
  With latest version of Modern Forms (skybow Modern Forms 1.0.88.0) we released a new Styling/Conditional Formatting feature (Styling & Conditional Formatting introduction) which can be used to style specific parts on your forms - including your image field displayed as thumbnail.

  In your case just go to the forms editor and create a new Control Style on your image field (in screenshot beow the image field is called "NewImageColumn"):
  

  and add these lines to this at the end of this new created style:

  

  .sb-field-value img {
    max-height: none !important;
    max-width: none !important;
  } 

  
  Result on form:
  

   

  0
• 

  TRAN Soung

  • April 14, 2021 07:29

  Dear Christophe,

  This is exactly what I need.

  Thank you .

  Best regards,

  Soung

   

   

  0
• 

  TRAN Soung

  • April 28, 2021 16:03

  Dear Christophe,

  As advice I tried to add the folowing CSS lines but nothing change on the form. I also replace none by some number value without success neither.

  Did I miss something ?Any idea ?

  Thanks

  Regards

  Soung

  .sb-field-value img {
    max-height: none !important;
    max-width: none !important;
  } 
  
  
  
  

  0
• 

  TRAN Soung

  • April 29, 2021 09:27

  Dear Christophe,

  I replace .sb-field-value by .sb-field-input and it works.

  Ragards,

  Soung

  .sb-field-input img {
    max-height: none !important;
    max-width: none !important;
  } 

  0
• 

  Christof

  • April 29, 2021 15:43

  Hi Soung

  Yes, it depends on your form type.

  On Display-Forms the selector should be: .sb-field-value img
  On New- and Edit-Forms the correct selector is: .sb-field-input img

  0
• 

  TRAN Soung

  • April 30, 2021 13:22

  Hi Christophe,

  Thank you for that clarification.

  By the way is there any document that list selectors / attributs that can be used in the CSS editor ?

  Thanks

  Soung

  0
• 

  Christof

  • April 30, 2021 15:32

  Hi Soung
  
  No, this is kind of standard CSS and skybow custom styling manually added to this css editor - officially supported styles are set by the above controls of the editor.

  0
• 

  Julio DeJesus

  • August 15, 2022 14:20

  I have been testing this for a client, and it is not working. Has something changed, or is there something I am missing?

  0
• 

  skybow_support

  • August 16, 2022 07:59

  Dear Julio DeJesus,

  on which form type (New, Edit, Display) are you testing it? And are you using the new picture column or the old image/hyperlink column?

  Kind regards

  0
• 

  Julio DeJesus

  • August 16, 2022 09:28

  Hello,

   

  I am using the old picture/hyperlink column. I tried using it on the new and display forms using the proper code for each based on the earlier conversation. 

  0
• 

  skybow_support

  • August 16, 2022 10:01

  Dear Julio DeJesus,

  the old picture/hyperlink column works a little different and you have to add the following style (without the "img" selector)

  .sb-field-value {
    max-height: none !important;
    max-width: none !important;
  }

  this just works on the display form as there is only a text input on the new and edit form to enter a picture url.

  

  Kind regards

  0
• 

  Julio DeJesus

  • August 16, 2022 10:30

  That did it!

  Thank you.

  0

Please sign in to leave a comment.