Question

I’m still using 4.1 and I’m trying to center a form content on screen.
When I add a new form it stays on the “left” of the screen.

I’ve tried to change form.html (temmplates/shared) adding a div with a style like this:

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

up next to the form tag and closing it at the bottom.

The form goes to the right but not centered at all.

Anyone has any clue to help with this ?

Here is a screenshot of a simple Form (it’s not basec on models)

thanks
Alejandro

Answer 1

Ok – i’ve gone to a default of atk4.2 to demonstrate.

If you add a new page with defaults as follows

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

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

I get the following and the fields extend across the whole width of the page.

This is because the default page template takes the whole width and is expected.

In order to adjust the form, you can use view functionality so create a view under the /lib/View directory called Centre.php and put the following code in it

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

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

}
?>

Then create a new template for the view in yoursite/templates/default/view called centre.html and insert the following html code

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

and then in the page, we add the view first and the form into the view rather than straight into the page.

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

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

and this results in the following web page

The base ATK4 form is itself a view which means you can style the form however you want so if you get for example use a different style of form such as the one described here you can do this by copying yoursite/atk4/atk4/templates/shared/form.html to yoursite/atk4/templates/shared.form.html and changing the second line from

 <?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?>">

to

 <?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?>">

Create a new form.css file in yoursite/templates/default/css which contains the styling

Copy yoursite/atk4/templates/shared/shared.html to yoursite/templates/shared/shared.html and add an extra tag

  <?$css_include?> 

just above the existing

   <?$js_include?>

and in Frontend.php, let every page find the new css file.

    $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">');

which results in a styled form like this