2016-04-02 9 views
3

Ich versuche, odt-Dateien als Vorlagen zu verwenden, da es Nicht-Programmierern ermöglicht, das Layout generierter Dokumente zu erstellen oder zu bearbeiten. Zur einfachen Layoutanpassung kann man Frames verwenden (ähnlich wie Divs). Mein Code konvertiert alle Frames in Divs und setzt ihre position: fixed; (kann nicht absolut wie mPDF ignoriert Seitenränder). Jeder Rahmen hat seine Größe und Position separat eingestellt, die ich in den jeweiligen divs Stil kopiere. Und alles funktioniert gut.CSS-Alternative zum Positionieren verschachtelter divs in mPDF

Hier ist ein Beispiel eines Grund in HTML konvertiert Rahmen:

<div class="frame" style="left: 0in; top: 0in; width: 2.0374in; height: 0.5717in; z-index: 0;"> 
    <div style="margin-top: 0.0098in; font-family: Arial; font-size: 8pt; font-weight: bold;"> 
     Some Text [REPLACE_THIS] 
    </div> 
    <div style="margin-top: 0.0098in; font-family: Arial; font-size: 8pt;"> 
     More Text [CHANGE_THIS] 
    </div> 
</div> 

Hinweis: class="frame" die position: fixed; Auch setzt beachten Sie alle Inline-Stil ist ein Muss, da die meisten es inline in der XML des odt ist. Platz geklammerter ([..]) Text wird später ersetzt.

Das Problem kommt, wenn ich Frames innerhalb von Frames habe. Da Text entlang der verschachtelten Frames sein könnte, suche ich in PHP nach verschachtelten Frames, und wenn sie existieren, wickle ich sie in ein anderes Div. Ich setze den Wrapper div position: relative; so, dass die verschachtelten Frames im Fluss des Eltern-Frames bleiben. Dies führte jedoch dazu, dass die verschachtelten Frames in der mPDF so wirkten, als wären sie auf static gesetzt. Hier

ist ein Beispiel für ein 2-Frames in einem anderen Rahmen verschachtelt in HTML konvertiert:

<div class="frame" style="left: 5.8591in; top: 1.6209in; width: 2.1661in; height: 1.3134in; z-index: 14;"> 
    <div style="margin-top: 0.0201in; text-align: right; font-family: Arial; font-size: 8pt;"> 
     Parent Frame Text [INSERT_STR] 
    </div> 
    <div id="nestedwrapper" style="position: relative; overflow: visible;"> 
     <div id="nested1" class="frame" style="position: absolute; left: 0.328in; top: 0in; width: 0.9217in; height: ; z-index: 15;"> 
      <div style="margin-top: 0.0201in; text-align: right; font-family: Arial; font-size: 8pt;"> 
       First Value: 
      </div> 
      <div style="margin-top: 0.0201in; text-align: right; font-family: Arial; font-size: 8pt;"> 
       Second Value: 
      </div> 
     </div> 
     <div id="nested2" class="frame" style="position: absolute; left: 1.378in; top: 0in; width: 0.7835in; height: ; z-index: 16;"> 
      <div style="margin-top: 0.0201in; text-align: right; font-family: Arial; font-size: 8pt;"> 
       [FIRST_VALUE] 
      </div> 
      <div style="margin-top: 0.0201in; text-align: right; font-family: Arial; font-size: 8pt;"> 
       [SECOND_VALUE] 
      </div> 
     </div> 
    </div> 
</div> 

Die oben funktioniert gut in einem Browser mit nested2 neben nested1, aber in mPDF nested2 endet unterhalb nested1 up. Ich habe jede Kombination von position, display und float versucht. Außerdem wurde versucht, die Breite der Eltern- und Wrapperdivs anzupassen. Und versucht, die Position der übergeordneten Frames zum verschachtelten Frame-Posting und der Einstellung position: absolute; hinzuzufügen, aber wenn [INSERT_STR] durch mehrere Textzeilen ersetzt wird, sind die nachfolgenden Zeilen hinter den verschachtelten Frames.

Da jeder Programmierer weiß, dass es immer mehr als eine Möglichkeit gibt, etwas zu tun, suche ich nach Ideen für die Positionierung der verschachtelten Frames.

Antwort

1

Hi Position absolut und float und Anzeige inline funktioniert nicht in mpdf Verwendung Tabelle, um Element nebeneinander auszurichten. und verwenden Sie relative Position und geben Sie es oben: -30px usw., um die gewünschte Position zu erhalten.

Verwandte Themen