Android Mathquill перекрывающиеся математические поля ⇐ Android

[Anonymous]

Я создаю приложение для Android, использующее библиотеку Mathquill.
У меня есть несколько математических полей, которые отображают математические уравнения с помощью клавиатуры.
Моя проблема в том, что математические поля перекрываются, как показано на рисунке ниже:


На этом рисунке у меня есть две строки с цифрами 1 и 2, красный квадрат и математические поля mathquill с уравнениями.
Обе области mathquill перекрываются. Я хотел бы, чтобы второе математическое поле (строка номер 2) отображалось под первым, и когда первое растет, второе корректируется динамически.
Я пытался настроить стиль математического поля, но это не сработало.
Ниже приведен код инициализации веб-представления в MainActivity.java:
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()");
}
});

Тогда у меня есть android_asset/some.html:



1: &nbsp
&nbsp


И JavaScript инициализация математического поля:

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.latex());
}
}
}
});


Приведенный ниже код динамически добавляет новое математическое поле:
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.latex());
}
}
}
});

array_mathFields.push(mathField2);

}

Таблица стилей:
.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;
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... ath-fields