custom CSS messed up when viewing page as tab override

  • 1
  • Question
  • Updated 1 year ago
  • In Progress
This is driving me nuts. I have a page that has a page include. The included page has some custom CSS. When I view the page directly by using the URL from the 'Preview' button, it render's perfectly. However, I use the page as a tab override. I have the tab it overrides set at the app default tab so that when a user logs in, the first "home page" is my custom skuid page. The problem is that the custom CSS on the page include is all messed up. It only happens when accessing the page through the tab override. If I go to it directly, it renders just right. Any Ideas?
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb

Posted 1 year ago

  • 1
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
More info on this:

When I navigate to the page using the URL the ends with this, the custom CSS loads correctly.
/apex/skuid__ui?page=Dashboard_1

When I navigate to the page using the URL the ends with this, the custom CSS loads INCORRECTLY.
/apex/Dashboard_1

When I navigate to the page using the URL the ends with this, the custom CSS loads INCORRECTLY.
/apex/Dashboard_1?sfdc.tabName=01r150000003n40
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
Can you share your custom CSS that isn't working?
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
Hi Stephen,
Here is the CSS:

.TransparentButtonClass.ui-button, .ui-widget-content .TransparentButtonClass.ui-button.ui-state-default, .TransparentButtonClass.ui-button.ui-state-active, .ui-widget-content .TransparentButtonClass.ui-button.ui-state-default.ui-state-active, .TransparentButtonClass.ui-button.ui-state-hover, .ui-widget-content .TransparentButtonClass.ui-button.ui-state-default.ui-state-hover, .TransparentButtonClass.ui-button.ui-state-focus, .ui-widget-content .TransparentButtonClass.ui-button.ui-state-default.ui-state-focus {
    background: transparent;
    font-family: Georgia,serif;
    font-size: 12px;
    font-weight: 600;
    color: black;
    border: none;
    /* border-bottom: 3px solid #0097a7; */
    box-shadow: 0px 0 rgba(0,0,0,0.2);
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    padding: 0px;}
.TransparentButtonClass.ui-button .ui-button-text {
    padding-right: 5px;
    padding-top:0px;
    padding-bottom:0px;
    display: inline-block;
}