Question

我仍在使用4.1，而我正试图将表单内容集中在屏幕上。当我添加一个新表格时，它会停留在屏幕的“左侧”。

我尝试更改form.html（temmplates / shared），添加一个这样的样式的div：

margin-left : 10%; margin-right : 10%;

在表单标记旁边，然后在底部关闭它。

表格向右移动，但根本没有居中。

任何人都有任何线索可以帮助解决这个问题吗？

这是一个简单表格的截图（它不是模型上的基础）

form example

感谢亚历

Answer 1

此处有一些examples不同的表单布局，您可以使用它们来调整表单布局本身。如果您希望将表单置于页面中心或将字段置于中心位置，则无法确定您的问题。

如果您只想将表单置于网页中心，则需要使用margin：auto来居中css，而不是如图所示设置每一侧的百分比here

另请注意，如果您修改atk4目录中的文件，您应该复制到yoursite / templates / shared并在那里进行修改，以便您可以通过稍后覆盖atk4目录进行升级而不会丢失任何内容。

Answer 2

如果我使用默认表单模板（在本例中是CRUD），我会得到以下内容

enter image description here

如果我通过添加

对atk4 / templates / form.html进行更改

<div style="width: 50%; margin: 0 auto;">

作为form.html中的第二行并添加相应的

</div>

从底部开始一行，它将所有内容略微向右移动，如下所示

enter image description here

您的问题中不清楚的是您要实现的目标 - 您是要移动表单中的字段还是要将整个表单集中在页面上？

我认为转移的原因是因为将宽度设置为50％但我不知道你想要获得什么样的布局 - 你是否只想将标签与字段对齐？请在最初的问题中发布截图，并尝试描述您想要实现的目标。

Answer 3

好的 - 我已经默认使用了atk4.2进行演示。

如果您添加一个默认值如下的新页面

<?php
   class page_test extends Page {
   function init() {
     parent::init();
     $p=$this;

     $f=$p->add('MVCForm')->setModel('Customer');
   } 
}
?>

我得到以下内容，字段扩展到页面的整个宽度。

enter image description here

这是因为默认页面模板占用整个宽度并且是预期的。

为了调整表单，您可以使用视图功能，因此在/ lib / View目录下创建一个名为Centre.php的视图，并将以下代码放入其中

<?php
class View_Centre extends View {
   function init(){
      parent::init();
   }

   function defaultTemplate() {
     return array('view/centre');
   }

}
?>

然后在yoursite / templates / default / view中为视图创建一个名为centre.html的新模板并插入以下html代码

<div style='width:50%; margin: auto;'>
  <?$Content?>
</div>

然后在页面中，我们首先将视图和表单添加到视图中，而不是直接添加到页面中。

<?php
  class page_test extends Page {
    function init() {
      parent::init();
      $p=$this;

      $v=$p->add('View_Centre');
      $f=$v->add('MVCForm')->setModel('Customer');
    } 
  }
 ?>

，这会产生以下网页

enter image description here

基础ATK4表单本身就是一个视图，这意味着您可以根据需要设置表单的样式，例如，如果您使用不同样式的表单，例如描述here的表单，您可以通过复制yoursite来实现/atk4/atk4/templates/shared/form.html到yoursite / atk4 / templates / shared.form.html并更改第二行

 <?form?>
   <div id="<?$_name?>" class="atk-form <?$class?>" style="<?$style?>">
   <?$hint?>
   <form class="<?$form_internal_class?>" id="<?$form_name?>" name="<?$form_name?>" action="<?$form_action?>" method="POST" <?$enctype?>>
   <fieldset class="<?$fieldset?>">

到

 <?form?>
   <div id="stylized>" class="myform <?$class?>" style="<?$style?>">
   <?$hint?>
   <form class="<?$form_internal_class?>" id="<?$form_name?>" name="<?$form_name?>" action="<?$form_action?>" method="POST" <?$enctype?>>
    <fieldset class="<?$fieldset?>">

在yoursite / templates / default / css中创建一个包含样式的新form.css文件

将yoursite / atk4 / templates / shared / shared.html复制到yoursite / templates / shared / shared.html并添加额外的标记

  <?$css_include?>

就在现有的

之上

   <?$js_include?>

在Frontend.php中，让每个页面都找到新的css文件。

    $this->addLocation('templates',array(
                       'css'=>array(
                         'default/css',
                        ),
          ));
          $this->template->appendHTML('css_include','<link type="text/css" href="'.$this->api->locateURL('css','form.css').'" rel="stylesheet">');

会产生像这样的样式表格

enter image description here

中心表单内容修改form.html模板

3 个答案: