Android Mathquill überlappende Mathematikfelder ⇐ Android

[Anonymous]

Ich erstelle eine Android-App, die die Mathquill-Bibliothek verwendet.
Ich habe mehrere Mathematikfelder, die mathematische Gleichungen über die Tastatur anzeigen.
Mein Problem ist, dass sich Mathematikfelder wie im Bild unten überlappen:


Auf diesem Bild habe ich zwei Zeilen mit der Nummer 1 und 2, ein rotes Quadratfeld und Mathquill-Mathefelder mit Gleichungen.
Beide Mathquill-Bereiche überlappen sich. Ich möchte, dass das zweite Mathematikfeld (Zeilennummer 2) unter dem ersten angezeigt wird und wenn das erste wächst, wird das zweite dynamisch angepasst.
Ich habe versucht, den Stil des Mathematikfelds anzupassen, aber es hat nicht funktioniert.
Unten ist der Webview-Initialisierungscode in MainActivity.java:

Code: Select all

et = (WebView) findViewById(R.id.web_view);
...
et.loadUrl("file:///android_asset/some.html");
...
Button button_add_mathfield = (Button) findViewById(R.id.button_add_mathfield);
button_add_mathfield.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
et.loadUrl("javascript:add_mathfield()");
}
});

Dann habe ich android_asset/some.html:

Code: Select all

1: &nbsp
 &nbsp 

Und Javascript math-field init:

Code: Select all

var mathFieldSpan = document.getElementById('math-field');
...
var MQ = MathQuill.getInterface(2);
var array_mathFields = [];
...
var mathField = MQ.MathField(mathFieldSpan, {
spaceBehavesLikeTab: true,
handlers: {
edit: function() {
mathField.focus();
latexSpan.textContent = mathField.latex();
for(var i=0;i< array_mathFields.length;++i){
Android.getImageUrl(i, array_mathFields[i].latex());
}
}
}
});

Der folgende Code fügt dynamisch ein neues Mathematikfeld hinzu:

Code: Select all

function add_mathfield(){
var parentDiv = document.getElementById('main_div');
var para_div = document.createElement("div");
para_div.classList.add("row2");
var para_p = document.createElement('p');
para_p.classList.add("p_");
para_p.innerHTML = (++idx)+": &nbsp";
var para_div2 = document.createElement("div");
para_div2.classList.add("box");
para_div2.classList.add("red");

var para_span2 = document.createElement("span");
para_span2.innerHTML = "&nbsp";

var para_span = document.createElement("span");
para_span.classList.add("math-field-1");
para_div.appendChild(para_p);
para_div.appendChild(para_div2);
para_div.appendChild(para_span2);
para_div.appendChild(para_span);

parentDiv.insertBefore(para_div, parentDiv.childNodes[idx]);

var secondMQ = MathQuill.getInterface(2);
var mathField2 = secondMQ.MathField(para_span, {
spaceBehavesLikeTab: true,
handlers: {
edit: function() {
mathField2.focus();
latexSpan.textContent = mathField2.latex();
for(var i=0;i< array_mathFields.length;++i){
Android.getImageUrl(i, array_mathFields[i].latex());
}
}
}
});

array_mathFields.push(mathField2);

}

Stylesheet:

Code: Select all

.row, .row2 {
display : flex;
align-items : center;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height: 30px;
position:relative;
}

.math-field-1{
display: inline-block;
}

.p_{
height: 30px;
}

.main_div{
display:flex;
flex-direction: column;
}

.box{
display:inline-block;
height: 20px;
width: 20px;
border: 1px solid black;
}

.red {
background-color: red;
}