Binding Monorail RadioFields to GenericLists - castle-monorail

I have the following object which I bind to a Form in my view:
public class Foo
{
public List<Bar> Items { get; set; }
}
public class Bar
{
public List<string> Lines { get; set; }
public int Resolution { get; set; }
}
I am presenting this information to the user as various groups of RadioFields.
How do I bind the RadioFields so that they display a group of RadioFields for each item in Items. Each group of RadioFields having an option for each Lines and that each group of RadioFields is bounded to Resolution?

It's a plain old HTML question
<% foreach (var bar in view.Foo.Items) { %>
<% var barIx = 0; %>
<fieldset>
<% foreach (var line in bar.Lines) { %>
<% var lineIx = 0; %>
<label for="bar<%=barIx%>_line_<%=lineIx%>"><%=line%>: </label>
<input type="radio" value="<%=line%>" name="bar[<%=barIx%>].Lines" id="bar<%=barIx%>_line_<%=lineIx%>" />
<% ++lineIx; %>
<% } %>
<label for="bar<%=barIx%>_resolution">Resolution: </label>
<input type="text" value="<%=bar.Resolution%>" name="bar[<%=barIx%>].Resolution" id="bar<%=barIx%>_resolution" />
<% ++barIx; %>
</fieldset>
<% } %>

Related

<select> created by time_select is missing class="form-control"

Styling <select> in Bootstrap 3.3.7 can be done like so:
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
The key is the class form-control. When I use time_select from Phoenix.HTML.Form in my html.eex that creates a <select>, the class is not added even when I specify it:
<div class="form-group">
<%= label f, :break, "Pause", class: "control-label" %>
<%= time_select f, :break, class: "form-control" %>
</div>
The resulting HTML looks like this:
<div class="form-group">
<label class="control-label" for="training_break">Pause</label>
<select id="training_break_hour" name="training[break][hour]">
<option value="0">00</option>
...
How do I add the class form-control to the <select> here?
I've noticed that other types of inputs do add the class, e.g. text_input:
<div class="form-group">
<%= label f, :title, "Titel", class: "control-label" %>
<%= text_input f, :title, class: "form-control" %>
</div>
This results in that:
<div class="form-group">
<label class="control-label" for="training_title">Titel</label>
<input class="form-control" id="training_title" name="training[title]" type="text">
</div>
Another thing I've found is this post: Adding a bootstrap class to rails form time_select field. It states the same problem, sadly there is no such HTML-specific parameter for Phoenix' version of that function.
Maybe I'm just missing something?
When you use a function that generates just one <select> (e.g. select), you can add the class like so:
<%= select f, :age, class: "form-control" %>
When you use a function that generates more than one <select>s (e.g. date_select), to add the class you need to address each one separately like so:
<%= date_select f, :date,
[
year: [class: "form-control"],
month: [class: "form-control"],
day: [class: "form-control"]
] %>
This will add the class form-control to all three generated <select>s.

How to add an onclick event to a submit_tag

please i am trying to add an onclick event to my button on rails 5, when click this the function is to add row to a table but its not adding row as excepted, i need help please.
**addRow function**
function addrow(count){
var table = document.getElementById("result_table");
var row = document.getElementById("result_table").lastChild;
var clone = row.cloneNode(true);
for (i=0; i<count; i++)}{
table.appendChild(clone);
}
}
and the above function is in a file called controlMenus.js which is placed in C:\Users\UserName\Documents\department\app\assets\javascripts rails project directory.
**The view**
<div = "row">
<div class = "col-8">
<div class = "col-1"></div>
<div class = "col-1 no-padding">
<%= render 'layouts/lecturer_menu' %>
</div>
<div class = "col-5 no-padding margin-left">
<div class = "trans-background no-padding">
<h5 class = "pad-left centered black-font">ENTER RESULT</h5>
<table id = "result_table" border = "1" style="width: 100%;
align: center;">
<th>S/N</th>
<th>MATNO</th>
<th>NAME</th>
<th>COURSE TITLE</th>
<th>COURSE CODE</th>
<th>GRADE</th>
<th>POINT</th>
<tr>
<td>1</td>
<td>HELLO</td>
<td>HELLO</td>
<td>HELLO</td>
<td>HELLO</td>
<td>HELLO</td>
<td>HELLO</td>
</tr>
<% for i in(1..#row.to_i)do %>
<tr>
<td><%= i+1 %></td>
<td>HELLO</td>
<td>HELLO</td>
<td>HELLO</td>
<td>HELLO</td>
<td>HELLO</td>
<td>HELLO</td>
</tr>
<% end %>
</table>
<%= form_for :rows, url: {controller: "lectureractivities",
action: "addrow"} do |f| %>
<%= f.number_field :row, {min: 1, class: "fixed-width"} %>
<%= submit_tag :addrows, onclick: "addrows();" %>
<% end %>
</div>
</div>
<div class = "col-1"></div>
</div>
</div>
What does not working mean? What have you done to debug? Have you confirmed that the js file is loading? Have you logged anything to the console to ensure that your js function variables are what you expect them to be? For starters, there are a number of errors in your html, the most glaring is in this line
<%= submit_tag :addrows, onclick: "addrows();" %>
You call a function "addrows", but your function is defined as "addrow". Try changing it to
<%= f.submit_tag :addrows, onclick: "addrow();" %>

When looping over Dataobject, how to display 2 records per column?

When looping over a DataObject how do you only display 2x items per column e.g
I need to display the locations as per this design which has 4 columns. I am using boostrap for the columns.
I have a Location.php Dataobject
class Location extends DataObject {
public static $default_sort = 'Sort';
private static $db = array(
'Sort' => 'Int',
'City' => 'Varchar(255)',
'Address' => 'Text',
'PhoneNumber' => 'Varchar(255)'
);
private static $has_one = array(
'SiteConfigExtension' => 'SiteConfig',
);
private static $summary_fields = array(
'City',
'Address',
'PhoneNumber',
);
}
In my template .ss I have this
<% with $SiteConfig %>
<% loop Locations %>
<div class="col-md-3">
<div class="location-$Pos">
<h6>$City</h6>
<div>$Address</div>
<div>$PhoneNumber</div>
</div>
</div>
<% end_loop %>
<% end_with %>
Obviously atm this creates a new column for each record in the Dataobject.
You can use $First $Last and $MultipleOf(x). The below will display 2 columns per row. Change MultipleOf(2) to another number to display a different number of columns per row. MultipleOf(3) = 3 columns per row, MultipleOf(4) = 4 columns per row, etc. You will need to update the css class names.
<% with $SiteConfig %>
<% loop Locations %>
<% if First %>
<div class="row">
<% end_if %>
<div class="col-md-6">
<div class="location-$Pos">
<h6>$City</h6>
<div>$Address</div>
<div>$PhoneNumber</div>
</div>
</div>
<% if MultipleOf(2) %>
</div><% if not Last %><div class="row"><% end_if %>
<% else %>
<% if Last %></div><% end_if %>
<% end_if %>
<% end_loop %>
<% end_with %>

Rails Bootstrap Navbar and refineryCMS

Does anyone have implemented the Rails Bootstrap Navbar in refineryCMS?
I'm having a hard time trying to figure out how to render the dropdown menu.
which should be the right way of accomplish this?
_menu.html.erb
<%
if (roots = local_assigns[:roots] || (collection ||= refinery_menu_pages).roots).present?
dom_id ||= 'menu'
css = [(css || 'menu'), 'clearfix'].flatten.join(' ')
hide_children = Refinery::Core.menu_hide_children if hide_children.nil?
-%>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<nav id='<%= dom_id %>' class='<%= css %> nav'>
<ul class="nav">
<%= render :partial => '/refinery/menu_branch', :collection => roots,
:locals => {
:hide_children => hide_children,
:sibling_count => (roots.length - 1),
:menu_levels => local_assigns[:menu_levels],
:apply_css => true #if you don't care about class='first' class='last' or class='selected' set apply_css to false for speed.
} -%>
</ul>
</nav>
</div>
</div>
</div>
<% end -%>
_menu_branch.html.erb
<%
if !!local_assigns[:apply_css] and (classes = custom_menu_branch_css(local_assigns)).any?
css = "class='#{classes.join(' ')}'".html_safe
end
-%>
<li class="dropdown">
<% if menu_branch.children.present? && menu_branch.ancestors.length < 1 %>
<%= link_to(menu_branch.title, refinery.url_for(menu_branch.url), class: "dropdown-togle", data: { toggle: "dropdown" }) -%>
<% else %>
<%= link_to(menu_branch.title, refinery.url_for(menu_branch.url)) -%>
<% end %>
<% if ( (children = menu_branch.children unless hide_children).present? &&
(!local_assigns[:menu_levels] || menu_branch.ancestors.length < local_assigns[:menu_levels]) ) -%>
<ul class="dropdown-menu">
<%= render :partial => '/refinery/menu_branch', :collection => children,
:locals => {
:apply_css => local_assigns[:apply_css],
:hide_children => !!hide_children,
:menu_levels => local_assigns[:menu_levels]
} -%>
</ul>
</li>
<% end -%>
nav_bar snippet
<%= nav_bar :fixed => :top, :brand => "Fashionable Clicheizr 2.0", :responsive => true do %>
<%= menu_group do %>
<%= menu_item "Home", root_path %>
<%= menu_divider %>
<%= drop_down "Products" do %>
<%= menu_item "Things you can't afford", expensive_products_path %>
<%= menu_item "Things that won't suit you anyway", harem_pants_path %>
<%= menu_item "Things you're not even cool enough to buy anyway", hipster_products_path %>
<% if current_user.lives_in_hackney? %>
<%= menu_item "Bikes", fixed_wheel_bikes_path %>
<% end %>
<% end %>
<%= menu_item "About Us", about_us_path %>
<%= menu_item "Contact", contact_path %>
<% end %>
<%= menu_group :pull => :right do %>
<% if current_user %>
<%= menu_item "Log Out", log_out_path %>
<% else %>
<%= form_for #user, :url => session_path(:user), html => {:class=> "navbar-form pull-right"} do |f| -%>
<p><%= f.text_field :email %></p>
<p><%= f.password_field :password %></p>
<p><%= f.submit "Sign in" %></p>
<% end -%>
<% end %>
<% end %>
<% end %>
Faced for some hours with same issue.
Have solution with bit more pretty code (or just more close to refinery standarts), I believe, its better to override base Refinery menu_presenter
first of all take a look a bit simmilar quest http://refinerycms.com/guides/menu-presenter and this one too: http://refinerycms.com/guides/extending-controllers-with-decorators
So. Based on that article lets do this
app/decorators/models/refinery/page_decorator.rb:
Refinery::Page.class_eval do
def self.menu_pages
where :show_in_menu => true
end
end
app/helpers/application_helper.rb
module ApplicationHelper
def menu_header
menu_items = Refinery::Menu.new(Refinery::Page.menu_pages)
presenter = Refinery::Pages::MenuPresenter.new(menu_items, self)
presenter.first_css = nil
presenter.last_css = nil
presenter
end
end
in terminal run:
cd /path/to/app/
rake refinery:override presenter=refinery/pages/menu_presenter
It will generate app/presenters/refinery/pages/menu_presenter.rb change it to this:
require 'active_support/core_ext/string'
require 'active_support/configurable'
require 'action_view/helpers/tag_helper'
require 'action_view/helpers/url_helper'
module Refinery
module Pages
class MenuPresenter
include ActionView::Helpers::TagHelper
include ActionView::Helpers::UrlHelper
include ActiveSupport::Configurable
config_accessor :roots, :menu_tag, :list_tag, :list_item_tag, :css, :dom_id,
:max_depth, :selected_css, :first_css, :last_css, :list_first_css,
:list_dropdown_css, :list_item_dropdown_css,
:list_item__css, :link_dropdown_options, :carret
self.dom_id = :div
self.css = ["nav-collapse", "collapse", "navbar-responsive-collapse"]
self.menu_tag = :nav
self.list_tag = :ul
self.list_first_css = :nav
self.carret = '<b class="caret"></b>'
self.list_dropdown_css = "dropdown-menu"
self.link_dropdown_options = {class: "toggle-dropdown", data: {:toggle=>"dropdown"}}
self.list_item_tag = :li
self.list_item_dropdown_css = :dropdown
self.list_item__css = nil
self.selected_css = :active
self.first_css = :first
self.last_css = :last
def roots
config.roots.presence || collection.roots
end
attr_accessor :context, :collection
delegate :output_buffer, :output_buffer=, :to => :context
def initialize(collection, context)
#collection = collection
#context = context
end
def to_html
render_menu(roots) if roots.present?
end
private
def render_menu(items)
content_tag(menu_tag, :id => dom_id, :class => css) do
render_menu_items(items)
end
end
def render_menu_items(menu_items)
if menu_items.present?
content_tag(list_tag, :class => menu_items_css(menu_items)) do
menu_items.each_with_index.inject(ActiveSupport::SafeBuffer.new) do |buffer, (item, index)|
buffer << render_menu_item(item, index)
end
end
end
end
def render_menu_item(menu_item, index)
content_tag(list_item_tag, :class => menu_item_css(menu_item, index)) do
#cont = context.refinery.url_for(menu_item.url)
buffer = ActiveSupport::SafeBuffer.new
if check_for_dropdown_item(menu_item)
buffer << link_to((menu_item.title+carret).html_safe, "#", link_dropdown_options)
else
buffer << link_to(menu_item.title, context.refinery.url_for(menu_item.url))
end
buffer << render_menu_items(menu_item_children(menu_item))
buffer
end
end
def check_for_dropdown_item(menu_item)
(menu_item!=roots.first)&&(menu_item_children(menu_item).count > 0)
end
# Determines whether any item underneath the supplied item is the current item according to rails.
# Just calls selected_item? for each descendant of the supplied item
# unless it first quickly determines that there are no descendants.
def descendant_item_selected?(item)
item.has_children? && item.descendants.any?(&method(:selected_item?))
end
def selected_item_or_descendant_item_selected?(item)
selected_item?(item) || descendant_item_selected?(item)
end
# Determine whether the supplied item is the currently open item according to Refinery.
def selected_item?(item)
path = context.request.path
path = path.force_encoding('utf-8') if path.respond_to?(:force_encoding)
# Ensure we match the path without the locale, if present.
if %r{^/#{::I18n.locale}/} === path
path = path.split(%r{^/#{::I18n.locale}}).last.presence || "/"
end
# First try to match against a "menu match" value, if available.
return true if item.try(:menu_match).present? && path =~ Regexp.new(item.menu_match)
# Find the first url that is a string.
url = [item.url]
url << ['', item.url[:path]].compact.flatten.join('/') if item.url.respond_to?(:keys)
url = url.last.match(%r{^/#{::I18n.locale.to_s}(/.*)}) ? $1 : url.detect{|u| u.is_a?(String)}
# Now use all possible vectors to try to find a valid match
[path, URI.decode(path)].include?(url) || path == "/#{item.original_id}"
end
def menu_items_css(menu_items)
css = []
css << list_first_css if (roots == menu_items)
css << list_dropdown_css if (roots != menu_items)
css.reject(&:blank?).presence
end
def menu_item_css(menu_item, index)
css = []
css << list_item_dropdown_css if (check_for_dropdown_item(menu_item))
css << selected_css if selected_item_or_descendant_item_selected?(menu_item)
css << first_css if index == 0
css << last_css if index == menu_item.shown_siblings.length
css.reject(&:blank?).presence
end
def menu_item_children(menu_item)
within_max_depth?(menu_item) ? menu_item.children : []
end
def within_max_depth?(menu_item)
!max_depth || menu_item.depth < max_depth
end
end
end
end
almost done. add menu_header.to_html to your menu inside container of your menu like this:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#"><%=Refinery::Core::site_name %></a>
<%= menu_header.to_html %>
</div>
</div>
</div>
PS: RefineryCMS 2.1.0
Refinery 2.1.0 with Bootstrap 3
None of the solutions above worked for me. So I had to adapt from Valentine Konov's answer. Below you can find all of my files. You can always leave me a comment if you need any help. Here we go!
1) Check your RefineryCMS and Bootstrap versions
Gemfile
gem 'bootstrap-sass', '~> 3.1.1'
gem 'refinerycms', '~> 2.1.0'
2) Save a few lines of code
a. You actually have no need to create an app/decorators/models/refinery/page_decorator.rb file.
b. You can forget the menu_header method as well. This way, you'll have:
app/helpers/application_helper.rb
module ApplicationHelper
end
3) Now let's get to the real work
a. Override your default header with:
$ rake refinery:override view=refinery/_header.html
And change its code to:
app/views/refinery/_header.html.erb
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><%=Refinery::Core::site_name %></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<%= Refinery::Pages::MenuPresenter.new(refinery_menu_pages, self).to_html %>
</div>
</div>
</nav>
b. Now go to terminal and run rake refinery:override presenter=refinery/pages/menu_presenter. It will generate a menu_presenter.rb file. Change it to this:
app/presenters/refinery/pages/menu_presenter.rb
require 'active_support/core_ext/string'
require 'active_support/configurable'
require 'action_view/helpers/tag_helper'
require 'action_view/helpers/url_helper'
module Refinery
module Pages
class MenuPresenter
include ActionView::Helpers::TagHelper
include ActionView::Helpers::UrlHelper
include ActiveSupport::Configurable
config_accessor :roots, :menu_tag, :list_tag, :list_item_tag, :css, :dom_id,
:max_depth, :selected_css, :first_css, :last_css, :list_first_css,
:list_dropdown_css, :list_item_dropdown_css,
:list_item__css, :link_dropdown_options, :carret
# self.dom_id = nil
# self.css = "pull-left"
self.menu_tag = :section
self.list_tag = :ul
self.list_first_css = ["nav", "navbar-nav", "navbar-right"]
self.carret = '<b class="caret"></b>'
self.list_dropdown_css = "dropdown-menu"
self.link_dropdown_options = {class: "dropdown-toggle", data: {:toggle=>"dropdown"}}
self.list_item_tag = :li
self.list_item_dropdown_css = :dropdown
self.list_item__css = nil
self.selected_css = :active
self.first_css = :first
self.last_css = :last
def roots
config.roots.presence || collection.roots
end
attr_accessor :context, :collection
delegate :output_buffer, :output_buffer=, :to => :context
def initialize(collection, context)
#collection = collection
#context = context
end
def to_html
render_menu(roots) if roots.present?
end
private
def render_menu(items)
content_tag(menu_tag, :id => dom_id, :class => css) do
render_menu_items(items)
end
end
def render_menu_items(menu_items)
if menu_items.present?
content_tag(list_tag, :class => menu_items_css(menu_items)) do
menu_items.each_with_index.inject(ActiveSupport::SafeBuffer.new) do |buffer, (item, index)|
buffer << render_menu_item(item, index)
end
end
end
end
def render_menu_item(menu_item, index)
content_tag(list_item_tag, :class => menu_item_css(menu_item, index)) do
#cont = context.refinery.url_for(menu_item.url)
buffer = ActiveSupport::SafeBuffer.new
if check_for_dropdown_item(menu_item)
buffer << link_to((menu_item.title+carret).html_safe, "#", link_dropdown_options)
else
buffer << link_to(menu_item.title, context.refinery.url_for(menu_item.url))
end
buffer << render_menu_items(menu_item_children(menu_item))
buffer
end
end
def check_for_dropdown_item(menu_item)
(menu_item!=roots.first)&&(menu_item_children(menu_item).count > 0)
end
# Determines whether any item underneath the supplied item is the current item according to rails.
# Just calls selected_item? for each descendant of the supplied item
# unless it first quickly determines that there are no descendants.
def descendant_item_selected?(item)
item.has_children? && item.descendants.any?(&method(:selected_item?))
end
def selected_item_or_descendant_item_selected?(item)
selected_item?(item) || descendant_item_selected?(item)
end
# Determine whether the supplied item is the currently open item according to Refinery.
def selected_item?(item)
path = context.request.path
path = path.force_encoding('utf-8') if path.respond_to?(:force_encoding)
# Ensure we match the path without the locale, if present.
if %r{^/#{::I18n.locale}/} === path
path = path.split(%r{^/#{::I18n.locale}}).last.presence || "/"
end
# First try to match against a "menu match" value, if available.
return true if item.try(:menu_match).present? && path =~ Regexp.new(item.menu_match)
# Find the first url that is a string.
url = [item.url]
url << ['', item.url[:path]].compact.flatten.join('/') if item.url.respond_to?(:keys)
url = url.last.match(%r{^/#{::I18n.locale.to_s}(/.*)}) ? $1 : url.detect{|u| u.is_a?(String)}
# Now use all possible vectors to try to find a valid match
[path, URI.decode(path)].include?(url) || path == "/#{item.original_id}"
end
def menu_items_css(menu_items)
css = []
css << list_first_css if (roots == menu_items)
css << list_dropdown_css if (roots != menu_items)
css.reject(&:blank?).presence
end
def menu_item_css(menu_item, index)
css = []
css << list_item_dropdown_css if (check_for_dropdown_item(menu_item))
css << selected_css if selected_item_or_descendant_item_selected?(menu_item)
css << first_css if index == 0
css << last_css if index == menu_item.shown_siblings.length
css.reject(&:blank?).presence
end
def menu_item_children(menu_item)
within_max_depth?(menu_item) ? menu_item.children : []
end
def within_max_depth?(menu_item)
!max_depth || menu_item.depth < max_depth
end
end
end
end
c. Restart your server and see the results. If you already have some pages created, your navbar should look similar to the one below:
Try this _menu_branch.html.erb
<% if ( (children = menu_branch.children unless hide_children).present? &&
(!local_assigns[:menu_levels] || menu_branch.ancestors.length < local_assigns[:menu_levels]) ) -%>
<%
if !!local_assigns[:apply_css] and (classes = menu_branch_css(local_assigns)).any?
css = "class='#{classes.join(' ')} dropdown'".html_safe
end
-%>
<li<%= ['', css].compact.join(' ').gsub(/\ *$/, '').html_safe %>>
<%= link_to("#{menu_branch.title} <b class='caret'></b>".html_safe, refinery.url_for(menu_branch.url), :class=>"dropdown-toggle", 'data-toggle'=>'dropdown') -%>
<ul class='dropdown-menu'>
<%= render :partial => '/refinery/menu_branch', :collection => children,
:locals => {
:apply_css => local_assigns[:apply_css],
:hide_children => !!hide_children,
:menu_levels => local_assigns[:menu_levels]
} -%>
</ul>
</li>
<% else -%>
<%
if !!local_assigns[:apply_css] and (classes = menu_branch_css(local_assigns)).any?
css = "class='#{classes.join(' ')}'".html_safe
end
-%>
<li<%= ['', css].compact.join(' ').gsub(/\ *$/, '').html_safe %>>
<%= link_to(menu_branch.title, refinery.url_for(menu_branch.url)) -%>
</li>
<% end -%>
_menu.html.erb
<%
# Collect the root items.
# ::Refinery::Menu is smart enough to remember all of the items in the original collection.
if (roots = local_assigns[:roots] || (collection ||= refinery_menu_pages).roots).present?
dom_id ||= 'menu'
css = [(css || 'menu clearfix')].flatten.join(' ')
hide_children = Refinery::Core.menu_hide_children if hide_children.nil?
-%>
<div id="main-menu" class="nav-collapse">
<nav id='<%= dom_id %>' class='<%= css %>'>
<ul id="main-menu-left" class="nav">
<%= render :partial => '/refinery/menu_branch', :collection => roots,
:locals => {
:hide_children => hide_children,
:sibling_count => (roots.length - 1),
:menu_levels => local_assigns[:menu_levels],
:apply_css => true #if you don't care about class='first' class='last' or class='selected' set apply_css to false for speed.
} -%>
</ul>
</nav>
</div>
<% end -%>
and _header.html.erb
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<%= link_to Refinery::Core.site_name, refinery.root_path, :class => "brand" %>
<%= render(:partial => "/refinery/menu", :locals => {
:dom_id => 'menu',
:css => 'menu'
}) %>
</div>
</div>
</div>
</div>
The approach outlined by user1852788 worked for me. If you are using a menu with drop downs don't forget to load the bootstrap js in your application.js manifest file:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
And then call the dropdown function (I have a file called layout.js.coffee):
$('.dropdown-toggle').dropdown()
This Gist worked great for me for the latest of Refinery and Bootstrap https://gist.github.com/npflood/2d3f5fc44518ef231195
There is a gem that tries to solve this problem.
https://github.com/ghoppe/refinerycms-bootstrap
But I've been having problems with it personally.
I found much easier way to do this for refinerycms 2-0-stable
my solution is the following:
first _menu.html.erb update css variable with bootstrap classes and add necessary html for example I added div to wrap ul
<%
# Collect the root items.
# ::Refinery::Menu is smart enough to remember all of the items in the original collection.
if (roots = local_assigns[:roots] || (collection ||= refinery_menu_pages).roots).present?
dom_id ||= 'menu'
css = [(css || 'pull-right')].flatten.join(' ')
hide_children = Refinery::Core.menu_hide_children if hide_children.nil?
-%>
<nav id='<%= dom_id %>' class='<%= css %>'>
<div class="collapse navbar-collapse">
<ul class="nav nav-pills navbar-nav">
<%= render :partial => '/refinery/menu_branch', :collection => roots,
:locals => {
:hide_children => hide_children,
:sibling_count => (roots.length - 1),
:menu_levels => local_assigns[:menu_levels],
:apply_css => true #if you don't care about class='first' class='last' or class='selected' set apply_css to false for speed.
} -%>
</ul>
</div>
</nav>
<% end -%>
second _menu_branch.html.erb update class with bootstrap classes
<%
if !!local_assigns[:apply_css] and (classes = menu_branch_css(local_assigns)).any?
css = "class='#{classes.join(' ')}'".html_safe
end
-%>
<% if ( (children = menu_branch.children unless hide_children).present? &&
(!local_assigns[:menu_levels] || menu_branch.ancestors.length < local_assigns[:menu_levels]) ) -%>
<li class="dropdown">
<%= menu_branch.title %><b class="caret"></b>
<ul class='dropdown-menu'>
<%= render :partial => '/refinery/menu_branch', :collection => children,
:locals => {
:apply_css => local_assigns[:apply_css],
:hide_children => !!hide_children,
:menu_levels => local_assigns[:menu_levels]
} -%>
</ul>
<% else -%>
<li<%= ['', css].compact.join(' ').gsub(/\ *$/, '').html_safe %>>
<%= link_to(menu_branch.title, refinery.url_for(menu_branch.url)) -%>
<% end -%>
</li>
now your menu should display fine. To enable Active you just need to update /config/initializers/refinery/core.rb file by changing the following code:
change selected, to active
# CSS class selectors for menu helper
config.menu_css = {:selected=>"active", :first=>"first", :last=>"last"}

How to insert <br> after label tag in simple_form?

Using simple_form, I have a simple input like this:
<%= f.input :email %>
This generates (removed irrelevant parts):
...
<label>Email</label>
<input .... />
...
I want the input control to come below the label, so I need a <br/> after </label>:
...
<label>Email</label>
<br/>
<input .... />
...
How do I do the above?
I tried:
inserting a <br/> in config/initializers/simple_form.rb:
config.label_text = lambda { |label, required| "#{required} #{label} <br/>" }
And this generates:
...
<label>Email<br/></label> #note the location of <br/>
<input .... />
...
The <br/> is just before the </label>. Now, this works in terms of showing the input on the next "line", but it just feels "wrong".
Is there some way to do this properly?
It's usually better to do this with stylesheet rules than by inserting HTML tags, since the break is a matter of formatting rather than of content. It could be something as simple as...
label {
display: block;
}
Totally agree you should use css to do this as Steve described. But if you really want to, you can still do this by using rails' default form helper like so:
<%= f.label :email %>
<br>
<%= f.text_field :email %>