ZK 프레임 워크의 HBOX / VBOX 정렬 문제
문제
Hbox와 Vbox 레이아웃에 문제가 있습니다. 나는 그들이 다소 divs와 같이 행동하는 것을 알고 있지만, 나는 그들을 내가 원하는 방식으로 정렬 할 수 없다는 것을 알고있다.
DIV, 구분 기호, 팩, 정렬, 너비, 모든 종류의 해결 방법을 추가하려고했지만 작업을 수행 할 수 없습니다.
이것은 나의 레이아웃의 북쪽이며, 나는 단지 그것을 두 조각으로 원합니다. 왼쪽에는 구성 요소의 대부분을 포함하는 왼쪽 하나는 모두 왼쪽에있는 왼쪽에 정렬
와 오른쪽 하나는 단지 몇 가지 내보내기 옵션을 가지고 있으며 모두 중앙 집중식입니다.
이미지를 게시하지만, 나는 rep을 얻지 못했습니다.
여기서 일하는 코드의 일부입니다.
<hbox width="100%">
<vbox width="80%">
<hbox>
<label value="${labels.processos}" />
<separator spacing="20px" />
<combobox id="cmbNovo" model="@load(vm.loadCombobox)"
readonly="true">
<comboitem label="@load(each)" />
</combobox>
<separator spacing="20px" />
<a onClick="@command('editar', status=each)"
label="${labels.alterarvisao}"/>
<separator spacing="20px" />
<button id="novaVisao" label="${labels.novavisao}"
onClick="@command('novo')" />
<separator spacing="20px" />
</hbox>
<separator height="10px" />
<button id="novo" label="${labels.message.novoprocesso}"
onClick="@command('novo')" />
<separator height="10px" />
</vbox>
<separator spacing="100%" />
<vbox pack="end" align="end" width="20%" >
<hbox >
<label value="${labels.common.exportar}" />
</hbox>
<hbox>
<label value="${labels.common.exportar}" />
<a onClick="@command('editar', status=each)"
label="${labels.common.pdf}"/>
<a onClick="@command('editar', status=each)"
label="${labels.common.xls}"/>
</hbox>
<hbox>
<label value="${labels.common.exportar}" />
<a onClick="@command('editar', status=each)"
label="${labels.common.pdf}"/>
<a onClick="@command('editar', status=each)"
label="${labels.common.xls}"/>
</hbox>
</vbox>
</hbox>
.
꽤 간단합니다. 왼쪽에 하나의 div가 필요하며, 왼쪽 aswell에 정렬 된 텍스트 중앙 집중식 텍스트로 오른쪽에있는 또 다른 하나. Sime Horizontal Lign에서. 나는 그냥 일어날 수 없다.
해결책
이게 당신이 원하는 것입니까?
<hbox hflex="1" spacing="20" width="100%" widths="80%,20%">
<vbox align="center" pack="start" spacing="20">
<hbox spacing="5px">
<label value="${labels.processos}" />
<combobox id="cmbNovo" model="@load(vm.loadCombobox)"
readonly="true">
<comboitem label="@load(each)" />
</combobox>
<a onClick="@command('editar', status=each)"
label="${labels.alterarvisao}"/>
<button id="novaVisao" label="${labels.novavisao}"
onClick="@command('novo')" />
</hbox>
<cell/>
<cell>
<button id="novo" label="${labels.message.novoprocesso}"
onClick="@command('novo')" />
</cell>
</vbox>
<vbox pack="center" align="center" vflex="1" spacing="20" >
<cell>
<label value="${labels.common.exportar}" />
</cell>
<cell>
<label value="${labels.common.exportar}" />
<a onClick="@command('editar', status=each)"
label="${labels.common.pdf}"/>
<a onClick="@command('editar', status=each)"
label="${labels.common.xls}"/>
</cell>
<cell>
<label value="${labels.common.exportar}" />
<a onClick="@command('editar', status=each)"
label="${labels.common.pdf}"/>
<a onClick="@command('editar', status=each)"
label="${labels.common.xls}"/>
</cell>
</vbox>
</hbox>
. 다른 팁
확인, 배치 문제를 해결했습니다. 저는 웹 디자이너가 아닌 Java 프로그래머입니다. 아마도 더 나은 해결책이 있어야합니다. 그러나 여기서 한 일은 다음과 같습니다.
<borderlayout>
<west width="80%" style="border:none">
<vbox>
<separator height="20px" />
<hbox>
<label value="${labels.processos}" />
<separator orient="vertical" spacing="50px" />
<combobox id="cmbNovo"
model="@load(vm.loadCombobox)" readonly="true">
<comboitem label="@load(each)" />
</combobox>
<separator orient="vertical" spacing="50px" />
<a onClick="@command('editar', status=each)"
label="${labels.alterarvisao}" />
<separator orient="vertical" spacing="50px" />
<button id="novaVisao"
label="${labels.novavisao}" onClick="@command('novo')" />
</hbox>
<separator height="10px" />
<button id="novo"
label="${labels.message.novoprocesso}"
onClick="@command('novo')" />
</vbox>
</west>
<east width="20%" style="border:none; align:center;">
<tablelayout columns="5">
<tablechildren colspan="5"
style="text-align:center">
<label value="${labels.common.exportar}" />
</tablechildren>
<tablechildren colspan="3">
<label
value="${labels.export.todasaspaginas}" />
</tablechildren>
<tablechildren>
<a onClick="@command('editar', status=each)"
label="${labels.common.pdf}" />
</tablechildren>
<tablechildren>
<a onClick="@command('editar', status=each)"
label="${labels.common.xls}" />
</tablechildren>
<tablechildren colspan="3">
<label value="${labels.export.estapagina}" />
</tablechildren>
<tablechildren>
<a onClick="@command('editar', status=each)"
label="${labels.common.pdf}" />
</tablechildren>
<tablechildren>
<a onClick="@command('editar', status=each)"
label="${labels.common.xls}" />
</tablechildren>
</tablelayout>
</east>
</borderlayout>
.
나는 첫 번째 안에 다른 borderlayout을 둥지려고해야했습니다. 그것은 조금 너무 많지 만, 저를 위해 잘 일했습니다.
제휴하지 않습니다 StackOverflow