Ankündigung

Einklappen
Keine Ankündigung bisher.

Select-Tag mit 2 Spalten

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Select-Tag mit 2 Spalten

    Hallo Leute,

    ich suche mich gerade zu Tode zum Thema 'Select-Box mit 2 Spalten'. Leider kann ich nichts passendes finden und daher frage ich hier mal in die Runde.
    Ich möchte eine Select-Box die visuell 2 Spalten besitzt. Also eigentlich eine Spalte in welcher 2 Strings linksbündig dargestellt sind.
    Wenn ich nach 'select multi column' suche dann finde ich einen Haufen Lösungen (u.a. jQuery) die aber total oversized oder gar daneben sind.

    Ich hoffe hier kann mir einer mal auf die Sprünge helfen.

    Ach ja, sollte es eine JS-Lösung sein, eine habe ich gefunden (es ging da um 'timezones' wo das Land und daneben die Zeitzone angezeigt wird). Leider weiß ich in diesem Falle nicht wie ich das einbinde weil JS habe ich bisher noch nie benutzt (bin Anfänger in der ganzen Sache). Wenn mir dahingehend auf die Sprünge geholfen werden könnte wäre das ja auch schon was (dann wird mein Vorhaben eben mit JS erledigt).

    Ich bedanke mich schon einmal im Voraus für eure Hilfe.

  • #2
    Hallo

    Ich habe leider nicht verstanden was du erreichen willst. Kannst du mal ein paar Beispiele für den Inhalt der Select-Box nennen?

    Gruss

    MrMurphy

    Kommentar


    • #3
      Hi MrMurphy,

      ich habe eine Select-Box (Liste) in der 2 Werte / Zeile stehen (zusammengehörende). z.B. "Germany UTC +1 GMT", "England UTC +0", usw.
      So, wenn ich diese nun so in die Select-Liste einfüge, so werden die Leerzeilen 'collapsed', also egal wieviel Leerzeilen ich habe werden diese zusammngeschrumpft auf nur eine. Das ist natürlich für die Struktur in der Liste schlecht.
      Somit enfällt 'str_pad()', sprintf() usw..
      Natürlich muss die Font-Family eine sein die gleichen Breite alles Buchstaben nutzt. Ich habe in diesem Falle 'Courier New'.
      So, jetzt brauche ich eine Lösung die mir diese Werte schön strukturiert untereinander in tabellarischer Form in dieser Liste anzeigt.
      Ich habe mir heute Nacht ein Workaround überlegt und umgesetzt, eine saubere Lösung ist es wohl aber nicht.
      Ich habe meine Values mit str_pad mit '_'-Zeichen linksbündig aufgefüllt und dann die '_' durch ' ' ersetzen lassen.
      Dies bringt mir den gewünschten Effekt. Leider bin ich auf ein anderes Problem gestossen: sobald ein deutscher Umlaut enthalten ist, fehlt mir plötzlich ein Leerzeichen und diese Zeilen sind dann auch um eine Stelle verrutscht.

      Daher nun die Frage: gibt es eine saubere Lösung für mein Problem und vor allem gibt es eine die mir bei Umlauten keine Probleme bereitet? Am besten wäre dann auch noch eine Lösung in welcher ich kein Courier New o.ä. verwenden muss sondern eine belibige Font-Family.

      Kommentar


      • #4
        Da wirst du um ein Plugin nicht herumkommen. Select-Element sind sehr zickig was CSS Regeln angeht...

        Wie wärs mit sowas? http://selectize.github.io/selectize.js/

        Das ersetzt ein Select durch ein entsprechendes HTML-Element mit passendem Design.
        Tutorials zum Thema Technik:
        https://pilabor.com
        https://www.fynder.de

        Kommentar


        • #5
          Zitat von Master0Blicker Beitrag anzeigen
          Ich habe meine Values mit str_pad mit '_'-Zeichen linksbündig aufgefüllt und dann die '_' durch ' ' ersetzen lassen.
          Dies bringt mir den gewünschten Effekt. Leider bin ich auf ein anderes Problem gestossen: sobald ein deutscher Umlaut enthalten ist, fehlt mir plötzlich ein Leerzeichen und diese Zeilen sind dann auch um eine Stelle verrutscht.
          Nutze konsequent UTF-8, greife auf Multibyte String Funktionen anstelle von str_pad zurück und du hast kein Umlautproblem mehr.

          Kommentar


          • #6
            Zitat von Master0Blicker Beitrag anzeigen
            Dies bringt mir den gewünschten Effekt. Leider bin ich auf ein anderes Problem gestossen: sobald ein deutscher Umlaut enthalten ist, fehlt mir plötzlich ein Leerzeichen und diese Zeilen sind dann auch um eine Stelle verrutscht.
            Lösung:
            Nutze mb_strwith oder setze das interne encoding auf UTF8 und verwende dann mb_strlen.
            Folgender Code macht den Unterschied deutlich:
            PHP-Code:
            <!DOCTYPE HTML>
            <html>
            <head>
                <meta charset="UTF-8">
            ...

            <?php
            echo mb_strlen('Gemüse') . "<br>";
            echo 
            mb_strlen('Gemuse') . "<br>";
            mb_internal_encoding("UTF-8");
            echo 
            mb_strlen('Gemüse') . "<br>";
            echo 
            mb_strlen('Gemuse') . "<br>";
            echo 
            mb_strwidth('Gemüse''UTF-8') . "<br>";
            echo 
            mb_strwidth('Gemuse''UTF-8') . "<br>";
            Ausgabe
            Code:
            7
            6
            6
            6
            6
            6
            Dann kannst du auch str_pad verwenden zum auffüllen mit geschützten Leerzeichen.

            Zitat von Master0Blicker Beitrag anzeigen
            Am besten wäre dann auch noch eine Lösung in welcher ich kein Courier New o.ä. verwenden muss sondern eine belibige Font-Family.
            Das wird leider nicht gehen, wenn du lediglich mit dem Select-Element arbeiten willst, da nichtproportionale Schriften immer eine andere Weite haben und das Leerzeichen eine feste Grösse hat.
            Da wird es dann Pixelabstände geben, die sichtbar sind.

            Kommentar


            • #7
              Das geht wunderbar mit str_pad Du darfs halt nur keine Leerzeichen nehmen da diese zur Gruppe der Whitespaces gehören von denen halt maximal eins als leerzeichen angezeigt wird. Einfach geht es z.B. mit dem non-breaking-space &nbsp;

              Kommentar


              • #8
                Messier 1001
                In Beitrag #3 hat er geschrieben, dass er das geschützte Leerzeichen verwendet hatte, sein Problem waren die unterschiedlichen Zeichenkettenlängen wenn dort Umlaute auftauchten.

                Kommentar


                • #9
                  protestix

                  Ich hatte bereits im HEAD-Tag das UTF-8 charset.
                  Neu hinzugekommen ist nun das "mb_internal_encoding("UTF-8");"
                  Das hat leider auch nichts gebracht. Ich habe es einmal versuch in meine index.php zu setzen in der Hoffnung das es dann auch Gültigkeit hat in den eingebundenen php-Dateien und den eingebunden Klassen.
                  Als das nicht klappte habe ich es in der Methode selber, die die Liste befüllt, gleich zu Anfang gesetzt. Auch dies war leider ohne Erfolg.

                  Also: meine HTML-Datei hat charset=UTF-8 (<meta charset="utf-8">) und das mb_internal_encoding("UTF-8"); jeweils an den o.g. Stellen platziert ohne Erfolg.

                  Messier 1001
                  Danke dir trotzdem. Lieber 2 gleiche Antworten als gar keine

                  Kommentar


                  • #10
                    Was sagt der HTTP-Response Header?
                    Hast du auch die Datei als UTF8 gespeichert?

                    Kommentar

                    Lädt...
                    X