Contao-Camp 2024
Ergebnis 1 bis 7 von 7

Thema: Responsive Tabelle

  1. #1
    Contao-Nutzer
    Registriert seit
    17.01.2013.
    Beiträge
    55

    Standard Responsive Tabelle

    Hallo Community,

    die Seite die ich zuzeit Überarbeite, braucht noch Responsive Tabellen ich habe mich auch daran versucht... aber leider nochnicht ganz geschafft derzeit Löse ich es unsauber über 2 artikel ... (2 verschiedene Tabellen und die werden ein und ausgeblendet)

    Siehe bild:
    Unbenannt.png

    Wollte frage ob es Möglich ist dies ohne 2 verschiedene artikel zu erstellen (tabellen)

    Diese Sachen habe ich schon ausprobiert :

    http://blog.kulturbanause.de/2012/06...ive-webdesign/

    Möglichkeit 5 wäre eine Option , Möglichkeit 4 ist die bedienung an einem Smartphone einfach schrecklich ;-)
    Bei Möglichkeit 5 klappt es leider nicht ich habe die JS/CSS eingebunden der Tabellen die Klasse gegeben und die variablen , jquery.mini eingefügt in ein js sqript und eingebunden ... weiß leider nicht was fehlt .... (hat es von euch jemand schonmal am laufen ?? in Contao

    Die Seite:

    http://neu.vdtf.de/ansprechpartner-bayern-nord.html (Dort kann man mal das Browserfenster klein und groß machen damit man sieht was gemeint ist )

    MFG

    Joey

  2. #2
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.803
    Partner-ID
    10107

    Standard

    Zitat Zitat von JoeyConta3 Beitrag anzeigen
    Bei Möglichkeit 5 klappt es leider nicht ich habe die JS/CSS eingebunden der Tabellen die Klasse gegeben und die variablen , jquery.mini eingefügt in ein js sqript und eingebunden ... weiß leider nicht was fehlt .... (hat es von euch jemand schonmal am laufen ?? in Contao
    Hast du die Seite irgendwo online? Und beschreibe auch genau was du wo gemacht bzw. eingefügt hast.


    Alternativ kannst du auch einfach folgendes JavaScript einfügen (jQuery Version):
    PHP-Code:
    (function($)
    {
        $(
    document).ready( function()
        {
            $(
    'table').wrap('<div style="overflow-y:auto; max-width:100%;"></div>');
        });  
    })(
    jQuery); 
    Dadurch kann jede Tabelle horizontal gescrolled werden, wenn nicht genügend Platz ist. (Siehe auch https://community.contao.org/de/show...l=1#post314671 )

  3. #3
    Contao-Nutzer
    Registriert seit
    17.01.2013.
    Beiträge
    55

    Standard

    Hey

    Ja die Seite ist Online ;-)
    http://neu.vdtf.de/ansprechpartner-bayern-nord.html

    Nach dieser Anleitung:

    http://fooplugins.com/footable-demos/

    Die 3 Dateien hochgeladen

    footable.core.css
    footable.standalone.css
    footable.js

    Layout richtiges gewählt , dann CSS datein eingebunden und bei eigener Java-sqript code das eingefügt


    JS:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script src="{{env::files_url}}files/opensauce/js/js-ResponsiveBalken/footable.js" type="text/javascript"></script>

    <script type="text/javascript">
    $(function () {
    $('.footable').footable();
    });
    </script>

    Dann 2 Beispiel tabellen eingefügt um zu schauen ob sich was tut : Link: http://fooplugins.com/plugins/footable-jquery/

    <table class="footable" data-filter="#filter" data-page-size="5">
    <thead>
    <tr><th data-toggle="true">First Name</th><th data-sort-ignore="true">Last Name</th><th data-hide="phone,tablet">Job Title</th><th data-hide="phone,tablet" data-name="Date Of Birth">DOB</th><th data-hide="phone">Status</th></tr>
    </thead>
    </table>
    <table class="footable">
    <thead>
    <tr><th>Name</th><th data-hide="phone,tablet">Phone</th><th data-hide="phone,tablet">Email</th></tr>
    </thead>
    <tbody>
    <tr>
    <td>Bob Builder</td>
    <td>555-12345</td>
    <td>bob@home.com</td>
    </tr>
    <tr>
    <td>Bridget Jones</td>
    <td>544-776655</td>
    <td>bjones@mysite.com</td>
    </tr>
    <tr>
    <td>Tom Cruise</td>
    <td>555-99911</td>
    <td>cruise1@crazy.com</td>
    </tr>
    </tbody>
    </table>



    Dein tipp Probier ich gleich mal aus wie das aussieht und sich bedienen lässt danke ;-)

  4. #4
    Contao-Nutzer
    Registriert seit
    17.01.2013.
    Beiträge
    55

    Standard

    Okay lol .... anscheinend hat das ganze damals auch schon funktioniert nur irgendwo was altes im cache hängen geblieben .... Danke ;-) (Gestern gemacht und dann keine lust mehr gehabt und pc aus heute nochnicht nachgeschaut ... schreib alles schritt für schritt auf und es ging schon )

    Mal schauen wie ich die bilder als Einblende machen kann ;-)

  5. #5
    Contao-Nutzer
    Registriert seit
    17.01.2013.
    Beiträge
    55

    Standard

    Dein Code gefällt mir auch ;-) na mal schauen was dann der Praxistest sagt was bequemer is Danke

  6. #6
    Contao-Fan Avatar von Norbert001
    Registriert seit
    07.01.2011.
    Ort
    Taunusstein, Hessen
    Beiträge
    472

    Standard

    Hallo, wünsche allen einen schönen Sonntag.

    Habe mit Tabellen meine Probleme.
    Habe über ein neues Inhaltselement (Text) eine Tabelle eingefügt.
    Hier der Link https://vorschau.wagyu-genetics.de/de/sperma.html
    Habe dann im Seitenlayout Eigener JavaScript-Code, diesen Code eingefügt.
    Code:
    <script>
    $(document).ready( function()
    {
        $('table').wrap('<div style="overflow-y:auto; max-width:100%;"></div>');
    });
    </script>
    Eine Responsive Tabelle ist dabei aber nicht raus gekommen.
    Muss ich da noch mehr machen oder habe ich einen Fehler drin?
    Gruß Norbert
    Geht nicht, gibt es nicht.

  7. #7
    Contao-Urgestein Avatar von zonky
    Registriert seit
    19.03.2010.
    Ort
    Berlin, Rdf
    Beiträge
    9.674
    User beschenken
    Wunschliste

    Standard

    mach die Seite in der Quelltextansicht auf (Strg+u) und Suche (Strg+f) nach ".wrap" - ich find da nix... wo ist Dein Code?

    ich würde das nicht in das Layout packen - eher ins Template der Tabelle oder als "Zusatz-CE" - also Template "ce_html_table_responsive.html5" da das JS rein... CE HTML einfügen und bei Template das erstellte auswählen

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •