Я все еще использую 4.1 и пытаюсь центрировать содержимое формы на экране. Когда я добавляю новую форму, она остается в левой части экрана.
Я попытался изменить form.html(templates/shared), добавив div с таким стилем:
margin-left : 10%; margin-right : 10%;
вверх рядом с тегом формы и закрывая его внизу.
Форма идет вправо, но совсем не по центру.
У кого-нибудь есть подсказка, чтобы помочь с этим?
Вот скриншот простой формы (это не базовая модель)
спасибо Алехандро
Хорошо - я выбрал 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?>">
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?>">
Создайте новый файл form.css в yoursite/templates/default/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">');
что приводит к такой стилизованной форме
Здесь есть несколько примеров различных макетов форм, которые можно использовать для настройки самого макета формы. Не уверен из вашего вопроса, хотите ли вы центрировать форму на странице или центрировать поля.
Если вы просто хотите центрировать форму на веб-странице, вы хотите использовать margin: auto для центрирования css, а не устанавливать проценты с каждой стороны, как показано здесь
Также обратите внимание, что если вы изменяете файлы из каталога atk4, вы должны сделать копию в yoursite/templates/shared и изменить ее там, чтобы вы могли обновиться, перезаписав каталог atk4 позже, ничего не потеряв.
Если я использую шаблон формы по умолчанию (в данном случае в CRUD), я получаю следующее
Если я внесу ваши изменения в atk4/templates/form.html, добавив
<div style="width: 50%; margin: 0 auto;">
в качестве второй строки в form.html и добавив соответствующий
</div>
одна строка снизу, он смещает все немного вправо следующим образом
Что неясно в вашем вопросе, так это то, чего вы пытаетесь достичь - вы хотите переместить поля внутри формы или хотите центрировать всю форму на странице?
Я думаю, что причина смещения связана с установкой ширины на 50%, но я не знаю, какой макет вы пытаетесь получить - может быть, вы просто хотите выровнять метки по полям? Пожалуйста, разместите скриншоты в исходном вопросе о том, что вы получаете, и попытайтесь описать, чего вы хотите достичь.
