Mobirise-Tutorials.com

Hallo zusammen

Da die Mobirise Tabellen (aktuellste Version) etwas umständlich zu handhaben sind, habe ich eine Exceltabelle über onedrive in einem iframe auf einer html-Seite eingefügt: https://vmcu.ch/Tourenprogramm-2023.html

Auf dem Desktop sieht das eigentlich gut aus.

Auf dem Tablet aber, ist die Tabelle nicht mehr zentriert.

Was muss ich noch anpassen, damit die Exceltabelle auch auf dem Tablet korrekt angezeigt wird?

Vielen Dank für eure Hilfe!

Sorry, da ist ein falscher Link hineingerutscht! Der ist korrekt.
https://vmcu.ch/tourenprogramm.html

Das wird mit Bootstrap5 normalerweise mit der

class="d-flex justify-content-center">

erreicht.

https://getbootstrap.com/docs/5.0/utili ... fy-content

Hallo Tommy

Danke!

Wo genau kommt diese class hin? Ich habe sie an verschiedenen Stellen im Code Editor eingefügt, jedoch ohne Erfolg. Wäre super, wenn du mir anhand des Screenshots die Zeile nennen könntest, wo ich das einfügen muss. Muss die Zeile innerhalb eines div stehen?

Moin,

also das geht so gar nicht.

Du kannst doch keine Tabelle mit einer fixen Breite von 1405 Pixeln in eine responsive Seite einbinden wollen. Die bleibt immer 1405 px breit, auch am Handy mit einer Displaybreite von 360 px

Dann hast Du die Breite des Blocks auf ganz schmal stehen, schiebe den Regler in den Block-Werkzeugen auf die volle Breite, dann sitzt das Teil wenigstens so im Display, das man es am Desktop sehen kann.

Stelle das Iframe auch auf eine Breite von 100% und natürlich nicht auf 1405px

width="1405"

also so:

width="100%"

Das mit der Bootstrap class="justify-content-center" kannst Du wieder entfernen - das geht so nicht.

Warum nimmst Du keine Bootstrap-Tabelle von Mobirise - möglichst aus dem Standard-Thema "Mobirise4", die ist dann auch gleich noch in allen Spalten sortierbar.

Beispiele:

https://www.mobirise-tutorials.com/Tabellen/

Ich bin jetzt nicht Tommy,
aber Dein IFrame hat eine fixe Breite von 1400px.
Mach da mal 100% rein,
Außerdem sollte die Spalte auch für große Bildschirme eine Col-12 und keine col-md-7 sein, damit die Tabelle die volle Bildschirmbreite bekommt.

Überlege Dir mal, ob Du die Tabelle nicht besser als PDF einbindest. So hat jemand mit einem Handy keine Chance, die Tabelle zu erfassen. Das geht mit einem PDF zumindest etwas besser.

Frank

Ich danke euch.

Eine Exceltabelle ist halt viel einfacher zu bearbeiten. Schon nur die Spalte mit dem Datum - mit "Auto ausfüllen" ist das in Excel in zwei Sekunden erledigt. In den MBR-Tabellen muss ich jedes Datum händisch eintragen. Copy paste geht gerade mal mit einer einzelnen Zelle und wehe man muss mal eine zusätzliche Zeile oder Spalte irgendwo in der Mitte einfügen, dann wirds aufwändig.

Mit der Breite auf 100% hat das zwar funktioniert, trotzdem habe ich mich jetzt doch für eine MBR-Tabelle entschieden. Bin ja Rentner und habe viel Zeit

@Frank
Ich habe einen Link zur PDF-Datei eingefügt. Die Vereinsmitglieder können das Programm herunterladen und ausdrucken.

Ich wünsche noch einen schönen Sonntag und drücke heute Abend die Daumen für DE!

Noch etwas. Kann man der Tabelle einen Rahmen und Linien hinterlegen, um Spalten und Zeilen etwas übersichtlicher zu machen?
https://vmcu.ch/tourenprogramm.html

Das sollte mit der

class="table-bordered"

funktionieren.

https://getbootstrap.com/docs/5.0/conte ... le-borders

Hier habe ich das mal probiert:

https://www.mobirise-tutorials.com/Tabellen-Anker/

Danke Tommy

Tut mir leid, aber ich habe keinen blassen Schimmer, wo ich das im Code Editor einfügen muss

... na einfach an die class="table" von Mobirise bzw. das ist ja eine "Bootstrap-Class" mit dran schreiben:

Hat super geklappt - Vielen Dank

https://vmcu.ch/tourenprogramm.html

Ich schau jetzt noch, ob ich es hinbekomme, die Zeilenhöhe zu verkleinern. Sonst würde ich mich nochmal melden.

Ziehe mal den Block mit der Tabelle noch breiter auf, falls es bei diesem Block einen Schieber in den Block-Werkzeugen - am Zahnrad

- dafür gibt.

Ok, der Schieber ist jetzt auf dem Maximum.

Moin,

so finde ich, sieht das doch ganz richtig aus. Gucke auch zur Kontrolle am Handy.

Wolltest Du die Tabellen-Reihen schmaler oder breiter haben, kannst Du dem Selektor "table row" (Tabelle Reihe):

tr

eine andere Höhe geben, wie z.B. 25px:

Code: Alles auswählen

tr {
   line-height: 25px;
   min-height: 25px;
   height: 25px;
}

... wahrscheinlich reicht auch nur:

Code: Alles auswählen

tr {
   height: 25px;
}

Das kopierst Du in den "Code Editor" in den Bereich "CSS Editor" des Blocks mit der Tabelle.

Tipp:

Du kannst so eine Mobirise-Tabelle auch schon vorsortiert darstellen (man kann dennoch weiter manuell sortieren), gucke mal bei mir - da steht auch unter der Tabelle wie man das macht (sonst frage nochmals). Bei meiner Tabelle ist die erste Spalte (Datum) vorsortiert, sodass mein neuestes Tutorial immer oben steht:

https://www.mobirise-tutorials.com/Tutorial-Links/

Das macht Sinn, wenn Du z.B. die neuesten Touren immer oben anzeigen willst - also die erste Spalte "Tour-Nr" vorsortierst, die Du ja andererseits unten dran schreiben musst, da ja immer wieder neue Touren hinzukommen. Ich hab dort auch beschrieben, wie man die Tabelle um noch mehr Reihen beliebig verlängern kann.

Auf dieser Seite von mir habe ich das auch nochmals beschrieben:

> Default > Sortiert > Nicht sortierbar machen (fest voreingestellt)

https://www.mobirise-tutorials.com/Tabe ... tiert.html

Dabei muss man der Tabelle eine ID geben - bei mir id="meineTabelle" - eben die ID, die man in das JavaScript einträgt, also so in etwa:

<table id="meineTabelle" class="table table-striped isSearch" cellspacing="0">

Beispiel JavaScript zum vorsortieren der ersten Spalte (0) - mit Angabe meiner ID - '#meineTabelle':

Code: Alles auswählen

  <!-- meine Tabelle neu sortieren. # (0) = absteigend -->
  <script>
        var table = $('#meineTabelle').DataTable();
         
        // sortieren nach Spalte 0 und dann neu anlegen
        table
            .order( [ 0, 'desc' ] )
            .draw();
  </script>

Guten Morgen Tommy

Die Tabellen-Reihen schmaler zu machen, hat mich nicht schlafen lassen. Schlussendlich habe ich in der css diesen Wert von 1.5rem auf 0.9rem geändert (siehe Bild) und es hat funktioniert

Die Sortierung der Tabelle muss ich mir noch anschauen. In diesem Fall ist es aber nicht so wichtig, da die Rad-Touren für das ganze nächste Jahr im Voraus erfasst werden.

Ganz herzlichen Dank für deine Hilfe. Ich finde es absolut nicht selbstverständlich, dass du sogar sonntags im Einsatz bist!

... na jetzt ist das aber etwas sehr schmal, da sitzen ja die Pfeile schon im Text oder sind (rechts) ganz weg.

Du - ich bin schon seit Jahren Rentner und für mich ist es egal ob Sonntag oder Montag - nur abends habe ich dann meist keine Lust mehr.

...das verstehe ich jetzt nicht. Wenn ich das teste (mit FF, Edge, auf dem Laptop und iOS), sieht das ordentlich aus.

Habe die Werte in der css aber wieder zurückgesetzt.

Die Tabelle nervt! Ich habe mich nun für den Themen-Block ExpertM5 entschieden.

https://vmcu.ch/tourenprogramm.html

Leider kann ich in diesem Block die Breite nicht über einen Schieberegler einstellen. Es steht nur die Option Full Width zur Verfügung.

Vielleicht hat jemand Lust zu schauen, wo und wie ich die Kacheln etwas breiter machen kann.

ja - warum nicht !

Ich bin gerade mit BETA-Testen der fünften BETA-Version für eine bald kommende neue Mobirise-Version zugange und habe gar keine Zeit.

Mobirise-Tutorials.com

Exceltabelle in iframe

Exceltabelle in iframe

Re: Exceltabelle in iframe

Re: Exceltabelle in iframe

Re: Exceltabelle in iframe

Re: Exceltabelle in iframe

Re: Exceltabelle in iframe

Re: Exceltabelle in iframe

Re: Exceltabelle in iframe

Re: Exceltabelle in iframe

Re: Exceltabelle in iframe

Re: Exceltabelle in iframe

Re: Exceltabelle in iframe

Re: Exceltabelle in iframe

Re: Exceltabelle in iframe

Re: Exceltabelle in iframe

Re: Exceltabelle in iframe

Re: Exceltabelle in iframe

Re: Exceltabelle in iframe

Re: Exceltabelle in iframe

Re: Exceltabelle in iframe