DOMANDA Mantenere la formattazione di una pagina html dopo il refresh della pagina

Scripta14

Nuovo Utente
Buongiorno a tutti,

avrei bisogno qualche suggerimento sull'argomento. Premetto di essere nuovo con questo tipo di programmazione e non conosco tutti i segreti della materia. Sto cercando di realizzare una applicazione web che possa essere visualizzata sia su Pc e\o su smartphone. Per realizzare l'applicazione web sto utilizzando APEX di oracle. In questo momento mi sto occupando della parte grafica. La mia attuale difficoltà è di mantenere le modifiche che faccio al CSS della pagina. Quando faccio il refresh della pagina le area che ho creato perdono la formattazione iniziale.
APEX applicazione per la creazione di applicazione web collegate direttamente al DB oracle. Questa strumento di sviluppo consente di richiamare aree nelle quali poter lavorare. Le modifiche CSS vengono fatte su queste aree.
Quello che vorrei capire è come procedere in modo corretto per evitare quanto indicato nel titolo.

Grazie a tutti per l'aiuto
 

Skills07

Moderatore
Staff Forum
8,772
2,311
Hardware Utente
CPU
Ryzen 7 2700x
Dissipatore
Stock
Scheda Madre
Aourus Gigabyte X-470
Hard Disk
Samsung Evo 850 250gb,2tb toshiba, 500gb western digital, 160gb segate
RAM
16 gb G.Skill Tridentz 3200 mhz RGB
Scheda Video
Sapphire RX 580 8gb ddr5
Monitor
Samsung Smart TV Full HD 50 Pollici/ Hp ES 24 IPS
Alimentatore
XFX 80 plus 750 watt
Case
Aerecool xpredator x3
Sistema Operativo
Windows 10 Pro 64
posta un esempio di codice, perchè il CSS per essere responsive devi utilizzare dei media queries (ovvero visualizzare quel div o altro in maniera diversa in base alle risoluzioni)
 

Scripta14

Nuovo Utente
Ti riporto il codice. Apex prevede un template sul quale poter costruire una pagina. Inserendo delle area queste posso essere modificate.
Spero di averti fornito sufficienti informazioni.

Codice Html
Codice:
<div id="ARTICOLO">
<div id="P12_COD_PARTE_CONTAINER" class="ui-field-contain">
   <label for="P12_COD_PARTE" id="P12_COD_PARTE_LABEL">
   </label>
     <span id="P12_COD_PARTE" class="display_only apex-item-display-only">R1751608D469G</span>
</div>
<div id="P12_DES_PARTE_CONTAINER" class="ui-field-contain">
    <label for="P12_DES_PARTE" id="P12_DES_PARTE_LABEL"></label><span id="P12_DES_PARTE" class="display_only apex-item-display- only">LATTA 175x160 AN.3T BLU/GRE</span>
</div>
</div>
Codice CSS
Codice:
#ARTICOLO {
    display: flex;
    flex-direction: column;
    border-color: silver;
    border-style: solid;
    border-width: thin;
    /*line-height: 1px*/;
    padding-top:10px;
    margin-left: 3px;
    margin-right: 3px;
    padding-bottom:5px; 
}

.ui-field-contain {
  
    border-bottom-style: none;
}

#P12_COD_PARTE_CONTAINER {
    line-height: 1%;
    height: 20px;
    padding-top: 5px;
    font-size: 28px;
}
#P12_COD_PARTE {
    padding-top: 10px;
}

div#P12_DES_PARTE_CONTAINER {
    line-height: 1%;
    height: 20px;
    padding-top: 5px;
    margin-bottom: -2px;
    font-size: 20px;
}

#P12_DES_PARTE {
    white-space: nowrap;
    word-break: break-all;
}
 

Skills07

Moderatore
Staff Forum
8,772
2,311
Hardware Utente
CPU
Ryzen 7 2700x
Dissipatore
Stock
Scheda Madre
Aourus Gigabyte X-470
Hard Disk
Samsung Evo 850 250gb,2tb toshiba, 500gb western digital, 160gb segate
RAM
16 gb G.Skill Tridentz 3200 mhz RGB
Scheda Video
Sapphire RX 580 8gb ddr5
Monitor
Samsung Smart TV Full HD 50 Pollici/ Hp ES 24 IPS
Alimentatore
XFX 80 plus 750 watt
Case
Aerecool xpredator x3
Sistema Operativo
Windows 10 Pro 64
ok e fino a qui vedo un div "contenitore"...
mostrami una foto del problema, senza formattazione e come esegui il tutto
 

Scripta14

Nuovo Utente
Prima delle modifiche
1559036192024.png


Dopo una modifica, quando eseguo un refresh
1559036255054.png


Come puoi vedere mi cambia la formattazione.
Queste sono le immagini realtive al frammento di codice che ho allegato precedentemente.
 

Skills07

Moderatore
Staff Forum
8,772
2,311
Hardware Utente
CPU
Ryzen 7 2700x
Dissipatore
Stock
Scheda Madre
Aourus Gigabyte X-470
Hard Disk
Samsung Evo 850 250gb,2tb toshiba, 500gb western digital, 160gb segate
RAM
16 gb G.Skill Tridentz 3200 mhz RGB
Scheda Video
Sapphire RX 580 8gb ddr5
Monitor
Samsung Smart TV Full HD 50 Pollici/ Hp ES 24 IPS
Alimentatore
XFX 80 plus 750 watt
Case
Aerecool xpredator x3
Sistema Operativo
Windows 10 Pro 64
allora iniziamo a fare cosi, quando esegui il refresh apri la consolle del browser e andiamo a vedere gli attributi css come sono modificati cosi riusciamo a capire il perchè
 
  • Mi piace
Reactions: tomm891

Scripta14

Nuovo Utente
Scusami, ma sono poco pratico dello strumento. Io sto utilizzando Chrome. Per console intendi entrare con "Ispeziona"? Ho provato a vedere le proprietà che ho precedentemente indicato nel file .CSS da me creato, ma non mi sembra di vedere delle modifiche.
 

Skills07

Moderatore
Staff Forum
8,772
2,311
Hardware Utente
CPU
Ryzen 7 2700x
Dissipatore
Stock
Scheda Madre
Aourus Gigabyte X-470
Hard Disk
Samsung Evo 850 250gb,2tb toshiba, 500gb western digital, 160gb segate
RAM
16 gb G.Skill Tridentz 3200 mhz RGB
Scheda Video
Sapphire RX 580 8gb ddr5
Monitor
Samsung Smart TV Full HD 50 Pollici/ Hp ES 24 IPS
Alimentatore
XFX 80 plus 750 watt
Case
Aerecool xpredator x3
Sistema Operativo
Windows 10 Pro 64
ti mando un esempio

1559040198321.png


come vedi sulla destra hai tutto il css e da li possiamo vedere cosa ti si modifica rispetto al tuo di partenza selezionando l'elemento a sinistra
 
  • Mi piace
Reactions: Mursey

Scripta14

Nuovo Utente
ok grazie. Ti ho allegato una sequenza di file pre e post refresh della parte che riguarda il div Articolo. Spero vado bene quanto ti ho allegato.
 

Allegati

Skills07

Moderatore
Staff Forum
8,772
2,311
Hardware Utente
CPU
Ryzen 7 2700x
Dissipatore
Stock
Scheda Madre
Aourus Gigabyte X-470
Hard Disk
Samsung Evo 850 250gb,2tb toshiba, 500gb western digital, 160gb segate
RAM
16 gb G.Skill Tridentz 3200 mhz RGB
Scheda Video
Sapphire RX 580 8gb ddr5
Monitor
Samsung Smart TV Full HD 50 Pollici/ Hp ES 24 IPS
Alimentatore
XFX 80 plus 750 watt
Case
Aerecool xpredator x3
Sistema Operativo
Windows 10 Pro 64
l'attiributo ui-field contain cambia valori sostanzilamente in uno solo:
padding passa da 2.5 px a 0.8 em il resto rimane invariato.
Questo attributo probabilmente crea l'effetto ottico che mi hai mandato sopra.
Ma mi occorre qualche info in più e capire come e quando fai il refresh
 
  • Mi piace
Reactions: Moffetta88

Scripta14

Nuovo Utente
I passaggi che faccio sono:
1)Faccio le modifiche CSS nella console
2)aggiorno il file .css con le modifiche che ho fatto a console
3)importo il file modificato all'interno di APEX
4)premo F5 per fare il refresh della pagina.
Non sapendo se conosci APEX aggiungo che APEX consente di utilizzare uno schema per soluzioni desktop e uno schema per soluzioni mobile(quantomeno fino alla versione 5.1). Quindi in console ho attivato la device Toolbar.
 

Skills07

Moderatore
Staff Forum
8,772
2,311
Hardware Utente
CPU
Ryzen 7 2700x
Dissipatore
Stock
Scheda Madre
Aourus Gigabyte X-470
Hard Disk
Samsung Evo 850 250gb,2tb toshiba, 500gb western digital, 160gb segate
RAM
16 gb G.Skill Tridentz 3200 mhz RGB
Scheda Video
Sapphire RX 580 8gb ddr5
Monitor
Samsung Smart TV Full HD 50 Pollici/ Hp ES 24 IPS
Alimentatore
XFX 80 plus 750 watt
Case
Aerecool xpredator x3
Sistema Operativo
Windows 10 Pro 64
aspetta non mi è chiara una cosa...
io faccio app web di lavoro, in che senso modifichi da console il css?
tu il css dovresti averlo già scritto e come ti ho detto per lavorare con il responsive (ovvero layout mobili) devi fare una roba cosi:
CSS:
@media only screen and (min-width : 375px){
    .button {
        display: inline-block;
        position: relative;
        width: 150px;
        height: 40px;
        line-height: 32px;
        border-radius: 2px;
        font-size: 0.9em;
        background-color: #2c3e50;
        color: #FFF;
        margin-left: 20px;
        cursor: pointer;
    }

        .button.raised {
            transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            transition-delay: 0.2s;
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
        }

            .button.raised:active {
                box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
                transition-delay: 0s;
            }

            .button.raised:hover {
                background-color: #D3D3D3;
                color: black;
            }


    .button2 {
        display: inline-block;
        position: relative;
        width: 150px;
        height: 40px;
        line-height: 32px;
        border-radius: 2px;
        font-size: 0.9em;
        background-color: #2c3e50;
        color: #FFF;
        margin-left: 15px;
        cursor: pointer;
    }

        .button2.raised {
            transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            transition-delay: 0.2s;
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
        }

            .button2.raised:active {
                box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
                transition-delay: 0s;
            }

            .button2.raised:hover {
                background-color: #D3D3D3;
                color: black;
            }
}
ad esempio questa porzione di codice css funziona solo ed esclusivamente per schermi a risoluzione come indicata nella prima riga.
Se eseguito da uno schermo piu grande non attua le classi css scritte qui dentro
 
  • Mi piace
Reactions: tomm891

RCCRD

Utente Attivo
aspetta non mi è chiara una cosa...
io faccio app web di lavoro, in che senso modifichi da console il css?
tu il css dovresti averlo già scritto e come ti ho detto per lavorare con il responsive (ovvero layout mobili) devi fare una roba cosi:
CSS:
@media only screen and (min-width : 375px){
    .button {
        display: inline-block;
        position: relative;
        width: 150px;
        height: 40px;
        line-height: 32px;
        border-radius: 2px;
        font-size: 0.9em;
        background-color: #2c3e50;
        color: #FFF;
        margin-left: 20px;
        cursor: pointer;
    }

        .button.raised {
            transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            transition-delay: 0.2s;
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
        }

            .button.raised:active {
                box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
                transition-delay: 0s;
            }

            .button.raised:hover {
                background-color: #D3D3D3;
                color: black;
            }


    .button2 {
        display: inline-block;
        position: relative;
        width: 150px;
        height: 40px;
        line-height: 32px;
        border-radius: 2px;
        font-size: 0.9em;
        background-color: #2c3e50;
        color: #FFF;
        margin-left: 15px;
        cursor: pointer;
    }

        .button2.raised {
            transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            transition-delay: 0.2s;
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
        }

            .button2.raised:active {
                box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
                transition-delay: 0s;
            }

            .button2.raised:hover {
                background-color: #D3D3D3;
                color: black;
            }
}
ad esempio questa porzione di codice css funziona solo ed esclusivamente per schermi a risoluzione come indicata nella prima riga.
Se eseguito da uno schermo piu grande non attua le classi css scritte qui dentro
Secondo me lui intende che fa una modifica momentanea sul css da console per "simulare" la modifica, e poi prova a scriverla dentro il file css vero e proprio
 

Skills07

Moderatore
Staff Forum
8,772
2,311
Hardware Utente
CPU
Ryzen 7 2700x
Dissipatore
Stock
Scheda Madre
Aourus Gigabyte X-470
Hard Disk
Samsung Evo 850 250gb,2tb toshiba, 500gb western digital, 160gb segate
RAM
16 gb G.Skill Tridentz 3200 mhz RGB
Scheda Video
Sapphire RX 580 8gb ddr5
Monitor
Samsung Smart TV Full HD 50 Pollici/ Hp ES 24 IPS
Alimentatore
XFX 80 plus 750 watt
Case
Aerecool xpredator x3
Sistema Operativo
Windows 10 Pro 64
beh, li dipende dall'IDE che usi... ci sono alcuni IDE che prendono la modifica del file (ma browser come chrome i css li salvano in cache, e se non la svuoti) la tua modifica non la vedi
 

Entra

oppure Accedi utilizzando