PDA

Visualizza la versione completa : Conflitto tra le mie row e le row di bootstrap


he-man
11-04-2021, 13:43
Le mie row hanno questo css


.row:after {
content: "";
display: table;
clear: both;
}

e sono collegate a questo


<div class="row">
<div class="column" onclick="openTab('b1');" style="background:green;">Box 1</div>
<div class="column" onclick="openTab('b2');" style="background:blue;">Box 2</div>
<div class="column" onclick="openTab('b3');" style="background:red;">Box 3</div>
</div>


che apre questo

<div id="b1" class="containerTab" style="display:none;background:blue">
<span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
<div class="row">
<div class="col">immagine</div>
<div class="col"> <h2>Box 2</h2>
<p>Lorem ipsum..</p></div>
</div>
</div>
…b2,b3

Nell'ultima parte di codice ci sono le row di bootstrap, qui mi si genera il conflitto quando ripeto tutto il codice che ho postato per avere varie righe di tab a numero crescente.
Cioè tra una riga e un'altra mi si genera uno spazio che non voglio avere...
Potete indicarmi come risolvere? Grazie

KillerWorm
11-04-2021, 14:27
A livello di CSS puoi intervenire in vari modi. In generale basterebbe comporre un selettore più specifico. Nella parte bootstrap, quantomeno nel codice che hai postato, vedo che il contenitore ha classe containerTab; a questo punto, nel tuo CSS potresti usare un selettore del genere:


div:not(.containerTab) .row:after

he-man
11-04-2021, 17:43
containerTab ha questo css

.containerTab {
padding: 20px;
color: red;

}


Dici di rinominarlo?

KillerWorm
11-04-2021, 18:38
containerTab ha questo css
...
Dici di rinominarlo?
Non ho detto questo :confused: forse mi sono spiegato male.

Provo a riformulare. Dai codici da te postai vedo che il div.containerTab è un contenitore in cui è posta la griglia bootstrap. Suppongo che invece le tue row non si trovino dentro un contenitore con quella stessa classe, o mi sbaglio? Purtroppo dal solo codice postato non posso saperlo con esattezza.

Nel caso in cui la mia supposizione sia corretta, potresti usare una regola del genere per il CSS delle tue row:


div:not(.containerTab) .row:after {
content: "";
display: table;
clear: both;
}
Cioè attraverso :not(.containerTab) stai escludendo tutti i casi in cui .row si trovi dentro .containerTab. In tal modo le proprietà di questa regola dovrebbero risultare applicate alle tue sole row e non a quelle di bootstrap. E' questo ciò che stavi chiedendo?

Se non è ciò che volevi ti invito a fornire maggiori dettagli, magari anche un link della pagina dove poter verificare il problema.

he-man
12-04-2021, 08:17
Si, le mie row sono nella parte precedente. Ho provato a modificare nel modo che dici ma lo spazio tra il primo e il secondo blocco di immagini rimane. Posto il codice che ho


<style>
.grid {
float: left;
width: 25%;
padding: 6px;
text-align: center;
font-size: 25px;
cursor: pointer;

}


.containerTab {
padding: 20px;
color: #555555;

}

div:not(.containerTab) .row:after {
content: "";
display: table;
clear: both;
}


.closebtn {
float: right;
color: #aa1a2f;
font-size: 35px;
cursor: pointer;
}
.grid-thumbnail{
width: 100%;
height: auto;
}

</style>


</head>

<body>
<div class="row">
<div class="grid" onclick="openTab('b1');">
<img src="img.jpg" alt="..." class="grid-thumbnail">
</div>
<div class="grid" onclick="openTab('b2');">
<img src="img2.jpg" alt="..." class="grid-thumbnail">
</div>
<div class="grid" onclick="openTab('b3');">
<img src="img3.jpg" alt="..." class="grid-thumbnail">
</div>


</div>



<div id="b1" class="containerTab" style="display:none;background:#fff">
<span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
<div class="row">
<div class="col"><img src="img.jpg" alt="..." class="img-fluid"></div>
<div class="col"><h2 style="color:grey;">testo</h2><p>testo testo</p></div>
</div>

</div>

<div id="b2" class="containerTab" style="display:none;background:#fff">
<span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
<div class="row">
<div class="col"><img src="img2.jpg" alt="..." class="img-fluid"></div>
<div class="col"><h2 style="color:grey;">testo</h2><p>testo testo</p></div>
</div>

<div id="b3" class="containerTab" style="display:none;background:#fff">
<span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
<div class="row">
<div class="col"><img src="img3.jpg" alt="..." class="img-fluid"></div>
<div class="col"><h2 style="color:grey;">testo</h2><p>testo testo</p></div>
</div>
</div>


<div class="row">
<div class="grid" onclick="openTab('b4');">
<img src="img4.jpg" alt="..." class="grid-thumbnail">
</div>
<div class="grid" onclick="openTab('b5');">
<img src="img5.jpg" alt="..." class="grid-thumbnail">
</div>
<div class="grid" onclick="openTab('b6');">
<img src="img6.jpg" alt="..." class="grid-thumbnail">
</div>

</div>



<div id="b4" class="containerTab" style="display:none;background:#fff">
<span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
<div class="row">
<div class="col"><img src="img4.jpg" alt="..." class="img-fluid"></div>
<div class="col"><h2 style="color:grey;">testo</h2><p>testo testo</p></div>
</div>

</div>

<div id="b5" class="containerTab" style="display:none;background:#fff">
<span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
<div class="row">
<div class="col"><img src="img5.jpg" alt="..." class="img-fluid"></div>
<div class="col"><h2 style="color:grey;">testo</h2><p>testo testo</p></div>
</div>

<div id="b6" class="containerTab" style="display:none;background:#fff">
<span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
<div class="row">
<div class="col"><img src="img6.jpg" alt="..." class="img-fluid"></div>
<div class="col"><h2 style="color:grey;">testo</h2><p>testo testo</p></div>
</div>
</div>

<!---Poi il codice si ripete con numerazione crescente per averne altri uno sotto l'altro--->

KillerWorm
12-04-2021, 16:52
Ho provato a modificare nel modo che dici ma lo spazio tra il primo e il secondo blocco di immagini rimane
Hai ragione, errore mio :stordita:

Prova a correggere il selettore in questo modo:

:not(.containerTab) > .row:after

he-man
13-04-2021, 08:01
Provato ma credo che il problema non sia lì perchè lo spazio tra una riga e l'altra rimane. Inserisco le due parti di codice tra cui si forma il vuoto
<div id="b1" class="containerTab" style="display:none;background:#fff">
<span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
<div class="row">
<div class="col"><img src="img.jpg" alt="..." class="img-fluid"></div>
<div class="col"><h2 style="color:grey;">testo</h2><p>testo testo</p></div>
</div>

</div>

<div id="b2" class="containerTab" style="display:none;background:#fff">
<span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
<div class="row">
<div class="col"><img src="img2.jpg" alt="..." class="img-fluid"></div>
<div class="col"><h2 style="color:grey;">testo</h2><p>testo testo</p></div>
</div>

<div id="b3" class="containerTab" style="display:none;background:#fff">
<span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
<div class="row">
<div class="col"><img src="img3.jpg" alt="..." class="img-fluid"></div>
<div class="col"><h2 style="color:grey;">testo</h2><p>testo testo</p></div>
</div>
</div>


e


<div id="b4" class="containerTab" style="display:none;background:#fff">
<span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
<div class="row">
<div class="col"><img src="img4.jpg" alt="..." class="img-fluid"></div>
<div class="col"><h2 style="color:grey;">testo</h2><p>testo testo</p></div>
</div>

</div>

<div id="b5" class="containerTab" style="display:none;background:#fff">
<span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
<div class="row">
<div class="col"><img src="img5.jpg" alt="..." class="img-fluid"></div>
<div class="col"><h2 style="color:grey;">testo</h2><p>testo testo</p></div>
</div>

<div id="b6" class="containerTab" style="display:none;background:#fff">
<span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
<div class="row">
<div class="col"><img src="img6.jpg" alt="..." class="img-fluid"></div>
<div class="col"><h2 style="color:grey;">testo</h2><p>testo testo</p></div>
</div>
</div>

KillerWorm
13-04-2021, 17:11
Alcuni div risultano non chiusi (b2 e b5), è possibile che il problema sia dovuto a questo.

Controlla sempre la validazione del codice HTML. Può essere utile usare un validatore online, vedi https://validator.w3.org/

he-man
13-04-2021, 19:43
Mi sono accorto solo ora che modificando il codice con l'esclusione che mi hai consigliato il menu generale del sito subiva lo spppostamento del background. Vedo di fare il controllo di validazione con il programma che sto usando perchè sono in locale. Grazie

KillerWorm
13-04-2021, 20:08
Vedo di fare il controllo di validazione con il programma che sto usando perchè sono in locale
Bene, comunque puoi usare anche la scheda Validate by Direct Input di validator.w3.org (https://validator.w3.org/#validate_by_input) dove puoi copiaincollare il codice per analizzarlo direttamente.

Riguardo il problema, se puoi modificare il codice HTML, sarebbe forse meglio utilizzare un diverso nome per la tua classe row, oppure, nel caso in cui tu debba comunque sfruttare le regole di bootstrap per la tua classe, potresti aggiungere un'ulteriore classe in modo da poter comporre un selettore più specifico per le tue row.

Loading