How to add local image in header right

I am developing a mobile app where I am trying to add an image to the header right part of the screen.

while adding the image it is visible on the studio but while testing in device or browser the image disappears. 

pratyush lnu wrote:

I am developing a mobile app where I am trying to add an image to the header right part of the screen.

while adding the image it is visible on the studio but while testing in device or browser the image disappears. 

Could you please share oml file


Salman Ansari wrote:

pratyush lnu wrote:

I am developing a mobile app where I am trying to add an image to the header right part of the screen.

while adding the image it is visible on the studio but while testing in device or browser the image disappears. 

Could you please share oml file

Sure. PFA oml file.


Hi Pratyush,

I am not able to reproduce your issue in my sample app. Also not able to publish your module because of missing dependencies. Check if the attached oml helps you to resolve the issue. Also, if you can share the url of the page by making it anonymous then it can be solved faster.

Hi pratyush lnu,

I was able to reproduce your scenario and as per my observation, because of the default image large width value (large image dimension/scale) the image is not getting shown in the browser emulator. Adding to that, I want to mention - service studio do applies it's own styling definition to each element that is the reason the Logo image was visible in the service studio UI canvas. 

Solution: Set the image element max-width css property in the extended properties section as mentioned below.

Hope this helps you!

Regards,

Benjith Sam

Akshay Puri wrote:

Hi Pratyush,

I am not able to reproduce your issue in my sample app. Also not able to publish your module because of missing dependencies. Check if the attached oml helps you to resolve the issue. Also, if you can share the url of the page by making it anonymous then it can be solved faster.

Hi Akshay,

I made my screen anonymous. I have no clue how to share the url as i am completely new here.

This is the url i found for opening it in browser.

https://kumar-ankit.outsystemscloud.com/PreviewInDevices/?IsMobilePreview=True&DeviceName=Smartphone&URL=/ToDo_Mobile/ToDoDetail?_ts=637249851157969225

please let me know if this helps or how can i share the url you need?

Thanks in advance.


Benjith Sam wrote:

Hi pratyush lnu,

I was able to reproduce your scenario and as per my observation, because of the default image large width value (large image dimension/scale) the image is not getting shown in the browser emulator. Adding to that, I want to mention - service studio do applies it's own styling definition to each element that is the reason the Logo image was visible in the service studio UI canvas. 

Solution: Set the image element max-width css property in the extended properties section as mentioned below.

Hope this helps you!

Regards,

Benjith Sam

Hi Benjith,

I did as you told but still the image is not visible.

Thanks & Regards, 

Pratyush


Solution

Hi Pratyush,

You have added custom css for Header Title which is creating the issue since it is consuming tall the remaining width. . Please change your css in your module or screem 

From:

.header-title {
    color: #fff;
    width: 100%;
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
}

To:

.header-title {
    color: #fff;
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
}
Solution

pratyush lnu wrote:

Hi Benjith,

I did as you told but still the image is not visible.

Thanks & Regards, 

Pratyush

Hi Pratyush,

Whenever you encounter such UI related issue, try to trace down the issue/cause by inspecting the application screen using the browser inspect feature. As shown below, when you inspect the screen you can observe that because of the .header-title {width:100%} CSS class definition the Right header section was not getting enough space to showcase the image.

Solution: Either remove that particular CSS (i.e. width:100%) statement or set the width property as width: auto or restrict the title width by setting appropriate value in % as per your requirement.

Hope this helps you!


Regards,

Benjith Sam

Akshay Puri wrote:

Hi Pratyush,

You have added custom css for Header Title which is creating the issue since it is consuming tall the remaining width. . Please change your css in your module or screem 

From:

.header-title {
    color: #fff;
    width: 100%;
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
}

To:

.header-title {
    color: #fff;
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
}

Thanks a lot Akshay. You saved my day. :)