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

Scripta14

Nuovo Utente
94
8
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
14,986
4,324
CPU
Ryzen 7 2700x
Dissipatore
Deepcool gammax l240 v2
Scheda Madre
Aourus Gigabyte X-470 ultra gaming
Hard Disk
Samsung Evo 850 250gb,2tb toshiba, 500gb western digital, 256 Ssd silicon power
RAM
16 gb G.Skill Tridentz 3200 mhz RGB
Scheda Video
KFA2 Rtx 2070 super
Monitor
Acer Predator 144hz 2k IPS 27", Hp ES 24" 60 Hz FHD
Alimentatore
Seasonic Focus 650w 80 platinum
Case
Coolermaster h500p
Periferiche
Razer Electra V2
Internet
Fibra Tim 100mb
Sistema Operativo
Windows 10 Pro 64 bit
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
94
8
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
14,986
4,324
CPU
Ryzen 7 2700x
Dissipatore
Deepcool gammax l240 v2
Scheda Madre
Aourus Gigabyte X-470 ultra gaming
Hard Disk
Samsung Evo 850 250gb,2tb toshiba, 500gb western digital, 256 Ssd silicon power
RAM
16 gb G.Skill Tridentz 3200 mhz RGB
Scheda Video
KFA2 Rtx 2070 super
Monitor
Acer Predator 144hz 2k IPS 27", Hp ES 24" 60 Hz FHD
Alimentatore
Seasonic Focus 650w 80 platinum
Case
Coolermaster h500p
Periferiche
Razer Electra V2
Internet
Fibra Tim 100mb
Sistema Operativo
Windows 10 Pro 64 bit
ok e fino a qui vedo un div "contenitore"...
mostrami una foto del problema, senza formattazione e come esegui il tutto
 

Scripta14

Nuovo Utente
94
8
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
14,986
4,324
CPU
Ryzen 7 2700x
Dissipatore
Deepcool gammax l240 v2
Scheda Madre
Aourus Gigabyte X-470 ultra gaming
Hard Disk
Samsung Evo 850 250gb,2tb toshiba, 500gb western digital, 256 Ssd silicon power
RAM
16 gb G.Skill Tridentz 3200 mhz RGB
Scheda Video
KFA2 Rtx 2070 super
Monitor
Acer Predator 144hz 2k IPS 27", Hp ES 24" 60 Hz FHD
Alimentatore
Seasonic Focus 650w 80 platinum
Case
Coolermaster h500p
Periferiche
Razer Electra V2
Internet
Fibra Tim 100mb
Sistema Operativo
Windows 10 Pro 64 bit
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
94
8
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
14,986
4,324
CPU
Ryzen 7 2700x
Dissipatore
Deepcool gammax l240 v2
Scheda Madre
Aourus Gigabyte X-470 ultra gaming
Hard Disk
Samsung Evo 850 250gb,2tb toshiba, 500gb western digital, 256 Ssd silicon power
RAM
16 gb G.Skill Tridentz 3200 mhz RGB
Scheda Video
KFA2 Rtx 2070 super
Monitor
Acer Predator 144hz 2k IPS 27", Hp ES 24" 60 Hz FHD
Alimentatore
Seasonic Focus 650w 80 platinum
Case
Coolermaster h500p
Periferiche
Razer Electra V2
Internet
Fibra Tim 100mb
Sistema Operativo
Windows 10 Pro 64 bit
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
94
8
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
14,986
4,324
CPU
Ryzen 7 2700x
Dissipatore
Deepcool gammax l240 v2
Scheda Madre
Aourus Gigabyte X-470 ultra gaming
Hard Disk
Samsung Evo 850 250gb,2tb toshiba, 500gb western digital, 256 Ssd silicon power
RAM
16 gb G.Skill Tridentz 3200 mhz RGB
Scheda Video
KFA2 Rtx 2070 super
Monitor
Acer Predator 144hz 2k IPS 27", Hp ES 24" 60 Hz FHD
Alimentatore
Seasonic Focus 650w 80 platinum
Case
Coolermaster h500p
Periferiche
Razer Electra V2
Internet
Fibra Tim 100mb
Sistema Operativo
Windows 10 Pro 64 bit
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
94
8
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
14,986
4,324
CPU
Ryzen 7 2700x
Dissipatore
Deepcool gammax l240 v2
Scheda Madre
Aourus Gigabyte X-470 ultra gaming
Hard Disk
Samsung Evo 850 250gb,2tb toshiba, 500gb western digital, 256 Ssd silicon power
RAM
16 gb G.Skill Tridentz 3200 mhz RGB
Scheda Video
KFA2 Rtx 2070 super
Monitor
Acer Predator 144hz 2k IPS 27", Hp ES 24" 60 Hz FHD
Alimentatore
Seasonic Focus 650w 80 platinum
Case
Coolermaster h500p
Periferiche
Razer Electra V2
Internet
Fibra Tim 100mb
Sistema Operativo
Windows 10 Pro 64 bit
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
280
65
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
14,986
4,324
CPU
Ryzen 7 2700x
Dissipatore
Deepcool gammax l240 v2
Scheda Madre
Aourus Gigabyte X-470 ultra gaming
Hard Disk
Samsung Evo 850 250gb,2tb toshiba, 500gb western digital, 256 Ssd silicon power
RAM
16 gb G.Skill Tridentz 3200 mhz RGB
Scheda Video
KFA2 Rtx 2070 super
Monitor
Acer Predator 144hz 2k IPS 27", Hp ES 24" 60 Hz FHD
Alimentatore
Seasonic Focus 650w 80 platinum
Case
Coolermaster h500p
Periferiche
Razer Electra V2
Internet
Fibra Tim 100mb
Sistema Operativo
Windows 10 Pro 64 bit
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