Sir_Rowland_ITSir_Rowland_IT MemberComments: 154 Received thanks: 3 Member since: May 2016

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:

image

Comments

  • NextMikeNextMike MemberComments: 2227 Received thanks: 351 Member since: December 2014

    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)

  • Sir_Rowland_ITSir_Rowland_IT MemberComments: 154 Received thanks: 3 Member since: May 2016

    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? 

  • Sir_Rowland_ITSir_Rowland_IT MemberComments: 154 Received thanks: 3 Member since: May 2016

    Kann keine Helfen ? Wearing-Sunglasses

  • NextMikeNextMike MemberComments: 2227 Received thanks: 351 Member since: December 2014

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

  • Sir_Rowland_ITSir_Rowland_IT MemberComments: 154 Received thanks: 3 Member since: May 2016

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

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

  • NextMikeNextMike MemberComments: 2227 Received thanks: 351 Member since: December 2014

    Du brauchst kein Glück ;) STRG + F

  • Sir_Rowland_ITSir_Rowland_IT MemberComments: 154 Received thanks: 3 Member since: May 2016

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

  • Sir_Rowland_ITSir_Rowland_IT MemberComments: 154 Received thanks: 3 Member since: May 2016

    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 ?  

  • Sir_Rowland_ITSir_Rowland_IT MemberComments: 154 Received thanks: 3 Member since: May 2016

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

    image

  • NextMikeNextMike MemberComments: 2227 Received thanks: 351 Member since: December 2014

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

  • Sir_Rowland_ITSir_Rowland_IT MemberComments: 154 Received thanks: 3 Member since: May 2016

    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.

  • sonicsonic MemberComments: 1980 Received thanks: 541 edited August 2017 Member since: January 2014

    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.

    https://github.com/shopware/shopware/blob/5.3/themes/Frontend/Responsive/frontend/_public/src/less/_modules/detail.less#L752
    Also die schon oben verlinkte Stelle.

    Thanked by 1Sir_Rowland_IT
  • Sir_Rowland_ITSir_Rowland_IT MemberComments: 154 Received thanks: 3 Member since: May 2016

    Hab ich gemacht und es hat geklapt @sonic‍ Thumb-Up

  • Sir_Rowland_ITSir_Rowland_IT MemberComments: 154 Received thanks: 3 Member since: May 2016

    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"? 

  • Sir_Rowland_ITSir_Rowland_IT MemberComments: 154 Received thanks: 3 Member since: May 2016

    Ist ein doch ein sehr großer zwischenraum und sieht so nicht dolle aus ;)

    image

  • sonicsonic MemberComments: 1980 Received thanks: 541 edited August 2017 Member since: January 2014

    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.
    https://github.com/shopware/shopware/blob/5.3/themes/Frontend/Responsive/frontend/_public/src/less/_modules/detail.less#L215
    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

    Thanked by 1Sir_Rowland_IT
  • Sir_Rowland_ITSir_Rowland_IT MemberComments: 154 Received thanks: 3 Member since: May 2016

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

  • sonicsonic MemberComments: 1980 Received thanks: 541 Member since: January 2014

    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;
            }
        }
    }

     

  • Sir_Rowland_ITSir_Rowland_IT MemberComments: 154 Received thanks: 3 Member since: May 2016

    Hallo @Sonic,

    ich lass es lieber bevor ich es vermurgse, danke für die Hilfe finde es nur Schade das es nicht von Hausaus so angepasst wurde. 

    Mal erlich welcher Schop hat so eine Murgse?

  • energyvitalenergyvital MemberComments: 3 Received thanks: 0 Member since: July 2015

    Ich schliesse mich mal an... wirklich ärmlich dass das angeblich beste Shopsystem Deutschlands das nicht kann... Meine frühere Begeisterung für Shopware schwindet seit einiger Zeit ziemlich.

    Falls es für das Problem mal eine Lösung gibt, wäre ich für Info sehr dankbar!
    Automatische Integration dieser Möglichkeit sollte eigentlich selbstverständlich sein.

  • hdshds MemberComments: 251 Received thanks: 62 Member since: December 2012

    Hallo energyvital

    Na eigentlich ist das ja echt super einfach, ( für das angeblich beste Shopsystem Deutschlands ist das auch keine Problem ) hier ein paar Zeilen und Bespiele ob das mal eine Lösung ist weiß ich nicht. Ich hoffe ich konnte dir helfen. Bedanken ist der rechte Button unten links. Viel Spaß

    für die ganze Tabelle

    .product--details .product--properties .product--properties-table {
        width: 100%;
    }

    für die linke Spalte 

    td.product--properties-label.is--bold {
        width: 10%;
    }

    für die rechte Spalte

    td.product--properties-value {
        width: 30%;
    }

     

  • flosaiflosai MemberComments: 4 Received thanks: 1 Member since: March 12

    Der Beitrag ist schon älter aber das Thema derzeit für uns aktuell.

    Folgende Änderung an der /theme/Frontend/Responsive/frondend/_public/src/less/_modules die detail.less vorgenommen und in unserem eigenen Theme /theme/Frontend/flosai/frondend/_public/src/less/_modules abgespeichert.

    @media screen and(min-width: @tabletViewportWidth) {
        .product--details {
    
            .product--properties {
                display: inline-block;
                width: 25%;
                
                .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: 25%;
            }
        }
    }

    Dies hat bis dato bei änderungen an tpl Dateien wunderbar funktioniert, doch hier werden änderungen einfach ignoriert. Auf dem Testserver habe ich dann mal die änderung auf die Originale detail.less in /theme/Frontend/Responsive/frondend/_public/src/less/_modules angewendet und dort ging es dann.

    Allerdings wollen wir vermeiden die Original Dateien zu überschreiben! 

    Jemand eine Idee wieso die detail.less im eigenen Theme Ordner ignoriert wird?

Sign In or Register to comment.