cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Announcements
Announcements
Choose one of the topics below to view our ISE Resources to help you on your journey with ISE

This community is for technical, feature, configuration and deployment questions.
For production deployment issues, please contact the TAC! We will not comment or assist with your TAC case in these forums.
Please see How to Ask the Community for Help for other best practices.

2064
Views
0
Helpful
11
Replies
Highlighted
Enthusiast

How to center ISE content in a frame.

Hi,

did somebody has a code snippet to center the guest portal login box vertically?

all of my attempts lead to a complete deformation of the box.

Everyone's tags (5)
1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Cisco Employee

Re: center ise content frame

Try this one out

<style>

    .cisco-ise-main-content {
        position: fixed;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    #ui_login_content_label,
    #ui_login_instruction_message {
        margin: 0 ! important ;
        width: 100% ;
    }

    @media(max-width: 80em) {

        #ui_login_content_label,
        #ui_login_instruction_message {
            max-width: 280px;
        }
    }
    @media all and ( min-width: 60em ) {
        
        #ui_login_content_label,
        #ui_login_instruction_message {
            max-width: 380px ! important ;
        }
    }

</style>

View solution in original post

11 REPLIES 11
Highlighted
Cisco Employee

Re: center ise content frame

You would like the same space above and below the login box regardless of the page size? Can you send a screenshot of what you have now?

Highlighted
Enthusiast

Re: center ise content frame

Hi,

looks like it's placed correct in the center of the screen but as you can see it's a bit smaller than normal

screen:

Unbenannt.jpg

code:

<style>

.cisco-ise-main-content {

position: fixed;

top: 50%;

left: 50%;

margin-right: -50%;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

</style>

Highlighted
Cisco Employee

Re: center ise content frame

thanks and this is using CSS?

Highlighted
Enthusiast

Re: center ise content frame

according to w3c yes.

Highlighted
Cisco Employee

Re: center ise content frame

Are you putting this into the CSS file and uploading it as a theme? Where/how is the code being introduced to the portal

Highlighted
Enthusiast

Re: center ise content frame

doesn't matter if you put this in an optional content box or in the css itself.

Currently i paste this in the optional content field.

Highlighted
Cisco Employee

Re: center ise content frame

Thanks I will check to see how to make this work, it may take a couple days

Highlighted
Cisco Employee

Re: center ise content frame

Try this one out

<style>

    .cisco-ise-main-content {
        position: fixed;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    #ui_login_content_label,
    #ui_login_instruction_message {
        margin: 0 ! important ;
        width: 100% ;
    }

    @media(max-width: 80em) {

        #ui_login_content_label,
        #ui_login_instruction_message {
            max-width: 280px;
        }
    }
    @media all and ( min-width: 60em ) {
        
        #ui_login_content_label,
        #ui_login_instruction_message {
            max-width: 380px ! important ;
        }
    }

</style>

View solution in original post

Highlighted
Enthusiast

Re: center ise content frame

Thank you Jason

looks like the media setting isn't applied correctly. But that's fine for me.

Highlighted
Cisco Employee

Re: center ise content frame

Can you explain

Also do you have final screenshot

Thanks

Highlighted
Enthusiast

Re: center ise content frame

Unbenannt.JPG