Eigenschaft - Tabellen Breite Anpassen inkl Rahmen

Shopware 5 Programmierung
1

Hallo Community,

ich möchte gerne die Breite der Eigenschaft-Tabelle auf volle Breite anpassen, die dies sehr unpassend aussieht und gedrück.

Habe bereits im /theme/Frontend/Responsive/frondend/_public/src/less/_modules die detail.less auf Zeile 218 auf 190% gesetzt, hat auch geklapt, leider bleibt der Rahmen bei 100% so das er Quasi wo der Original Strich runter geht verbleibt.

Wie passe ich das Update-Sicher inkl. Rahmen an?

Originalbild:

1132×360 60 KB

2

Du müsstest folgendes Finden und anpassen:

@media screen and (min-width: 64em)
.product--details .product--properties {
    width: 50%;
}

Vorsicht das ein Auszug aus der CSS (vom Demoshop)

3

@NextMike schrieb:

Du müsstest folgendes Finden und anpassen:

@media screen and (min-width: 64em)
.product–details .product–properties {
width: 50%;
}

Vorsicht das ein Auszug aus der CSS (vom Demoshop)

 

Vielen Dank, ist dies auch in der detail.less? 

4

Kann keine Helfen ?  Wearing-Sunglasses

5

Das wirst Du doch in den Files finden können?!

6

@NextMike schrieb:

Das wirst Du doch in den Files finden können?!

Bin kein Experte Blush Ich suche immer mit ganz viel Glück  Angry-Face 

7

Du brauchst kein Glück :wink: STRG + F

8

@NextMike‍ Danke für die Info, kannte zwar das Fenster dachte bisher das es ein Virus war  Grin

Ich habe mal nach diesem gesucht leider nichts gefunden.

9

dies dürfte die Stelle sein: shopware/detail.less at 9a116f29f78c0005e031e34ffcce919b6a50e3a9 · shopware/shopware · GitHub

1 „Gefällt mir“
10

Hab es jetzt gefunden hier mal der Code:

.product–details .properties–tab-content .product–properties td.product–properties-label {
width: 30%;
}
.product–details .properties–tab-content .product–properties td.product–properties-value {
width: 70%;
}
@media screen and (min-width: 64em) {
.product–details .properties–tab-content .product–properties {
width: 100%;
}
}

wenn der schon auf 100% steht warum zeigt er mir das nur zur helfte an ?  

11

Wenn ich den wert auf 200% setze, zeigt er mir zwar auf ganze Breite an aber… Der Rahmen bleibt gleich:

1920×950 153 KB

12

das ist nicht die Stelle. Was hat da .properties–tab-content zu suchen?

13

Ich habe jetzt mal die Datei und die Zeile rausgesucht:

Zeile 751 

Alter wert: 50%

Neu: 100% es tut sich rein garnichts, ist den hier keiner von @shopware‍ hier? ich finde es sollte vom Standard auf volle Breite sein und nicht so ein gepampe.

14

Hab grad mal schnell geguckt: in .product–details .product–properties wird die Breite auf 50% gesetzt.
Setzte ich die OnTheFly auf 100%, wird normal die Tabelle auf 100% aufgezogen.

Also die schon oben verlinkte Stelle.

1 „Gefällt mir“
15

Hab ich gemacht und es hat geklapt @sonic‍ 

16

Mal eine Frage, kann man die Linke Spalte etwas Schmaler machen so das mehr Platz in der Rechte ist?

Z.b wie in Word “Spalte an Text automatisch Anpassen”? 

17

Ist ein doch ein sehr großer zwischenraum und sieht so nicht dolle aus :wink:

1053×387 79.1 KB

18

Dein Problem war: Die Tabellenbreite wird 100% gesetzt (100% = Container), der Container aber auf 50%. Der Rahmen kam vom Container.
Nun hattest Du Deine Tabelle mit > 100% über den Container hinaus vergrößert. Da der Conatiner aber klein bleibt, blieb der Rahmen drinne.

Deine CSS-Klassen wären product–properties-label und product–properties-value - den exakten CSS-Pfad musst Du Dir noch raussuchen.
Testweise product–properties-label width: auto und product–properties-value width:100%
Ohne Grarantie

Edit: Hier werden die Zellen auf 50% gesetzt.
shopware/detail.less at 5.3 · shopware/shopware · GitHub
Die Stelle würde ich mal in der eigenen detail.less mit Einträge für product–properties-label und product–properties-value erweitern.
Wahlweise könnte man auch den 50% für td überschreiben z.B. auf width: 100% und zusätzlich td:first-child auf width:auto setzen

1 „Gefällt mir“
19

@sonic‍ vielen Dank, das mit dem Erweitern oder was eigenes erstellen da bin ich raus.

Denn da hab ich keine Ahnung und würde ggf. alles kaputt machen.

20

Ich weiss, Du traust Dich nicht weiter ran - aber ich hoffe, Du änderst nicht Original-Dateien, sondern hast Dein eigenes Theme.
Da mir grad selber nach Deinem Beitrag eine Tabelle unangenehm aufgefallen ist, habe ich mal schnell gebastelt - aber bisher nur im Chrome ausprobiert.

  1. möchte ich, dass die Box die Breite dynamisch ändert => display von „block“ auf „inline-block“ umgestellt.
  2. Spalten auf automatische Breite

Mein bisheriges CSS für die Property-Tabelle in der details.less
 

@media screen and(min-width: @tabletViewportWidth) {
    .product--details {

        .product--properties {
            display: inline-block;
            width: auto;
            
            .product--properties-table {
                .product--properties-row {
                    td.product--properties-label {
                        width: auto;
                    }
                    td.product--properties-value {
                        width: auto;
                    }
                }
            }
        }
    }

  
}

@media screen and (min-width: @tabletLandscapeViewportWidth) {
    .product--details {
        .product--properties {
            width: auto;
        }
    }
}