Handling header that dynamically resizes

Good afternoon all, I have a web application that has a header area that changes it's height dynamically based on the information being displayed or the type of user that is logged in.   The issue I'm running into is when the height increases my breadcrumbs placeholder slides under the header, so only a portion is visible to the user.


This is the screen when no CTI or call hold event is active.   Everything is fine.


This is the screen when a CTI user is logged in and places their call on hold.  Not good

Here is my layout structure


I have been able to keep the breadcrumbs from being overlapped by adding a .margin-top: 50px; to the .content class, but I don't like this solution because it is in effect for our non-CTI users as well, causing the breadcrumbs/content section to be rendered further down the page than necessary.   

Am I missing something obvious here?   Is there a more elegant way to make sure my content is rendered below the header rather than behind?

Hi friend!

CSS is always something terrible to handle.

Have you tried to change the CSS to apply that magin-top only when the user is logged?

However, i think that issues are caused by the content of the placeholder, not the placholders itself...


Lenon Manhães wrote:

Hi friend!

CSS is always something terrible to handle.

Have you tried to change the CSS to apply that magin-top only when the user is logged?

However, i think that issues are caused by the content of the placeholder, not the placholders itself...



I don't think I know how to apply conditional CSS.  (it's not one of my strengths)


Solution

That's pretty simple. 

Do you alredy know what class you need to change, adding 50 px top, right? 

Create an expression, set the Escape Content property to No. Inside the expression, put the new class value exactly like:

"<style> .TheClassYouNeedToChange { margin-top:  50px!important; } </style>"

Using that way, your page will read the expression like a HTML.

After that, put this expression inside a true branch of an If. Set the If condition to CheckRegisteredRole(UserId:) (or many roles, or another condition as you need).

To finish, drag this If to the pages you're having the issue or to the footer placeholder to apply to all pages.

That's it. When you final user logs in, the class will be replaced by this new that we create now.


Solution

Gotcha, I did know how to apply via an expression but I didn't consider just adding that expression to the footer.   I was trying to find a straight CSS solution so I didn't have to update every web screen, but the footer suggestion solves that problem.   Thanks!

Josh Herron wrote:

Gotcha, I did know how to apply via an expression but I didn't consider just adding that expression to the footer.   I was trying to find a straight CSS solution so I didn't have to update every web screen, but the footer suggestion solves that problem.   Thanks!

I'm glad that was usefull.

Regards