Pit: Button läuft über Tabellenzelle hinaus

Hallo,

ich habe in meinem Terminkalender, der als Tabelle aufgebaut ist, die Termine als button eingesetzt. Negativ ist aber, dass jeder Inhalt des button, der breiter ist als die Tabellenzelle diese überschreibt. Gibt es eine Möglichkeit, dass auch ein Button (der ja ansich so formatiert ist, dass er gar nicht wie ein Button aussieht) die Tabellenzelle einhält?

Oder wie geht man das an? Der Eintrag muß klickbar sein, damit ich ihn hierüber editieren kann.

Pit

  1. Hallo Pit,

    Gibt es eine Möglichkeit, dass auch ein Button (der ja ansich so formatiert ist, dass er gar nicht wie ein Button aussieht) die Tabellenzelle einhält?

    Du könntest ihn mit width=100% und height=100% so groß machen, wie die Tabellenzelle. Damit das funktioniert, müssen aber alle Elternelemente der Zelle eine definierte Größe haben (also ungleich auto).

    Nachteilig wäre, dann das man den Text nicht mehr editieren kann. Ich würde ihm ein display: block verpassen und lediglich die Maximalbreite auf 100% setzen.

    Ungetestet.

    Bis demnächst
    Matthias

    --
    Rosen sind rot.
    1. Du könntest ihn mit width=100% und height=100% so groß machen, wie die Tabellenzelle. Damit das funktioniert, müssen aber alle Elternelemente der Zelle eine definierte Größe haben (also ungleich auto).

      Hallo Matthias,

      das geht schon alleine deshalb nicht, weil ich auch mehrere Buttons in einer Tabellenzelle haben können möchte.

      Pit

      1. Hallo Pit,

        Anregung

        Die Darstellung ist sicherlich verbesserungsfähig, aber eigentlich funkt das doch ganz gut, oder?

        Rolf

        --
        sumpsi - posui - clusi
        1. Hallo Rolf,

          noch 'ne Anregung, diesmal mit Flexbox garniert, um die Terminzelle immer zu füllen und bei zu vielen Terminen einen Scrollbar zu bekommen.

          Rolf

          --
          sumpsi - posui - clusi
          1. Hallo Rolf,

            noch 'ne Anregung, diesmal mit Flexbox garniert, um die Terminzelle immer zu füllen und bei zu vielen Terminen einen Scrollbar zu bekommen.

            Wow. Sehr geniale Idee(n)! Ich habe zwar jetztt nur ma drüber geschaut und weiß noch nicht, ob sich hier Fragen für mich ergeben, aber auf Anhieb finde ich die Idee(n) klasse. Danke.

            So, ich habs mir gerade noch etwas genauer angeschaut und habe 2 Fragen:

            1. Worin unnterscheiden sich die Anregungen? Also, spricht irgendetws mehr für Alt1 oder Alt2?

            2. Kann ich solch einen "Button" zu 100%, oder besser sogar nur zu 90% in eine Tabellenzelle setzen? Und so, dass dieser Button keine absoluten Ausmaße hat, sondern sich meinen VP-Maßen anpasst?

            Pit

            1. Hallo Pit,

              in der 1. Variante wird die Höhe der Buttons durch den Text darin bestimmt, in der 2. Variante setze ich nur eine minimale Höhe und lasse, wenn Platz genug ist, über die Flexbox die Buttons auf die Höhe des Containers verteilen. Das wird durch die Kombi-Eigenschaft flex: 1 0 1.5em; in den Buttons gesteuert, die bildet eine Zusammenfassung von flex-grow, flex-shrink und flex-basis. Mit flex-basis legst Du die Ausgangsgröße eines Elements fest (hier die Höhe, weil die Flexbox wegen flex-direction:column vertikal anordnet). Mit flex-grow bestimmst Du, wie das Element wachsen soll wenn mehr Platz da ist als flex-basis verlangt, und flex-shrink ist analog bei zu wenig Platz. Schau Dir die Beschreibung dieser Attribute im Wiki an, mach Dir ein Fiddle oder einen Codepen und spiel eine Weile damit herum. Sonst bekommt man einen Knoten ins Hirn :)

              Variiere in den Fiddles mal die Anzahl der Buttons (=Termine), von 0-9 oder so, dann siehst Du den Unterschied zwischen den Varianten. Was für dich besser passt, ist deine Entscheidung.

              Setzen von Breiten und Höhen gelingt jederzeit mit den entsprechenden width/height/max-width/max-height Eigenschaften. Spiel doch einfach mal damit rum, dann siehst du es schon. Anders mach ich das auch nicht.

              Was meinst Du mit „den VP-Maßen anpassen“? Viewport? Fragst Du gerade, wie man ein HTML Element den Maßen seines Parent-Elements anpasst? Oder verstehe ich Dich nur miss?

              Rolf

              --
              sumpsi - posui - clusi
              1. Hallo Rolf,

                Variiere in den Fiddles mal die Anzahl der Buttons (=Termine), von 0-9 oder so, dann siehst Du den Unterschied zwischen den Varianten. Was für dich besser passt, ist deine Entscheidung.

                Ich variiere grad mal hier, mal da und spiele mit den Parametern hin und her. Zwischenstand ist, dass ich hellauf begeistert bin von Deiner Idee. Alle bisherigen Fragen haben sich inzwischen auch geklärt (der Spielerei sei dank), aber es sind auch schon neue, noch ungelöste Fragen aufgetaucht.

                Ich stelle die später auch, aber zuvor will ich noch ein wenig austesten und nachlesen, vielleicht klärt sich hierüber ja auch schon wieder was auf.

                Aber die Idee (die 2. mit Flexbox) ist wirklich genau das, was ich gesucht habe (ohne es zu wissen).

                Pit

                1. Hallo,

                  ich habe bisher noch 2 Frage übrig:

                  Ich komme mit der Formatierung von .term noch nicht ganz klar.

                  1. Ich hätte ansich gerne, dass ich (bzw. der Viewport) die Breite der Tasbellenzellen vorgibt und sich: .term in der Breite zu 100% daran anpasst.

                  2. In der Höhe würde ich gerne würde ich gerne .term oben in der Zelle "annageln" und insgesamt nur 90% der Tabellenzelle ausfüllen lassen. Unterhalb bräuchte ich nämlich noch Platz für einen Button, über den ich Termine zufügen kann.

                  Wie setzt man das um? Über %-Angaben im CSS verbreitere ich die komplette Tabellenzelle. Die ist aber widerum am Viewport ausgerichtet. (oder soll es sein) Und wenn ich .term in der Höhe heruntersetze, rückt mir das DIV immer weider in die Mitte der Tabellenzelle.

                  Edit: Hier noch eines meiner Test-fiddle dazu.

                  Pit

                  1. Ich komme mit der Formatierung von .term noch nicht ganz klar.

                    Habs dann doch noch hinbekommen.

                    Pit

                    1. Hallo Pit,

                      ich hab auch nicht immer Zeit.

                      Sehr schön, dass Du allen durchgekommen bist. Dabei lernt man am meisten 😂

                      Rolf

                      --
                      sumpsi - posui - clusi
                      1. Hallo Rolf,

                        ich hab auch nicht immer Zeit.

                        Ich weiß schon. Ist auch kein Problem, ich glaube eher, ich war etwas ungeduldig, weil ich den Ansatz so klasse fand.

                        Sehr schön, dass Du allen durchgekommen bist. Dabei lernt man am meisten 😂

                        Stimmt einerseits. Andererseits gibt es so Themen, wie css oder JS, wo man auch Lösungen produzieren kann, die funktionieren, aber die - ich nenn es mal - sackgassenartig sind. Oder veraltet. Oder, oder, oder…

                        Du siehst ja, auch Du hattest sofort 2 Ansätze zur Hand, wovon bei mir übrigens der 2. besser passte. Ich hatte dann zusätzlich noch das Problem, meinen +Button pazieren zu müssen, fand aber, dass mir das Abschneiden des DIVs zuviel Platz raubte. Ich habs nun über ein wenig Spielerei mit z-index gelöst.

                        Danke für Deine Hilfe nochmal.

                        Pit

          2. ...der scrollbalken wird ubrigens in meinen Android chrome nicht angezeigt.

            Pit

            1. Hey,

              So wird der Scrollbalken auf meinem Android Chrome auch angezeigt.

              Da kannst du deinen Scrollbalken dann auch nach Belieben stylen.

              Gruß Maetzzen

              Make scrollbar visible in mobile browsers

              1. Hi Maetzzen

                ich habs schon eingesetzt, konnts aber noch nicht testen.

                Danke für den Hinweis,

                Pit