'Ext.js html vustom button codes are visible on grid onload ecen tab hided

When we add compnent to panel, which has, has html and rich external styles to modify buttons and select boxes how they appear When you load grid all the custom buttons styles are visible even tho the panel tap which the actual html are is hidden:

enter image description here

We are defining buttons appearence with css, I suspect style.css that is linked in index.php result to put these artifacts into css code:

body {
    background-color: DodgerBlue;
}
.tulostus {
    padding-top: 400px !important;
}
.settings {
    width: 100%;
    height: 100%;
}
.content {
    margin: auto;
    width: 800px;
    background-color: white;
    padding: 20px;
    padding-left;
    padding-right: 20px;
    font-family: Verdana;
    /* border-radius */
    //-webkit-border-radius: 20px;
    //-moz-border-radius: 20px;
    //border-radius: 20px;
    /* box-shadow */
    //box-shadow: 30px -30px teal;
}
.row-wrapper {
    margin: auto;
    width: 100%;
    vertical-align: center;
}
 .desc {
     position: relative;
     width: 200px;
}
 
.inline {
    display: inline-block;
}
table {
    width: 100%;
}
.option {
    width: 400px;
    text-wrap: none;
}
.info {
    width: 300px;
    text-wrap: none;
    text-align: right;
    padding-right: 15px;
}
.print-select {
    #padding-right: 10px;
}
.floatright {
    float: right;
    
}
.more {
    width: 100%;    
}   
.custom-select {
  #position: relative;
  #float:right;
  #padding-right: 20px;
  text-align: left;
  #width: inherit;
  
  background-color: DodgerBlue;
}
.button-div {
    #float: right;
}
select {
  #display: none; /*hide original SELECT element:*/
  padding: 15px 5px 15px 15px;
  border: none;
  font-family: Verdana;
  font-weight: bold;
  background-color: DodgerBlue;
  color: white;
  outline: none;
  min-width: 150px;
  #border-color: DodgerBlue;
  cursor: pointer;
  
  /*Poistetaan decoraatiot uutta nuolta varten */   
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;  
  &::-ms-expand { display: none };  
}
/*
.custom-select:focus{
    
    content: "▲";
    position: absolute;
    top: 5;
    left: calc(100% - 30px);
    #height: 100%;
    font-size: 60%;
    padding: 12px 7px;
    background-color: red;
    color: white;
    pointer-events: none;
}*/
.x-viewport, .x-viewport > .x-body {
    touch-action: auto;
}
label.custom-select {
    position: relative;
    display: inline-block;  
}
/* Select new arrow styling */
.custom-select:after {
    content: "▼";
    position: absolute;
    top: 4;
    left: calc(100% - 30px);
    #height: 100%;
    font-size: 80%;
    padding: 12px 7px;
    background-color: DodgerBlue;
    color: white;
    pointer-events: none;
}
option:hover {
    cursor: pointer;
}
option:hover,
option:focus,
option:active,
option:checked {
  #background: linear-gradient(#5A2569, #5A2569);
}

.no-pointer-events .custom-select:after {
    content: none;

}
.button {
  background-color: #2471a3;
  #appearance: none;
  border: none;
  color: white;
  padding: 14px 25px 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
.button:hover {
  cursor:pointer;
  /*background-color: rgba(0, 0, 0, 0.1);
  /*background-color: #4CAF50; /* Green */
  color: white;
}
.button:active {
  background-color: darkblue;
}
.small {
  padding: 4px 15px;
}
.red {
    background-color: red;
}
.red:active {
    background-color: darkred;
}

We are loading the component to panel to display custom html. And here is the ex.js code:

// Alustetaan tulostusnäkymä
var tulostaWeek = Ext.create('Ext.panel.Panel', {
    title: 'Print Week',
    //renderTo: Ext.getBody(),
    items: tulostaWeek2
});
// Alustetaan tulostusnäkymä
var tulostaWeek2 = Ext.create('Ext.Component', {
    title: 'Print Week',
    html: '<?php echo str_replace(array("\r", "\n"), '', file_get_contents('pdf-print/pdf-print.php'));?>',
    loadScripts: true,
    callback :  documentPrintLoaded (),
    scriptScope: this,
    Cls: "tulostus",
    width: "100%",
    height: "100%",
    padding: 0,
    autoScroll: true,
    style: {
        //color: '#FFFFFF',
        padding: '20px',
        backgroundColor:'DodgerBlue'
        //overflow: auto
    },
    renderTo: Ext.getBody()
});


//alustetaan tabpanel jonka sisältää centerweekin taulut
// Lisätty välilehti viikkotuntien tulostus
var tabPanelWeek = Ext.create('Ext.tab.Panel', {
    tabPosition: 'top',
    region: 'center',
    hidden: false,
    items: [
        centerWeek, tulostaWeek2
    ]
    /*listeners: {
        'render': {
            fn: function() {
                this.body.on('click', this.handleClick, this);
            },
            scope: content,
            single: true
        }
    }
    /*handleClick: function(e, t){
        alert('ok');
    } */       
});
htmlcssextjs


Solution 1:[1]

I have fixed this. The ext.js tulosta2 component intialiasation had renderto: which I removed so the component did not right away get rendered on top of display.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jeroi

Related Questions