Support Article
User section does not render correctly in Mobile view
SA-79718
Summary
User section does not render correctly in Mobile view.
Sections are truncated either by white space or gray space in the Portrait or Landscape mode.
Error Messages
Not Applicable.
Steps to Reproduce
- Launch the Case Manager portal using the Chrome browser
- Click change password
- Change to Portrait from the Landscape mode or vice versa
Root Cause
An issue in the custom application code or rules.
Resolution
Perform the following local-change:
Create a non-autogenerated section:
1. Add the below code in the forgotpassword section (non-autogenerated section)
<style>
.layout-noheader-workarea_beyond_bg {
background-color: transparent;
}
.layout-noheader-workarea_beyond_bg>.layout-body {
background-image: none;
background-color: transparent;
}
form {
background-image: url(./Beyond/BeyondLoginBackground.jpg);
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
border: none;
height: auto !important;
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
form {
height: 100% !important;
}
}
@media (min-width: 1025px) and (min-height: 900px) {
form {
height: auto !important;
}
}
@media (min-width: 1025px) and (min-height: 901px) {
form {
height: 100% !important;
}
}
</style>
2. Add the below code in the registration section (non-autogenerated section)
<style>
.layout-noheader-workarea_beyond_bg {
background-color: transparent;
}
.layout-noheader-workarea_beyond_bg>.layout-body {
background-image: none;
background-color: transparent;
}
form {
background-image: url(./Beyond/BeyondLoginBackground.jpg);
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
border: none;
height: auto !important;
}
@media (min-width: 1024px) and (orientation: portrait) {
form {
height: 100% !important;
}
}
</style>
Published August 19, 2019 - Updated December 2, 2021
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.