I'm using "Button dropdowns" from Twitter Bootstrap with HAML. In the Bootstrap docs I have found the example:
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
</ul>
</div>
I have tried rewrite it using HAML:
%div{:class => 'btn-group task_controller'}
%a{:class => 'btn-mini dropdown-toggle', "data-toggle" => 'dropdown', :href => '#'} Action
%span{:class => 'caret'}
%ul{:class => 'dropdown-menu'}
%a{:class => 'close_task', :name => task.name, :href => '#' } Close
But got the error message:
Haml::SyntaxError - Illegal nesting: content can't be both given on the same line as %a and nested within it.
So Bootstrap said me put the element inside -tag, but HAML didn't allow to do it. How can I fix the problem?
The problem is in these lines:
%a{:class => 'btn-mini dropdown-toggle', "data-toggle" => 'dropdown', :href => '#'} Action
%span{:class => 'caret'}
The error message: content can't be both given on the same line as %a and nested within it refers to Action which is content “on the same line as %a”, and %span{:class => 'caret'}, which is content “nested within it”.
More generally, and perhaps easier to see, you can’t have something like this:
%tag Some content here
And something here as well
The fix is to nest both under the %a:
%a{:class => 'btn-mini dropdown-toggle', "data-toggle" => 'dropdown', :href => '#'}
Action
%span{:class => 'caret'}
This gives the desired output:
<a class='btn-mini dropdown-toggle' data-toggle='dropdown' href='#'>
Action
<span class='caret'></span>
</a>
Don't forget your Haml idioms!
#div{:class => 'btn-group task_controller'}
is equivalent to:
.btn-group.task_controller
…etc.
Try this:
%div{:class => 'btn-group task_controller'}
%a{:class => 'btn-mini dropdown-toggle', "data-toggle" => 'dropdown', :href => '#'}
Action
%span{:class => 'caret'}
%ul{:class => 'dropdown-menu'}
%a{:class => 'close_task', :name => task.name, :href => '#' } Close
Tag name and content can be on the same line only when there are no more content lines in the tag.
Related
I'm using the wordpress v2 api to display custom posttypes. Everything works as expected, only the custom taxonomy returns their ID instead of the name.
I've read that adding ?embed to the endpoint and show_in_rest adds posttypes and taxonomies to the api result and this sort of looks to be the case. But the taxonomy name isn't found in the result.
Am I missing something?
Here are some snippets of my code...
// taxonomy snippet
register_taxonomy('types',array('work'), array(
'hierarchical' => true,
'labels' => $labels,
'show_ui' => true,
'show_admin_column' => true,
'query_var' => true,
'rewrite' => array( 'slug' => 'type' ),
'show_in_rest' => true,
'rest_base' => 'work-api',
'rest_controller_class' => 'WP_REST_Terms_Controller'
// custom posttype snippet
$args = array(
'labels' => $labels,
'description' => 'All projects',
'public' => true,
'menu_icon' => 'dashicons-layout',
'supports' => array('title', 'editor', 'thumbnail'),
'has_archive' => true,
'show_in_rest' => true,
'rest_base' => 'work-api',
'rest_controller_class' => 'WP_REST_Posts_Controller'
);
// DOM snippet
<div id="workfeed" class="work" style="margin-top: 100px;">
<div v-for="(item,index) in work" class="row" :data-index="index">
<div class="col">
<img :src="item._embedded['wp:featuredmedia'][0].source_url" />
</div>
<div class="col">
<h3>{{ item.title.rendered }}</h3>
{{ item.content.rendered }}
{{ item._embedded['wp:term'][0].taxonomy }}
</div>
</div>
</div>
I'm using SimpleForm + Bootstrap. How can I add an attribute to all type="text" inputs with class = span12?
Something that outputs something like this:
<div class="controls"><input autofocus="autofocus" class="string required span12" id="user_first_name" name="user[first_name]" required="required" size="50" type="text" value=""></div>
I tried playing with config.wrappers but this
ba.use :input, :wrap_with => { :class => 'span12' }
doesn't work. It adds to wrapper instead of modifying the input tag. Any thoughts?
SimpleForm.setup do |config|
config.wrappers :bootstrap, :tag => 'div', :class => 'control-group', :error_class => 'error' do |b|
b.use :html5
b.use :placeholder
b.use :label
b.wrapper :tag => 'div', :class => 'controls' do |ba|
ba.use :input
ba.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
ba.use :hint, :wrap_with => { :tag => 'p', :class => 'help-block' }
end
end
config.default_wrapper = :bootstrap
end
You can simply override the simple_form default for string input by adding a string_input.rb class file to your rails load path (i.e. app/inputs/string_input.rb) and include as follow:
class StringInput < SimpleForm::Inputs::StringInput
def input_html_classes
super.push('span12')
end
end
If you need to add more default classes to other types of input, you can check out the various input types provided:
https://github.com/plataformatec/simple_form/tree/master/lib/simple_form/inputs
I had a similar issue and after some research I found out that this is not supported using the wrapper api.
The best you can do is use the :defaults option in each form, instead of adding for every input.
https://github.com/plataformatec/simple_form/issues/754
You can achieve this like this: simple_form_for(#my_instance, defaults: { input_html: { class: 'span12' }})
You can also choose to use a custom formbuilder.
https://github.com/plataformatec/simple_form#custom-form-builder
i started learn HAML: and i can't translate flash block to HAML:
<% flash.each do |key, value| %>
<div class="alert alert-<%= key %>">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong><%= value %></strong>
</div>
<% end %>
Here you go:
= flash.each do |key, value|
.alert{ :class => "alert-#{key}" }
%button.close{ :data => { :dismiss => "alert" } } x
%strong
= value
Just FYI you can add attributes to any element by attaching them as a hash after the declaration. If you don't specify an element, just a class or ID, HAML makes that element a div with the given class or id. But you could do this many ways. For instance, these are all the same:
%div{:class => 'foo bar', :id => 'test' }
.foo{:class => 'bar', :id => 'test'}
#test.bar{:class => 'foo'}
#test.foo.bar
All output: <div class="foo bar" id="test"></div>
You need to put computed attributes in the hash though, i.e.:
- klass = "bar"
%div{ :class => klass }
Outputs: <div class="bar"></div>
Also, note that in all the examples above, the :attribute => 'value' can be expressed as attribute: 'value', e.g.:
%button.close{ data: { dismiss: 'alert' } } x
Hope that helps.
I want to do this:
<div id="element-wrapper-1">
<span class="element-wrapper-2">
<input name="element" />
</span>
</div>
Is it possible to do this using only addDecorator methods? I do not want to write my own decorator class or render method.
You do like this:
$element->setDecorators(array(
'Viewhelper',
array(
array('span' => 'HtmlTag'),
array('tag' => 'span', 'class' => 'element-wrapper-2')
),
array(
array('div' => 'HtmlTag'),
array('tag' => 'div', 'class' => 'element-wrapper-1'))
)
);
I have the following in my js.erb file:
$('#menu').after($("<%=escape_javascript(render 'boards/customize', :board => #board, :templates => #templates, :types => #types)%>")
So I try to pass some locals to my partial
In my _customize.html.erb
<div id="customize">
<ul id="categories">
<% #types.each do |type|%>
<li><%=link_to type.name, change_type_board_path(board, :type_id => type.id), :remote => true %></li>
<% end %>
</ul>
<div id='carousel'>
<%=render 'boards/carousel', :templates => templates %>
</div>
</div>
I get the following error:
undefined local variable or methodboard' for #<#:0x00000103893e48`>
How are you supposed to pass in these variables to partials in Rails?
In Rails 3:
render :partial => 'boards/customize',
:locals => { :board => #board , :templates => #templates, :types => #types }