App Development

[jmcy2408]

Hi,

We have custom themes on our Qlik Saas tenant built by myself.  I'm not wizz at CSS but know some basics and making use of the community has helped me build a theme for our company.  When i apply it, the rendering of the Objects Title for a Straight or Pivot table is indented at the left hand side, see below.  All other objects the title width and background colour fits the full length of the object and i dont understand why nor can i correct it.  Is it the build of those objects within Qlik itself that prevents this or something in my code? 

Sample of the CSS

:root {
  --colour1: 		#1976D2;
  --colour2:		#F4792C;
  --image: 			url(images/logo.png);
  --white: 			#FFFFFF;
  --black: 			#000000;
  --grey:			#B3B4B2;	
}

/* Sheet*/
.qvt-sheet {background: var(--white) !important;}
	
/* Document border*/
.qv-panel-stage .flex-row {background-color: var(--colour2);}
.qv-panel-sheet {border-radius: 3px; margin: 5px;}

/*qv-object*/
.qv-object .qv-object-title{background-color: var(--colour1); margin-top: 5px}
.qv-object .qv-object-title-text{margin-left:auto; margin-right:auto; color: var(--white);}


/* Sheet Titles */
.qv-panel-sheet .sheet-title-container {background: linear-gradient(to right, var(--colour1), var(--white));}
.qv-panel-sheet .sheet-title-text {background-image: var(--image); background-repeat: no-repeat; background-size: contain; background-position: right;}

Any ideas?

Thanks 

John