cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
lisarinehart
Helper I
Helper I

Portal Header Size (Height) Issue

I've updated my Content Snippet for the Header of my portal to include my company logo, and it looked great...until I accidentally clicked on the logo image in the visual studio editor (I'm guessing I did a imperceptible logo image resize) and now the header has shrunk, so the logo container is spilling out into the page section below. I can't figure out where the Header size coding is located, or how to undo/resize the header appropriately... help! 

 

I'd like to keep my Logo this size (and not puny sized to fit inside the new shortened header)...can anyone direct me where to resize the height of the portal header? AND perhaps how to size the header to match the height of content snippet size rather than a set pixel height (although either would be fine!)?


Here's an image of the issue

Portal header.png

1 ACCEPTED SOLUTION

Accepted Solutions
ragavanrajan
Super User
Super User

hi  @lisarinehart  , 
 You are in the right place of web template. There are some approaches which I think would fix your issue 
 
1. Try deleting your company logo and upload the fresh logo
2. Using Portal studio > Sync configuration > then Browse website 
 
Because we have not modified anything on web template. Now it will bring back your original version. 
 
Then using custom css in the portal studio resize the logo according to your wish. 
 
 custom.css.png

 


 

 

 

 

 

 

 

 

 

 

img{ height: 55px !important; width:55px !important; } 


The above css will definitely override the image size. 
 
Additional: 
 
1. In the header web template 
 
2  . If you wish you can also check line 44 on how the image height and width has been rendered
 

ragavanrajan_0-1607038032465.png

 


 
Hope this helps. 
 
PS: It is a coincidence I did exactly the same issue yesterday while setting up logo. 
 
------------
 
If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

View solution in original post

9 REPLIES 9
Fubar
Solution Sage
Solution Sage

If your image was just replacing the Contoso text in the header, then this is held in a Content Snippet - and there are 2 of them one for wide (Navbar Left) and one for mobile size (Mobile Header).  The more difficult thing is if you're height causes issues then you have to make multiple adjustments to the various CSS Media rules to accommodate it - just remember that when your browser window becomes smaller the nav menu changes (and  can mean a bit of work to get all the heights and widths correct).

OliverRodrigues
Super User II
Super User II

hi, you might be able to find the code in the Portal Management App

navigate to make.powerapps.com --> apps --> Portal Management --> Web Templates --> Header

this is liquid code responsible for rendering the header




If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Apps Portals Super User


Oliver Rodrigues


 

lisarinehart
Helper I
Helper I

Thanks @OliverRodrigues - I do most of my editing in Portal Management & check visuals in the Studio...I'm a noob with liquid... what section of this code I should look in? (I tried a few things hesitantly before I posted, but I'm glad I was in the right place 🙂

I see there's 2 divs for the content snippet...did this duplicate as xs size in error?? also, I see an interesting sting at the bottom that i'm not sure of... see my screenshots below ...

 

See Green area: is this where my height issue lives?

lisarinehart_1-1607034406895.png

and or/ see this bit of code... is it pertinent here? (i.e. what is the resize event, what is resize and why? ) 

lisarinehart_0-1607034219733.png

Thank you very much!

Thanks @Fubar , this is not the issue. I have already replaced the logo with the snippet code in the portal management and the sizing was perfect (via code, at width 15% of original image and height auto to maintain proportions. Unfortunately something weird happened and container now spills out on the page and resize with the page regardless of screen sizes or zoom...i.e. it gets proportionally large and maintains the over spill in concert with the rest of the page...this tells me its the snippet container sizing shifted out of the header and the header size has defaulted to the menu snippet height max, but no idea where this is located.

 

 

ragavanrajan
Super User
Super User

hi  @lisarinehart  , 
 You are in the right place of web template. There are some approaches which I think would fix your issue 
 
1. Try deleting your company logo and upload the fresh logo
2. Using Portal studio > Sync configuration > then Browse website 
 
Because we have not modified anything on web template. Now it will bring back your original version. 
 
Then using custom css in the portal studio resize the logo according to your wish. 
 
 custom.css.png

 


 

 

 

 

 

 

 

 

 

 

img{ height: 55px !important; width:55px !important; } 


The above css will definitely override the image size. 
 
Additional: 
 
1. In the header web template 
 
2  . If you wish you can also check line 44 on how the image height and width has been rendered
 

ragavanrajan_0-1607038032465.png

 


 
Hope this helps. 
 
PS: It is a coincidence I did exactly the same issue yesterday while setting up logo. 
 
------------
 
If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

View solution in original post

OliverRodrigues
Super User II
Super User II

The JS Function I believe is to set the navbar size for mobile/when resizing

you are at the right place, but the div you want to set the height is the one with the class navbar-header:

OliverRodrigues_0-1607073883945.png

 

Ideally you should set that in the CSS (create a new one instead of making changes to the OOB bootstrap). Just as an example I am setting directly in the div element in the Header Web Teamplte




If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Apps Portals Super User


Oliver Rodrigues


 

OliverRodrigues
Super User II
Super User II

hi @lisarinehart did my last answer help your issue? can you mark as the solution so other users can find it?

thanks




If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Apps Portals Super User


Oliver Rodrigues


 

thanks @ragavanrajan ! this worked great - (i tried to post a reply yesterday but there was a weird at every attempt.) I had to be creative and careful to delete just the image inside the snippet so as not to delete the snippet, then add a new image component, add the image & resize in the portal management html for the mobile header snippet (as I originally did). I will say that initially it looks like it might not work when you are going through the process, especially it if it's a large image that you are shrinking, but once you do that final step of resizing it goes right to where it belongs! (just in case anyone else is reading this and using this as their solution....be patient!) 

lisarinehart_0-1607447262652.png

 

Thanks @OliverRodrigues  - i did manage to get it without resizing the other snippet in the header template - that was going to be my next step. I will definitely keep that on the backburner if I need for other things. 🙂 definitely appreciate you help!

Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

Power Query PA Forum 768x460.png

Check it out!

Did you know that you can visit the Power Query Forum in Power BI and now Power Apps

V3_PVA CAmpaign Carousel.png

Community Challenge - Giveaways!

Participate in the Power Virtual Agents Community Challenge

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

Carousel April Dunnam Updated 768x460.jpg

Urdu Hindi D365 Bootcamp

Dont miss our very own April Dunnam’s The Developer Guide to the Galaxy! Find out what the Power Platform has to offer for the traditional developer.

Users online (4,445)