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

Question

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

我尝试更改 form.html（模板/共享）添加具有如下样式的 div：

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

在表单标签旁边并在底部关闭它。

表格向右，但根本不居中。

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

这是一个简单表单的屏幕截图（它不是基于模型）

谢谢亚历杭德罗

Answer 1

这里有一些不同表单布局的示例，您可以使用它们来调整表单布局本身。如果您想在页面中居中表格或将字段居中，则不确定您的问题。

如果您只想在网页中居中表单，则需要使用 margin: auto 来使 css 居中，而不是在每一侧设置一个百分比，如此处所示

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

Answer 2

如果我使用默认表单模板（在这种情况下是 CRUD），我会得到以下信息

如果我通过添加对 atk4/templates/form.html 进行更改

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

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

</div>

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

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

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

Answer 3

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

如果您添加一个具有默认值的新页面，如下所示

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

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

我得到以下信息，并且这些字段延伸到页面的整个宽度。

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

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

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

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

}
?>

然后在 yoursite/templates/default/view 中为视图创建一个名为 center.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');
    } 
  }
 ?>

这将导致以下网页

基本 ATK4 表单本身就是一个视图，这意味着您可以根据需要设置表单样式，因此，例如，如果您使用不同样式的表单，例如此处描述的表单，您可以通过复制 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">');

这会产生这样的样式形式