Поменять расположение полей в форме

  • 1 Ответов
  • 408 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

Всем доброго!
Установил этот плагин впервые и столкнулся с трудностью: у меня в форме около 20 полей будет (пока чуть меньше). И после запуска формы обнаруживается, что все поля расположены по вертикали.
1) Это некрасиво!
2) Пропадает много свободного места на веб странице

Задачка - хочется расположить некоторые элементы формы рядом с друг другом, т.е. к примеру поля -  Имя, Фамилия, телефон в одной строке. Электронная почта, адрес почтовый во второй строке по горизонтали. И т.д.
Я CSS+HTML не очень хорошо знаю, так...базовые вещи, сайт делаю для себя в плане любителя повозиться в Joomla. Почитал форумы как наши, так и зарубежные и темы на сайте разработчика. Вроде как все что поможет в данной задаче - это правка кода формы с выключенной галочкой "Автогенерация формы".

Друзья. Кто-нибудь может помочь, Подскажите пож-та что отвечает в коде за расстановку полей по горизонтали?

тег div - это ведь не табличная штука?
Или чтобы решить мою задачку надо добавлять теги таблицы <TD><TR>?

Вот код моей формы:
<h2>{global:formtitle}</h2>
{error}
<!-- Do not remove this ID, it is used to identify the page so that the pagination script can work correctly -->
<fieldset class="form-horizontal formContainer" id="rsform_{global:formid}_page_0">
<div class="control-group rsform-block rsform-block-name{Name:errorClass}">
<label class="control-label formControlLabel hasTooltip" title="{Name:description}" for="Name">{Name:caption}<strong class="formRequired">(*)</strong></label>
<div class="controls formControls">
{Name:body} <span class="formValidation">{Name:validation}</span>
</div>
</div>
<div class="control-group rsform-block rsform-block-email{Email:errorClass}">
<label class="control-label formControlLabel hasTooltip" title="{Email:description}" for="Email">{Email:caption}<strong class="formRequired">(*)</strong></label>
<div class="controls formControls">
{Email:body} <span class="formValidation">{Email:validation}</span>
</div>
</div>
<div class="control-group rsform-block rsform-block-telephone{Telephone:errorClass}">
<label class="control-label formControlLabel hasTooltip" title="{Telephone:description}" for="Telephone">{Telephone:caption}</label>
<div class="controls formControls">
{Telephone:body} <span class="formValidation">{Telephone:validation}</span>
</div>
</div>
<div class="control-group rsform-block rsform-block-typework{Typework:errorClass}">
<label class="control-label formControlLabel hasTooltip" title="{Typework:description}" for="Typework">{Typework:caption}<strong class="formRequired">(*)</strong></label>
<div class="controls formControls">
{Typework:body} <span class="formValidation">{Typework:validation}</span>
</div>
</div>
<div class="control-group rsform-block rsform-block-memo{Memo:errorClass}">
<label class="control-label formControlLabel hasTooltip" title="{Memo:description}" for="Memo">{Memo:caption}<strong class="formRequired">(*)</strong></label>
<div class="controls formControls">
{Memo:body} <span class="formValidation">{Memo:validation}</span>
</div>
</div>
<div class="control-group rsform-block rsform-block-duration{Duration:errorClass}">
<label class="control-label formControlLabel hasTooltip" title="{Duration:description}" for="Duration">{Duration:caption}<strong class="formRequired">(*)</strong></label>
<div class="controls formControls">
{Duration:body} <span class="formValidation">{Duration:validation}</span>
</div>
</div>
<div class="control-group rsform-block rsform-block-auditoriya{Auditoriya:errorClass}">
<label class="control-label formControlLabel hasTooltip" title="{Auditoriya:description}" for="Auditoriya">{Auditoriya:caption}<strong class="formRequired">(*)</strong></label>
<div class="controls formControls">
{Auditoriya:body} <span class="formValidation">{Auditoriya:validation}</span>
</div>
</div>
<div class="control-group rsform-block rsform-block-datax{DataX:errorClass}">
<label class="control-label formControlLabel hasTooltip" title="{DataX:description}" for="DataX">{DataX:caption}<strong class="formRequired">(*)</strong></label>
<div class="controls formControls">
{DataX:body} <span class="formValidation">{DataX:validation}</span>
</div>
</div>
<div class="control-group rsform-block rsform-block-format{Format:errorClass}">
<label class="control-label formControlLabel hasTooltip" title="{Format:description}" for="Format">{Format:caption}<strong class="formRequired">(*)</strong></label>
<div class="controls formControls">
{Format:body} <span class="formValidation">{Format:validation}</span>
</div>
</div>
<div class="control-group rsform-block rsform-block-advanced{Advanced:errorClass}">
<label class="control-label formControlLabel hasTooltip" title="{Advanced:description}" for="Advanced">{Advanced:caption}<strong class="formRequired">(*)</strong></label>
<div class="controls formControls">
{Advanced:body} <span class="formValidation">{Advanced:validation}</span>
</div>
</div>
<div class="control-group rsform-block rsform-block-sendbutton{SendButton:errorClass}">
<label class="control-label formControlLabel hasTooltip" title="{SendButton:description}" for="SendButton">{SendButton:caption}</label>
<div class="controls formControls">
{SendButton:body} <span class="formValidation">{SendButton:validation}</span>
</div>
</div>
</fieldset>

Был бы крайне признателен за помощь. А то это заключительный этап в создании сайта и чего-то с формой застрял.
Спасибо!

*

Оффлайн Ilhom666

например в CSS добавить
Код: (css) [Выделить]
.rsform-block.control-group {
  display: inline-block;
}