Carousel for different orientation of image
Application Type
Traditional Web

Hello. I can't seem to figure out how my carousel for the banner of the website can have the same height may it be in portrait or landscape without changing its width when I turn to see it in a mobile browser. I'm using the images from the database. Thanks in advance.

Solution

Hello @Matanong,

Try and set 'AdvancedFormat' -> 'autoHeight' property off as shown below and see if that gives you the desired effect -

"{
    autoHeight:false
}"

Just FYI, you can always enhance the experience further by leveraging the 'AdvancedFormat' properties based on the documentation available here.

Regards,

AJ

Hi. I am using a traditional web and my carousel doesn't have that property. 

Hello @Matanong,

My screenshot is from a Traditional web app as well, so could you please check the version of OutSystems UI Web you are currently on? You can check it as shown below. I am on 1.8.12

If you are on an older version, you may want to consider upgrading OutSystemsUIWeb.

This project is old, I think and uses WebPatterns UI.

@AJ. according to last Matanong comment, I opened the Carousel WebPatterns, and it has that option set to false.

@Matanong maybe these links can help you.

https://stackoverflow.com/questions/58077394/set-all-owl-carousel-items-with-equal-height

https://stackoverflow.com/questions/41371766/owl-carousel-fixed-height


Regards,

Luis Oliveira

Solution

Thanks, guys! I'll look into it for now I opt to set the height fix to what I want in the property of the image inside the carousel and define the CSS like below:

.owl-carousel img {
  display:block;
  margin: 0 auto;
  object-fit: contain;
}

Hi @Matanong

can you share the OML or a sample with the same problem?

Solution

Hello @Matanong,

Try and set 'AdvancedFormat' -> 'autoHeight' property off as shown below and see if that gives you the desired effect -

"{
    autoHeight:false
}"

Just FYI, you can always enhance the experience further by leveraging the 'AdvancedFormat' properties based on the documentation available here.

Regards,

AJ

Hi. I am using a traditional web and my carousel doesn't have that property. 

Hello @Matanong,

My screenshot is from a Traditional web app as well, so could you please check the version of OutSystems UI Web you are currently on? You can check it as shown below. I am on 1.8.12

If you are on an older version, you may want to consider upgrading OutSystemsUIWeb.

This project is old, I think and uses WebPatterns UI.

@AJ. according to last Matanong comment, I opened the Carousel WebPatterns, and it has that option set to false.

@Matanong maybe these links can help you.

https://stackoverflow.com/questions/58077394/set-all-owl-carousel-items-with-equal-height

https://stackoverflow.com/questions/41371766/owl-carousel-fixed-height


Regards,

Luis Oliveira

Solution

Thanks, guys! I'll look into it for now I opt to set the height fix to what I want in the property of the image inside the carousel and define the CSS like below:

.owl-carousel img {
  display:block;
  margin: 0 auto;
  object-fit: contain;
}
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.