[英]Seaside - Page formatting
我們的頁面呈現的內容如下:
有沒有辦法可以格式化這個更好一點? 例如,可能在一列中有標簽而在另一列中有輸入?
以下是我們代碼的片段:
renderContentOn: html
html horizontalRule.
html horizontalRule.
html heading level: 2; with: 'System Warnings & Errors:'.
html horizontalRule.
(SpendingManager warningsFound = false) ifFalse: [
self renderWarnings.
WarningsReport renderContentOn: html.
SpendingManager clearProblemList.
html horizontalRule.
html horizontalRule.
].
html heading level: 2; with: 'Create A Fund:'.
html form: [
html label: 'Code: '.
html textInput
on: #fName of: FundCreator.
html break.
html label: ' Starting Amount: '.
html textInput
on: #amount of: FundCreator.
html break.
html submitButton
callback: [(FundCreator fName = '') ifFalse: [FundCreator createFromUI.]
ifTrue: [SpendingManager addProblem: 'SP0002'].
self renderReport ];
text: 'Create Fund'.
].
html heading level: 2; with: 'Create A GLAC:'.
html form: [
html label: 'Code: '.
html textInput
on: #gName of: GLACCreator.
html break.
html label: ' Debit Fund: '.
html textInput
on: #dFund of: GLACCreator.
html break.
html label: ' Credit Fund: '.
html textInput
on: #cFund of: GLACCreator.
html break.
html label: ' Description: '.
html textInput
on: #descr of: GLACCreator.
html break.
html submitButton
callback: [GLACCreator createFromUI. self renderReport ];
text: 'Create GLAC'.
].
html heading level: 2; with: 'Create a Transaction:'.
html form: [
html label: 'GLAC: '.
html textInput
on: #aGLAC of: TransactionCreator.
html break.
html label: ' Amount: '.
html textInput
on: #amount of: TransactionCreator.
html break.
html submitButton
callback: [TransactionCreator createFromUI. self renderReport ];
text: 'Create Transaction'.
].
你可以做幾件事。
更容易渲染表並將所有標簽放入一列,文本輸入另一列。 您將使用css使表格和單元格邊框不可見。
更好的解決方案是將css類分配給標簽,然后再次使用css使所有標簽具有相同的大小和方向。
肯定是在CSS中這樣做,這就是它的用途。 您可以設置標簽和輸入元素以顯示為塊,然后使用寬度和對齊來獲得所需的布局。
這樣的事情應該讓你開始:
form label {
display: block;
float: left;
text-align: right;
padding-right: 1em;
padding-top: 0.3em;
width: 15em;
}
form input {
display: block;
float: left;
padding-top: 0.3em;
}
form br {
clear: left;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.