Dataset view bug

359
2
Jump to solution
05-27-2021 05:09 AM
MartinDvořák
New Contributor II

Advise needed. After launching new version of ArcGIS Hub, our custom header code is not working properly when viewing the redesigned content of datasets (see pic1) - icons "info", "filter", "download", "favourites" have some kind of transparency and I don´t know how to fix it in CSS. The similar mistake appears when clicking on "I want to use this" at the left lower corner (see pic2). 

Does anyone have any ideas? Many many thanks

Martin (dvorak.martin@brno.cz)

Here is the css code: 

.align-items-center {
display: flex;
align-items: center;
}
@media screen and (min-width: 769px) {
.navbar-wrapper {
display: flex !important;
align-items: center;
}
}
.nav-wrap{
text-transform: uppercase;

}
.navbar-nav > li >a {
/*color: #da2128;*/
color: black;
font-weight: bold;
font-size: 14px;

}
.navbar-nav > li >ul>li>a {
color: black;
font-weight: bold;
}
.navbar-nav > li >a:hover{
color:#da2128;
background-color: transparent;
cursor: pointer;
}

.navbar-nav > li >ul>li>a:hover{
color:#da2128;
background-color: transparent;
cursor: pointer;
}

.navbar-nav > li >ul>li>ul>li>a:hover{
color:#da2128;
background-color: transparent;
cursor: pointer;
}

.navbar-nav > li >ul>li>ul>li>a{
color: black;
font-weight: bold;
}

.navbar-header{
text-align:right;
}
.navbar-toggle {
float: none;
/*margin-right:25px;*/
}
.dropdown-menu{
background: rgba(255,255,255,0.9) !important;
text-align: left;
}

.submenu{
left:100%;
top:0px;
}

.nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .nav .open>a:visited {
background-color: #f2f2f2;
border-color: #f2f2f2;
opacity: 0.5;
}
.navbar-nav > .active > a:focus {
background-color: #ffffff;
opacity: 1.0;
}
.navbar-default {
display: none;
}
@media screen and (max-width: 1025px) {
.navbar-default {
display: block;
}
}
@media screen and (min-width: 769px) {
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
#main-menu{
float:right!important
}
}

@media screen and (max-width: 768px) {
.navbar {
min-height: auto;
}
.navbar-toggle {
margin: 0;
padding: 0;
}
.navbar-toggle h4 {
margin-top: 0;
}
.first-tier {
height: 50px;
}
.first-tier .row {
margin: 5px 0;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
}
ul.nav.navbar-nav {
display: block;
position:relative;
}
ul.dropdown-menu{
display: block;
border-style:none;
}
.submenu{
left:0%;
top:auto;
}
.navbar-collapse .dropdown-menu {
position: static;
top: auto;
left: auto;
display: none;
float: none;
max-width: none;
padding: 0;
margin: 0 15px;
background-color: transparent;
border: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.navbar-collapse .open > .dropdown-menu {
display: block;
}
.dropdown-menu .submenu {
display: block;
}
.navbar-collapse .dropdown-menu:before,
.navbar-collapse .dropdown-menu:after {
display: none;
}
.navbar-collapse .nav > li > .dropdown-menu:before,
.navbar-collapse .nav > li > .dropdown-menu:after {
display: none;
}
}


@media (min-width: 1200px){
.container {
width: 1200px !important;
padding-left: 0;
padding-right: 0;
}
}

/* HUB TOOLBAR */
#hub-toolbar, .side-panel-tab-controls {
background: #DA2128 !important;
}
#hub-toolbar .active, .side-panel-tab-controls .active {
background: white !important;
}
#hub-toolbar .active svg, .side-panel-tab-controls .active svg {
fill: #DA2128 !important;
}

#hub-toolbar .stacked-icon svg, .side-panel-tab-controls svg {
fill: white !important;
}

 

 

0 Kudos
1 Solution

Accepted Solutions
KlaraSchmitt
Esri Contributor

@MartinDvořák 

I'm sorry that is happening. I believe what you are seeing is that you have `transparent` set as your Body Background Color in the site theme. You'd want to change that to something solid, maybe white `#ffffff` because we use that variable in many places. You can learn more in my post about how theming gets applied.

View solution in original post

2 Replies
KlaraSchmitt
Esri Contributor

@MartinDvořák 

I'm sorry that is happening. I believe what you are seeing is that you have `transparent` set as your Body Background Color in the site theme. You'd want to change that to something solid, maybe white `#ffffff` because we use that variable in many places. You can learn more in my post about how theming gets applied.

View solution in original post

MartinDvořák
New Contributor II

Dear Klara, thanks a lot for a quick response. It wasn´t necessary to change it on css code, but only in the general theme setup (body background color was set to transparent, so I changed it according your advice). Many thanks

0 Kudos