Skip to main content

Welkom bij Joomla!NL

Om alle mogelijkheden van dit forum te kunnen gebruiken, moet je je eerst registreren.

Vermeld in iedere vraag duidelijk:
  1. De versie van Joomla! 4.X die je gebruikt
  2. De volledige url van je website indien mogelijk.
  3. De versie van de extensie waar de vraag over gaat.
Maak altijd een backup!

opgelost Responsive sitebars in Joomla4 ??

Responsive sitebars in Joomla4 ??

21 okt 2022 00:22
#1
Mijn ervaring is dat Joomla 4 geen responsive sidebars heeft. Nu is responsive een lastig begrip want letterlijk vertaald is responsive niet meer dan 'snel reagerend'.

Maar het gaat mij om de aanpassing van de site als hij wordt weergegeven op een mobieltje.
Op mijn Joomla4 testsite werden plaatjes in de sidesbars weergegeven als te kleine kleine postzegels links en rechts van de middenkolom die dan ook al niet meer optimaal is.

In Joomla 3 werkte dit allemaal perfect. Op een mobieltje integreerde de linker sidebar naadloos in de middenkolom. Zie voorbeeld: de-radio-amateur.nl/lpam-antenne

O. ja, de side bars gebruik ik niet vanaf de top van een pagina. Ik wil namelijk het topmenu en de openingsfoto schermbreed laten zien.

Bovenstaand probleem heb ik in mijn J4 testsite opgelost met HTML code, User CSS code en een query in de user.css. Zie voorbeeld: www.koostest.online/lpam-antenne
Voor de code zie bijlage.
Deze bijlage is verborgen voor gasten.
Login of registreer om deze te zien.


Maar Astrid liet me laatst op dit forum weten weten dat de sidebars in Joomla 4 wel degelijk responsive zijn!

Daarom mijn vraag: Als er betere en minder bewerkelijke oplossingen zijn dan de mijne wil ik daar graag kennis van nemen.
  • Radio
  • Radio's berichtenfoto Heeft onderwerp gestart
  • Joomla!NL ontdekker
  • Joomla!NL ontdekker
  • Berichten: 34

Responsive sitebars in Joomla4 ??

21 okt 2022 10:40
#2
Responsive betekent niet snel reagerend, maar aanpassen aan schermbreedte.
Jij gebruikt geen sidebars, maar divs om de foto's links van de tekst te plaatsen. Daar zie ik zo ook geen andere oplossing voor.
Groetjes, Astrid
Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725
Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.
  • Astrid
  • Astrid's Profielfoto
  • Moderator + Technisch team
  • Moderator + Technisch team
  • Berichten: 37437

Responsive sitebars in Joomla4 ??

21 okt 2022 15:28
#3
Dat klopt Astrid.

Maar die DIV's mogen van mij best weg hoor.

Ik vraag me af of J4 dezelfde responsive functionaliteit kan bieden als J3. En tot nu toe lijkt het alleen maar een verslechtering.

Maar ik ben nieuw in J4 (nu 2 weken) dus zie misschien mogelijkheden over het hoofd.

Wat ik zie is dat de sidebars alleen in een smal scherm werken en niet in een full wide screen.

Daarbij zie ik dat die sidebars in combinatie met een small scherm op een mobieltje alle content onder de middenkolom kwakken. Van horizontale integratie zoals ik die op J3 heb is geen sprake.

Kortom ik ervaar met J4 een achteruitgang in functionaliteit. Maar krijg graag ongelijk en leer graag bij.

Als er geen J4 oplossing is anders dan die ik heb bedacht (en die ik niet fraai vind) wil ik een GitHub actie starten.

Dus toch nog even een check. Biedt J4 responsive functionaliteit conform zoals ik die op laat zien op J3, zonder queries en ander moeilijk gedoe?

Of is het er echt niet?
  • Radio
  • Radio's berichtenfoto Heeft onderwerp gestart
  • Joomla!NL ontdekker
  • Joomla!NL ontdekker
  • Berichten: 34

Responsive sitebars in Joomla4 ??

23 okt 2022 11:16
#4
Ik onderschrijf je mening niet. J4 en template Cassiopeia zijn wel responsive. Het is maar net wat jij exact verwacht.

Dat op een smal scherm alles maar onder elkaar wordt gekwakt is juist. Dat is namelijk de werking van responsive. Hoe en in welke volgorde het dan komt uit te zien op een klein scherm is mede ook afhankelijk van het gebruikte template.

Op je J3 site maakte je volgens mij ook niet gebruik van de sidebars en had je in je content kolommen gemaakt met de class <span>. Ik begreep dat dat niet zou werken in J4 (echter niet getest). Een span is min of meer te vergelijken met <div>. Dus mijn inziens, met wat jij voor ogen hebt, ontkom je er niet aan om divs te gebruiken. Met de juiste styling via css zou dat te bereiken moeten zijn. Overigens heb je daar geen verdere html voor nodig.

Voor zover ik kan het zien ga jij nu de html code van de side-bars integreren in je artikel. Lijkt mij omslachtig en wat de effecten exact hiervan zijn, weet ik niet.

Verder stel je dat sidebars niet zouden werken in J4. Die werken uitstekend, het is alleen maar net wat je ervan verwacht. Zoals jij de opzet van je artikelen wilt doen, zal het inderdaad niet werken om bepaalde foto's die je halverwege een artikel naast de tekst in een aparte 'kolom' plaatst, en je zou dat doen in een sidebar, dan lukt dat niet. Want daarvoor zou je dan een aangepaste module met afbeelding moeten plaatsen in de sidebar, maar die zal dan altijd vanaf boven uitlijnen en niet op de positie waar hij naast de juiste betreffende tekst komt.

Overigens waarom plaats je die 'side-bar' afbeeldingen ook niet gewoon in het artikel, en de tekst er gewoon omheen laten lopen.
Maar dat is overigens een keuze die je zelf maakt, maar dan zoals eerder opgemerkt zul je niet ontkomen aan het gebruik van divs.

Succes verder met het ombouwen :)

P.S., als je vraag verder voldoende is beantwoord kun je dan aangeven of wij dit topic kunnen sluiten?
Groeten, Romke
Voordat je een vraag post, gebruik eerst de zoekfunctie van ons forum eens.
Vragen uitsluitend via dit Forum
Is je vraag opgelost? Dan kan je hem zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.
  • Romke
  • Romke's Profielfoto
  • Algemeen Moderator
  • Algemeen Moderator
  • Berichten: 3634

Responsive sitebars in Joomla4 ??

23 okt 2022 21:40
#5
Dank je Romke,

Je hebt gelijk. een semantische discussie over wat responsive is heeft geen zin. Laat me je even bijpraten want ik lees in je reactie dat je niet alle informatie hebt.

Waar het mij om gaat is dat J4 qua functionaliteit minder is dan J3. En tot nu toe heeft niemand mij een J4 alternatief voor de uitstekend responsive werkende class <span> functie van J3 kunnen aanreiken.

Waarom uitstekend? Omdat de J3 site aanpast aan de je tablet of mobieltje en omdat J3 daarbij horizontale integratie biedt. En dat biedt J4 dus niet! Voor zover ik nu weet.

Je hebt nogmaals gelijk:

Voor zover ik kan het zien ga jij nu de html code van de side-bars integreren in je artikel. Lijkt mij omslachtig en wat de effecten exact hiervan zijn, weet ik niet.


Ik ben het daar helemaal mee eens!
Bovendien maakt J4 gebruik van de Grid functionaliteit. Daardoor zou het juist mooier en flexibeler moeten werken dan J3.

Maar dat gebeurt helaas niet door de wijze waarop J4 de grid heeft geïmplementeerd. Leuk dat ik een module overal kan plaatsen maar dat is natuurlijk flut. Een afbeelding of video of zou ik overal moeten kunnen plaatsen zonder voor elke afbeelding een nieuwe module te moeten aanmaken.

Een horizontale integratie zoals hier in J3 (voorbeeld de-radio-amateur.nl/gamma-match ) zou toch minimaal mogen worden verwacht. Een dat lukt me nu ook hoor. Kijk maar op mijn testsite: www.koostest.online/gamma-match-wat-is-het-en-hoe-werkt-het

Maar, nogmaals, je hebt gelijk dat realiseer ik op omslachtige wijze en ook nog met een media query in de css.


Ik denk dan: Aan J4 hebben veel knappe kopen gewerkt. Er is vast een eenvoudiger oplossing voor wat ik wil en wat ik in J3 gewend was.

Ik ken die oplossing alleen (nog) niet. En daarom deze oproep op dit forum.
  • Radio
  • Radio's berichtenfoto Heeft onderwerp gestart
  • Joomla!NL ontdekker
  • Joomla!NL ontdekker
  • Berichten: 34

Responsive sitebars in Joomla4 ??

24 okt 2022 12:38
#6
Grid zou kunnen, maar dat is ook nog wel wat werk volgens mij. Bootstrap werkt direct out-of-the-box.
Code:
<div class="container"> <div class="row"> <div class="col-md-3">hier komt een afbeelding (of niet)</div> <div class="col-md-9">dit is de tekst</div> </div> <div class="row"> <div class="col-md-3">hier komt een afbeelding (of niet)</div> <div class="col-md-9">dit is de tekst</div> </div> <div class="row"> <div class="col-md-3">hier komt een afbeelding (of niet)</div> <div class="col-md-9">dit is de tekst</div> </div> <div class="row"> <div class="col-md-3">hier komt een afbeelding (of niet)</div> <div class="col-md-9">dit is de tekst</div> </div> </div>
Groetjes, Astrid
Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725
Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.
  • Astrid
  • Astrid's Profielfoto
  • Moderator + Technisch team
  • Moderator + Technisch team
  • Berichten: 37437

Responsive sitebars in Joomla4 ??

24 okt 2022 16:43
#7
Top! Dank je Astrid,

Die col md 3 9 etc kende ik niet. Lijkt veel op de Span Class van J3.

Ben nu op vakantie. Ga dit na komend weekend meteen proberen.
Zal de resultaten hier melden :-)

Nogmaals dank,
Koos
  • Radio
  • Radio's berichtenfoto Heeft onderwerp gestart
  • Joomla!NL ontdekker
  • Joomla!NL ontdekker
  • Berichten: 34

Responsive sitebars in Joomla4 ??

28 okt 2022 00:17
#8
Slechts een kleine aanpassing nodig :)

Ik kon het niet laten en heb vanuit mijn vakantieadres voldoende wifi opgespoord om even te experimenteren.
Het resultaat zie je hier: www.koostest.online/testantenne

Er was een kleine aanpassing nodig. De midden kolom van mijn sites is helft van een wide screen. Geen 2/3 want dat vinden website bezoekers niet fijn lezen. Hierdoor ontstaat er een rechtse kolom die ik meestal niet gebruik (uitzonderingen zoals de homepagina daargelaten).

Om e.e.a. nu toch op orde te krijgen moet die afwezige rechterkolom toch gesloten worden. Dat gebeurt nu door bij de tweede en verdere md3 op een pagina de container te sluiten en daarna weer van voren af aan te openen.
Code:
<div class="container"> <div class="row"> <div class="col-md-3">hier komt een afbeelding (of niet)</div> <div class="col-md-6">dit is de tekst</div> </div></div> <div class="container"> <div class="row"> <div class="col-md-3">hier komt een afbeelding (of niet)</div> <div class="col-md-6">dit is de tekst</div> </div></div> <div class="container"> <div class="row"> <div class="col-md-3">hier komt een afbeelding (of niet)</div> <div class="col-md-6">dit is de tekst</div> </div></div> <div class="container"> <div class="row"> <div class="col-md-3">hier komt een afbeelding (of niet)</div> <div class="col-md-6">dit is de tekst</div> </div> </div>

Astrid heeft mij op het spoor hiervan gezet. Haar antwoord met deze aanvulling is daarom de oplossing.
  • Radio
  • Radio's berichtenfoto Heeft onderwerp gestart
  • Joomla!NL ontdekker
  • Joomla!NL ontdekker
  • Berichten: 34
Tijd voor maken pagina: 0.696 seconden
Gemaakt door Kunena

Wil je Joomla!NL steunen?

Steun Joomla!NLAlle teamleden werken enthousiast, op vrijwillige basis, mee aan Joomla!NL. Maar een website met forum kost nu eenmaal geld. Dus als je Joomla!NL wilt steunen, dan kan dat, graag zelfs!

Lees hier meer informatie