Feste Breite für Widgets

[Robosoc]

Ich komme an einer Stelle in CV nicht weiter.
Ich möchte z.B. das Widget COLOCHOOSER immer eine feste Breite vergeben.

Z.B. Slides die dann rechts davon stehen, sollen entweder

1. den restlichen Platz rechts davon einnehmen oder
2. auch eine feste Breite haben. Wenn dann das Fenster (auf einem PC) oder der Bildschirm (z.B. auf einem Pad) zu klein ist, dann soll ein horizontaler Scrollbalken entstehen.

2. wäre mir lieber, 1. wäre auch okay.

Aber wie erzwinge ich eine feste Breite für ein Widget. Ich kann mit meinem Wissen bisher nur mit den 12 "Colspans" argieren.

Auf meinem Rechner nutze ich noch eine Auflösung von nur 1280 x 1024. Wenn ich damit das Demo-Projekt aufrufe, und in der Top-Navbar "KNX" wähle, so werden die beiden Colorchooser bei mir nicht vollständig angezeigt. Browser: Chrome. Siehe Screenshot
Screenshot Demoprojekt.JPG

[LexionTT]

Hallo,

leider schreibst Du nicht dazu, was Du schon alles versucht hast und wie fit Du in Sachen Html/Css bist.

Um eine konkrete Antwort zu geben, müsste ich die Seite jetzt nachbauen.
Ich gehe jetzt einfach mal davon aus, dass man das mit CSS lösen kann.

Probier doch einfach mal mit IE Developer Tools (F12 und DOM Explorer) ein bisschen mit der colorchosser Klasse aus, wie weit Du kommst.
Alternativ Firebug oder Chrome Developer Tools.

Man kann mit diesen Tools wunderbar durch den DOM gehen und on-the-fly bearbeiten.

Viele Grüße,
Flo

[Chris M.]

Bitte vergiss die Bildschirmauflösung - das ist der Anfang vom Ende. Das nächste Gerät hat eine andere Auflösung und Du willst doch nicht da wieder alles neu anpassen, nicht?

Grundsätzlich sollte das schon mit den 12 Spalten machbar sein.
Das per extra CSS zu erzwingen ist natürlich auch eine Möglichkeit, aber das ist nicht "universal". Z.B. wenn Du mal ein anderes Design wählst könnte es bereits ein Darstellungs-Problem geben.

[Robosoc]

Bitte vergiss die Bildschirmauflösung - das ist der Anfang vom Ende. Das nächste Gerät hat eine andere Auflösung und Du willst doch nicht da wieder alles neu anpassen, nicht?

Grundsätzlich sollte das schon mit den 12 Spalten machbar sein.
Das per extra CSS zu erzwingen ist natürlich auch eine Möglichkeit, aber das ist nicht "universal". Z.B. wenn Du mal ein anderes Design wählst könnte es bereits ein Darstellungs-Problem geben.

Klar, sich an Bildschirmauflösungen zu orientieren ist ein großer Fehler. Aber genau deshalb habe ich ja die Frage gestellt. Es sieht grausam aus (und lässt sich zudem nicht bedienen) wenn die ColorChooser nur zum Teil dargestellt werden. Auf kleinen Devices wird das immer so sein, wenn man daneben noch etwas anderes darstellt und ggf. noch eine left-Navbar hat.

Deshalb wäre es aus meiner Sicht schön, wenn man solchen Elementen eine feste Breite geben könnte und der Platzausgleich über andere Widgets/Flächen ermöglicht wird. Wird der Platz insgesamt für alles zu eng müsste automatisch ein horizontales Scrollen möglich werden.

Siehe Bild anbei. Dort habe ich ein Beispiel aufgeführt mit recht vielen Controls. Das Windows-Fenster habe ich jetzt mal soweit schmaler gezogen, dass gerade noch alles dargestellt wird.
Beispiel.JPG

Verringert man jetzt die Breite weiter (und simuliert damit, dass auf einem anderen Bildschirm weniger Auflösung vorhanden ist), so werden alle Elemente in der Breite beschnitten und die ColorChooser werden somit nur noch bedingt bedienbar und sehen bescheiden aus. Aus meiner Sicht wäre in diesem Zustand nun der Einsatz eines horizontalen Scrollbalkens sinnvoll.
Beispiel1.JPG

Aber vielleicht lässt sich dass über den von LexionTT vorgeschlagenen Weg realisieren. Den Umgang mit .CSS Dateien habe ich verstanden. Aber ich habe noch nicht it Developer Tools in den Browsern gearbeitet und kenne auch nicht alle Attribute in in .CSS. Wird also eher noch ein wenig warten müssen.

[Chris M.]

Wenn's eng wird sollte eher die 12 Spalten umgebrochen werden und z.B. nur noch 6 Spalten breiten Platz bieten. Ein horizontales Scrollen halte ich für ungeschickt, das gibt zu viele Probleme, z.B. mit den Slidern.

Aber wenn Du anderes Verhalten willst: für die Darstellung ist CSS zuständig

[alltime]

Hast du mal colspan="0" versucht?
Wenn das nicht hilft musst du css nutzen. Wie von Flo vorgeschlagen, solltest du den Namen der Klasse suchen.
In dem Ordner deines gewählten Designs gibt es eine Datei, die sich "custom.css" nennt. Hier kannst du folgendes probieren:

.NameDerKlasseFürRGBAuswahl {
overflow-x: visible !important;
/* und/oder */
min-width: 300px !important;
}

[Robosoc]

Erst einmal vielen Dank an alle. (Irgendwie wurde ich nicht per Mail informiert, dass hier geantwortet wurde..muss mir auch mal die Foreneinstellungen anschauen)
Im Moment habe ich es erst einmal mit Chris M. Vorschlägen probiert.
Die Developer Tools sehen schon einmal mächtig aus. Aber noch komme ich damit nicht ausreichend zurecht. Kommt noch, braucht ein paar Abende.
Und die Tipps von alltime werde ich ausprobieren.