CSS Code in Text Widget Causing Visual Distortion ... - Qlik Community

Asuod_ · ‎2024-09-26

Hi All,

I’m using a text widget where I’ve implemented HTML and CSS to display a landing page. However, when I navigate to the next sheet, the visuals on that sheet (and any others) appear distorted, as if they are zoomed out. If I refresh the page, the visuals return to normal, and the issue only seems to occur when transitioning directly from the landing page to another sheet. Moving between other sheets does not cause this issue.

Does anyone have any advice or potential solutions for addressing this distortion issue when switching from the landing page? Any help would be appreciated.

CSS code:

='<!DOCTYPE html>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

line-height: 1.6;

background-color: #ffffff;

color: #000;

display: flex;

justify-content: center;

}

.container360 {

width: 100%;

margin: 0 auto;

padding: 0;

}

header, nav, footer {

padding: 10px;

margin: 10px 0;

background-color: #fff;

width: 100%;

box-sizing: border-box;

}

header {

background: #502b85;

color: white;

display: flex;

align-items: center;

justify-content: space-between;

}

header .logo {

max-height: 65px;

}

header .header-images {

display: flex;

gap: 10px;

}

header .header-images img {

max-height: 65px;

}

header h1 {

font-size: 2.5em;

margin: 0;

}

nav {

background: #ffffff;

color: white;

text-align: center;

}

.nav-button {

background-color: #502b85;

color: white;

border: none;

padding: 10px 20px;

margin: 0 5px;

border-radius: 9px;

cursor: pointer;

font-size: 1em;

text-decoration: none;

display: inline-block;

}

.nav-button:hover {

background-color: #333;

}

.nav-button:active {

background-color: #555;

}

hr {

border: 1px solid #ddd;

margin: 20px 0;

}

.section {

display: flex;

flex-direction: column;

width: 100%;

margin: 10px auto;

text-align: left;

background-color: #fff;

box-sizing: border-box;

}

.column-container {

display: flex;

justify-content: space-between;

width: 100%;

box-sizing: border-box;

}

.column {

padding: 10px;

margin: 10px;

box-sizing: border-box;

}

.column-about {

flex: 0 0 60%;

border-right: 2px solid #F7F7F7;

padding: 10px;

}

.section .column-about h2 {

font-size: 18px;

}

.column-best-practices {

flex: 0 0 40%;

}

.section360 .column-best-practices h2 {

font-size: 18px;

}

.column-best-practices ul {

padding-left: 10px;

}

.column-best-practices ul li {

margin-left: 10px;

}

.column-advana-leadership,

.column-wf360-leadership,

.column-data-source,

.column-version {

flex: 1;

background-color: #F7F7F7;

}

table {

width: 100%;

border-collapse: collapse;

margin-top: 10px;

background-color: #fff;

}

table, th, td {

border: 1px solid #ddd;

padding: 12px;

text-align: left;

}

th {

background-color: #f2f2f2;

}

tr:nth-child(even) {

background-color: #f9f9f9;

}

.team-container {

display: flex;

gap: 20px;

}

.member {

padding: 10px;

}

footer {

background: #502b85;

color: white;

text-align: center;

}

.widgets-section {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

width: 100%;

margin: 20px 0;

}

.widget {

flex: 0 0 30%;

margin: 10px;

background-color: #f7f7f7;

padding: 10px;

text-align: center;

box-sizing: border-box;

border-radius: 5px;

transition: background-color 0.3s ease;

}

.widget:hover {

background-color: #e7e7e7;

}

.widget img {

max-width: 100%;

height: auto;

cursor: pointer;

}

</style>

marksouzacosta · ‎2024-09-26

Somehow the other sheets are inheriting the CSS code from the landing page. Do you have any control over the landing page HTML content? Maybe you can try two things:

1. Add an iframe tag and point to the URL of the landing page - if there is one.

2. Surround the whole HTML Body content with a DIV and add to it an exclusive ID. Then you have to change your CSS code to only apply to the elements inside this Div Id.

Read more at Data Voyagers - datavoyagers.net
Follow me on my LinkedIn | Know IPC Global at ipc-global.com

CSS Code in Text Widget Causing Visual Distortion on Other Sheets

General Question