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

[Scripta14]

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]

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]

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

<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

#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]

ok e fino a qui vedo un div "contenitore"...
mostrami una foto del problema, senza formattazione e come esegui il tutto

 

[Scripta14]

Prima delle modifiche


Dopo una modifica, quando eseguo un refresh


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

 

[Skills07]

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è

 

[Scripta14]

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]

ti mando un esempio



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

 

[Scripta14]

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.

 

[Skills07]

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

 

[Scripta14]

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.

 

[RCCRD]

Possibile che non ci sia una corretta correlazione tra il .html e .css?

 

[Skills07]

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:

@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

 

[RCCRD]

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:

@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]

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