Радиокнопки, флажки не выровнены по вертикали с метками (Rails 3) - PullRequest
Новая
       19

Радиокнопки, флажки не выровнены по вертикали с метками (Rails 3)

1 голос
/ 02 апреля 2012

Я искал существующий ответ на этот вопрос, но не нашел его.В настоящее время я работаю над проектом Rails 3 с некоторыми формами, в которых есть вопросы с несколькими вариантами ответов / множественным выбором с переключателями и флажками соответственно.Я использую стиль конструктора форм, например так: 

<%= form_for [@profile,@answer], :method => 'put', :url => { :action => 'update' }  do |f| %>
            <% if @options.nil? %>
                <%= @error_message %>
            <% else %>
                <% @options.each do |option| %>
                    <label for="<%= 'answer_response_' + option.downcase.gsub(' ','_') %>"><%= f.radio_button :response, option %><%= option %></label>                     
                <% end %>
            <% end %>
            <div id="comments_area">
                <p>Do you have any additional comments?</p>
                <%= f.text_area :comments, :cols => 90, :rows => 5 %>
            </div>
            <%= submit_tag("Previous") %>
            <%= submit_tag("Next") %>               
        <% end %>

@ options - это просто массив строк, обозначающих каждую отображаемую опцию.

Ярлыки работают отлично, прикрепленные к соответствующему радио.кнопка / флажок.Тем не менее, текст для метки всегда отображается на следующей строке, независимо от того, что я делаю.Пример: 

Describe yourself:
[]
Short
[]
Fun
[]
Bored

Я уже пытался использовать помощник по форме f.label после f.radio_button / check_box, и у него та же проблема.Фактически, именно поэтому я делаю метку тега «HTML-стиль» выше (не используя ERB).Это проблема стиля, которая может быть решена с помощью CSS?Если так, как я могу поместить текст метки в ту же строку после соответствующего флажка / переключателя?

Ответы [ 2 ]

3 голосов
/ 01 мая 2012

Для полноты картины, это как решить проблему многострочного текста с помощью встроенного стиля (используя haml) 

= f.check_box :eula_accepted
= f.label :eula_accepted, "I accept the EULA", :style => "display:inline"
2 голосов
/ 02 апреля 2012

Это может быть проблема CSS, но, скорее всего, это потому, что вы поместили переключатель внутри метки, когда это должно быть до или после.

Попробуйте разделить их.Если это не изменит результат, посмотрите на ширину ввода - если ваши входы настроены так, чтобы охватить всю строку, это подтолкнет текст на следующую строку.Чтобы изменить выравнивание, вы также можете посмотреть ключевые слова CSS «inline», «float» и, возможно, «vertical-align».Получение расширения для веб-разработчиков Firefox также может помочь вам понять, что происходит с CSS, например, сколько места занимает элемент.

...