Tabs Registerkarten formatierung
-
Hallo zusamme,
ich nutze das Widget Tabs mit 5 Registerkarten. Besteht die Möglichkeit, das ich die Titelbreite beinflussen kann. Ich habe 5 Titel und überschreite damit meine Bildschirmbreite. Ich habe die Titelnamen schon aufs kürzeste gekürzt, aber ich kann die Seite nicht weiter verkleinern. Als Variante ist die Gesamtbreite ausgewählt.
Vielleicht hat jemand noch einen Tip für mich
-
Hallo zusamme,
ich nutze das Widget Tabs mit 5 Registerkarten. Besteht die Möglichkeit, das ich die Titelbreite beinflussen kann. Ich habe 5 Titel und überschreite damit meine Bildschirmbreite. Ich habe die Titelnamen schon aufs kürzeste gekürzt, aber ich kann die Seite nicht weiter verkleinern. Als Variante ist die Gesamtbreite ausgewählt.
Vielleicht hat jemand noch einen Tip für mich
-
welches vis
am besten ein export des widgets
und angeben wieviel pixel es max einnehmen darf -
du sollst mir einen export des widgets geben das ich mir das genauer ansehen kann.
die pixelbreite musst du mir sagen, weil du es bisher noch nicht geschrieben hast und ich nicht hellsehen kann
Oh sorry, das habe ich falsch verstanden :)
der Pixelbereich sollte 400x830 sein
[
{
"tpl": "tplSTab",
"data": {
"bindings": [],
"contains_view_1": "Stromverbrauch",
"contains_view_2": "Stromanbieter anlegen",
"contains_view_3": "Stromanbieter bearbeiten",
"contains_view_4": "Stromanbieter löschen",
"contains_view_5": "Strom Grunddaten",
"g_common": true,
"g_node-1": true,
"g_node-2": true,
"g_node-3": true,
"g_node-4": true,
"g_node-5": true,
"icon_color_1": null,
"icon_color_2": null,
"icon_color_3": null,
"icon_color_4": null,
"icon_color_5": null,
"icon_size_1": null,
"icon_size_2": null,
"icon_size_3": null,
"icon_size_4": null,
"icon_size_5": null,
"icon_tab_1": null,
"icon_tab_2": null,
"icon_tab_3": null,
"icon_tab_4": null,
"icon_tab_5": null,
"image_tab_1": null,
"image_tab_2": null,
"image_tab_3": null,
"image_tab_4": null,
"image_tab_5": null,
"overflow_x_1": "",
"overflow_x_2": null,
"overflow_x_3": null,
"overflow_x_4": null,
"overflow_x_5": null,
"overflow_y_1": "",
"overflow_y_2": null,
"overflow_y_3": null,
"overflow_y_4": null,
"overflow_y_5": null,
"show_tabs": 5,
"title_tab_1": "Abrechnung",
"title_tab_2": "Anbieter anlegen",
"title_tab_3": "Anbieter bearbeiten",
"title_tab_4": "Anbieter löschen",
"title_tab_5": "Grunddaten",
"variant": "fullWidth",
"g_css_font_text": true,
"vertical": false
},
"style": {
"bindings": [],
"left": "0",
"top": 45,
"width": "443px",
"height": "864px"
},
"widgetSet": "tabs",
"_id": "i000001"
}
] -
Oh sorry, das habe ich falsch verstanden :)
der Pixelbereich sollte 400x830 sein
[
{
"tpl": "tplSTab",
"data": {
"bindings": [],
"contains_view_1": "Stromverbrauch",
"contains_view_2": "Stromanbieter anlegen",
"contains_view_3": "Stromanbieter bearbeiten",
"contains_view_4": "Stromanbieter löschen",
"contains_view_5": "Strom Grunddaten",
"g_common": true,
"g_node-1": true,
"g_node-2": true,
"g_node-3": true,
"g_node-4": true,
"g_node-5": true,
"icon_color_1": null,
"icon_color_2": null,
"icon_color_3": null,
"icon_color_4": null,
"icon_color_5": null,
"icon_size_1": null,
"icon_size_2": null,
"icon_size_3": null,
"icon_size_4": null,
"icon_size_5": null,
"icon_tab_1": null,
"icon_tab_2": null,
"icon_tab_3": null,
"icon_tab_4": null,
"icon_tab_5": null,
"image_tab_1": null,
"image_tab_2": null,
"image_tab_3": null,
"image_tab_4": null,
"image_tab_5": null,
"overflow_x_1": "",
"overflow_x_2": null,
"overflow_x_3": null,
"overflow_x_4": null,
"overflow_x_5": null,
"overflow_y_1": "",
"overflow_y_2": null,
"overflow_y_3": null,
"overflow_y_4": null,
"overflow_y_5": null,
"show_tabs": 5,
"title_tab_1": "Abrechnung",
"title_tab_2": "Anbieter anlegen",
"title_tab_3": "Anbieter bearbeiten",
"title_tab_4": "Anbieter löschen",
"title_tab_5": "Grunddaten",
"variant": "fullWidth",
"g_css_font_text": true,
"vertical": false
},
"style": {
"bindings": [],
"left": "0",
"top": 45,
"width": "443px",
"height": "864px"
},
"widgetSet": "tabs",
"_id": "i000001"
}
]Die Lösung wären 2 Schritte
- optional das widget
ich habe die breite auf 400px eingestellt
und unter General eine css klasse definiert
- Dann in den Reiter CSS das folgende kopieren
Das bedeutet, das jedes widget, welches mytabs als Klassenname hat und ein Mui Tab-Element enthält, wird die Tabbreite auf den Standard zurückgesetzt(also keine min width). Aktuell ist mindestens 90px pro Reiter eingestellt gewesen.
.mytabs .MuiTab-root { min-width: inherit; }Ergebnis sieht dann so aus, das widget kann dann exakt auf 400px eingestellt werden (oder auch eine andere Breite).
Allerdings ist natürlich beim breitesten Wort schluss. Da kann der Browser nicht mehr umbrechen. Dann müsste man an die Schriftgröße ran oder einfach Icons nehmen.
die verwendeten icons sind
electric bolt
add
create
clear
notes - optional das widget
Hey! Du scheinst an dieser Unterhaltung interessiert zu sein, hast aber noch kein Konto.
Hast du es satt, bei jedem Besuch durch die gleichen Beiträge zu scrollen? Wenn du dich für ein Konto anmeldest, kommst du immer genau dorthin zurück, wo du zuvor warst, und kannst dich über neue Antworten benachrichtigen lassen (entweder per E-Mail oder Push-Benachrichtigung). Du kannst auch Lesezeichen speichern und Beiträge positiv bewerten, um anderen Community-Mitgliedern deine Wertschätzung zu zeigen.
Mit deinem Input könnte dieser Beitrag noch besser werden 💗
Registrieren AnmeldenSupport us
345
Online33.0k
Benutzer83.3k
Themen1.3m
Beiträge