Responsive Inhalte (WebHelp)

Aufgabe

Wie können Inhalte in Help+Manual in einem responsiven Layout für die WebHelp-Ausgabe angeordnet werden, so dass beispielsweise abhängig von der Displaygröße die Inhalte nebeneinander oder untereinander angezeigt werden.

Lösung

Tabellenformat in Help+Manual mit responsiven Einstellungen verwenden:

1. Tabellenformat anlegen, z. B. fluidtable (im Projekt)

2. Formatierung in der HTML Seitenvorlage definieren (im Projekt oder in der Skin): Abschnitt Konfiguration > HTML Seitenvorlagen > Default

3. CSS-Einstellungen im Bereich HTML Quellcode eintragen

   Kopieren

      <style type="text/css">
        body { margin: 0px; background: #FFFFFF; }
   /* Formatierung für fluidtable */     
   @media only screen and (max-width: 600px) {
     .fluidtable thead {
       display: none;
     }
     .fluidtable tr {
       display: block;
     }
     .fluidtable td {
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
       display: block;
       clear: both;
       width: 100% !important;
       max-width: none !important;
       white-space: normal !important;
       text-align: right;
     }
     .fluidtable td:before {
       content: attr(data-label);
       float: left;
       font-weight: bold;
     }
   } 
      </style>

Quelle: Alexander Halser, 29.07.2020