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.
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.
Solved! Go to Solution.
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>
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?
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:
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>
thanks and this is using CSS?
according to w3c yes.
Are you putting this into the CSS file and uploading it as a theme? Where/how is the code being introduced to the portal
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.
Thanks I will check to see how to make this work, it may take a couple days
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>
Thank you Jason
looks like the media setting isn't applied correctly. But that's fine for me.
Can you explain
Also do you have final screenshot
Thanks