cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Announcements

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.

2461
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.

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted

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

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

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

thanks and this is using CSS?

Highlighted

according to w3c yes.

Highlighted

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

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

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

Highlighted

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

Thank you Jason

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

Highlighted

Can you explain

Also do you have final screenshot

Thanks

Highlighted

Unbenannt.JPG

Content for Community-Ad