I'm struggling with haml not injecting the content at the right place, here is part of the haml :
%div.form-group{:id => 'container'}
- if !#data.nil?
%p= t('users.data_name')
= link_to t('users.delete'), 'javascript:void(0)', :class => 'delete', :data => {:id => #data.id}
%div.holder.thick
= image_tag #data.path
- else
= link_to t('users.upload'), 'javascript:void(0)', :class => 'btn btn-large'
%div.holder
= image_tag '/assets/missing_image.png'
The problem is that the holder or holder thick are not inside my container but outside. Why is this? What am I not aligning properly?
Yes, the if should be indented if its content is meant to go into #container.
#container.form-group
- if !#data.nil?
%p= t('users.data_name')
= link_to t('users.delete'), 'javascript:void(0)', :class => 'delete', :data => {:id => #data.id}
.holder.thick
= image_tag #data.path
- else
= link_to t('users.upload'), 'javascript:void(0)', :class => 'btn btn-large'
.holder
= image_tag '/assets/missing_image.png'
if your container is %div.form-group then you have just to indent the rest so that haml understands it's inside that div that your content should go
so it'll look like that
%div.form-group{:id => 'container'}
- if !#data.nil?
%p= t('users.data_name')
= link_to t('users.delete'), 'javascript:void(0)', :class => 'delete', :data => {:id => #data.id}
%div.holder.thick
= image_tag #data.path
- else
= link_to t('users.upload'), 'javascript:void(0)', :class => 'btn btn-large'
%div.holder
= image_tag '/assets/missing_image.png'
Related
I am developing a rails application and i am having a drop down submit form as below,
#container
= form_tag({:controller => "r4d", :action=> "result" }, remote: true, method: :get) do
= label_tag(:q, "Trip Type: ")
= select_tag(:q, options_for_select(r4d_options, "r4d_002"), class: "form-control")
= submit_tag("Get Trip Details", :id => "submit", :class => "btn btn-sm btn-default")
The problem here is, the drop down label appears in an line followed by drop down and submit button in an another line. How can i make this appear in same line. I am using bootstrap scss.
Thanks for your help.
Based on the below answer, i have changed the code to
= form_tag({:controller => "r4d", :action => "result", :class => "form-inline"}, remote: true, method: :get) do
.row
.col-sm-12
.col-sm-4
= label_tag(:q, "Trip Type: ")
.col-sm-4
= select_tag(:q, options_for_select(r4d_options), class: "form-control")
.col-sm-4
= submit_tag("Get Trip Details", :id => "submit", :class => "btn btn-sm btn-default")
but there are too much spacing between the form elements and it doesn't looks good.
If you are using haml please try below format for set content in one row
.row
.col-sm-12
.col-sm-6
= label_tag(:q, "Trip Type: ")
= select_tag(:q, options_for_select(r4d_options, "r4d_002"), class: "form-control")
.col-sm-6
= submit_tag("Get Trip Details", :id => "submit", :class => "btn btn-sm btn-default")
I have a prombem when my haml parse this code:
-if link.user == current_user
%div{:class => "links-group d-inline"}
= link_to "edit", edit_link_path(link) do
= octicon("pencil", :height => 16, :class => "d-inline mt-1")
= link_to 'destroy', link, method: :delete, data: { confirm: 'Are you sure?' }
undefined method `stringify_keys' for "/links/1183/edit":String
When i delete this line = octicon("pencil", :height => 16, :class => "d-inline mt-1") all works is good.
How fix this problem?
If you pass a block to link_to then you need to not pass it a label to display as well.
eg
= link_to edit_link_path(link) do
= octicon("pencil", :height => 16, :class => "d-inline mt-1")
OR
= link_to "edit", edit_link_path(link)
but not a combination of both... :)
Here is the API doc for link_to which gives better examples:
http://apidock.com/rails/ActionView/Helpers/UrlHelper/link_to
Also you can take a look like below -
link_to(options = {}, html_options = {}) do
# name
end
OR
link_to(url, html_options = {}) do
# name
end
This is what I want:
class = "navbar-toggle" data-toggle = "collapse" data-target = ".navMenuCollapse"
This is what I got:
class="\"navbar-toggle\" data-toggle = \"collapse\" data-target = \".navMenuCollapse\""
This is what I tried:
<%= link_to 'test', welcome_index_path, {:class => '\"navbar-toggle\" data-toggle = \"collapse\" data-target = \".navMenuCollapse\"'} %>
Is there any opportunity to get quotes in the class-tag ?
Thanks for help.
Try the below code:
<%= link_to 'test', welcome_index_path, class: 'navbar-toggle', data: {toggle: 'collapse', target: '.navMenuCollapse'} %>
This should work:
<%= link_to 'test', welcome_index_path, :class => 'navbar-toggle', :'data-toggle' => 'collapse', :'data-target' => '.navMenuCollapse' %>
I need to change the color of my div button when the the user is logged in.
Once the user is logged in i want him seeing the "Download button" in red, like the "play now" button in the img.
This is the code now:
#play_buttons
#instant_play.play_button
%p
= "#{t :"asiaplus.download_client"}"
.button
= "#{t :"asianplus.download_now"}"
#play_now.play_button
%p
%span.highlight
= "#{t :"asiaplus.web_based"}"
= "#{t :"asiaplus.live_dealer"}"
%a{:href => "#{live_casino_ho_lobby_asia_path(:tab => current_tab, :locale => current_locale)}", :class => "button", :title => "#{t :'asiaplus.play_now'}", :id => "ho_roulette"}
= "#{t :"asiaplus.play_now"}"
.button is the class for the button "Download now" on the left and :id => "ho_roulette" gives the style for the "Play now" button on the right.
Ok this is my solution to achieve the Download now button style like the Play Now button when the user is logged in:
#play_buttons
- if logged_in
#instant_play.play_button
%p
= "#{t :"asiaplus.download_client"}"
.button
= "#{t :"asianplus.download_now" :id => "ho_roulette"}"
#play_now.play_button
%p
%span.highlight
= "#{t :"asiaplus.web_based"}"
= "#{t :"asiaplus.live_dealer"}"
%a{:href => "#{live_casino_ho_lobby_asia_path(:tab => current_tab, :locale => current_locale)}", :class => "button", :title => "#{t :'asiaplus.play_now'}", :id => "ho_roulette"}
= "#{t :"asiaplus.play_now"}"
- else
#instant_play.play_button
%p
= "#{t :"asiaplus.download_client"}"
.button
= "#{t :"asianplus.download_now"}"
#play_now.play_button
%p
%span.highlight
= "#{t :"asiaplus.web_based"}"
= "#{t :"asiaplus.live_dealer"}"
%a{:href => "#{live_casino_ho_lobby_asia_path(:tab => current_tab, :locale => current_locale)}", :class => "button", :title => "#{t :'asiaplus.play_now'}", :id => "ho_roulette"}
= "#{t :"asiaplus.play_now"}"
Basically i have used conditional statements adding :id => "ho_roulette" to my div button when the user is logged in.
Is this solution correct? i thought also i can use the status class active as other solution, but i did not want to touch my SASS file.
There are two things I would revise about your solution:
HTML id tags should be unique, so you shouldn't have two different elements with the same ID. You definitely want to use class instead.
You're repeating a whole lot of code here. It would be much better to use the conditional inside of your tag, and take advantage of the fact that HAML ignores keys with nil values:
play_buttons
#instant_play.play_button
%p
= t :"asiaplus.download_client"
.button
= t :"asianplus.download_now", :class => ("active" if logged_in)
#play_now.play_button
%p
%span.highlight
= t :"asiaplus.web_based"
= t :"asiaplus.live_dealer"
= link_to t("asiaplus.play_now"), live_casino_ho_lobby_asia_path(:tab => current_tab, :locale => current_locale), :class => ["button", ("active" if logged_in)], :title => t('asiaplus.play_now'), :id => "ho_roulette"}
Your solution is good. Conditional CSS is the easiest solution.
You should dry it up though. Instead of having the whole thing in the if/else statement, simply do it for your id:
#instant_play.play_button
%p
= t(:"asiaplus.download_client")
.button
= t(:"asianplus.download_now"), :id => ('ho_roulette' if logged_in)
#play_now.play_button
%p
%span.highlight
= t(:"asiaplus.web_based")
= t(:"asiaplus.live_dealer")
%a{:href => live_casino_ho_lobby_asia_path(:tab => current_tab, :locale => current_locale), :class => "button", :title => t(:'asiaplus.play_now'), :id => "ho_roulette"}
= t(:"asiaplus.play_now")
To consider:
You should follow #apneadiving's advice to reformat your t().
#charleyc is 100% right with regards to having id unique. Consider using his solution and changing your SASS file... and your approach to your use of id tags to define CSS rules. States (like 'active' or 'ho_roulette') should always be CSS classes.
We use Ruby (1.9.2) Rails (2.3).
I'm trying to set pre-selection for radio buttons...
- form_for #user, :url => plan_user_url, :html => { :method => 'put', :class => 'form' } do |f|
- #plans.each do |p|
%span
%p= p[:blurb]
%p= p[:price]
- p[:features].each do |f|
%p= f
= f.radio_button {:id => p[:id], :checked => #user[:plan_id]==p[:id] || nil}
= f.label :plan_name, p[:name]
%p
%br
.spacer
.field.first
= f.submit 'Update', :class => 'button ok'
.field
= link_to 'Cancel', redirect_back_url || root_url, :class => 'button cancel'
HAML doesn't like this line:
= f.radio_button {:id => p[:id], :checked => #user[:plan_id]==p[:id] || nil}
Any help is appreciated.
This is invalid Ruby code:
= f.radio_button {:id => p[:id], :checked => #user[:plan_id]==p[:id] || nil}
You're attempting to call the radio_button method and Ruby thinks you're passing it a block, but really you're passing it a Hash. This is better:
= f.radio_button :id => p[:id], :checked => #user[:plan_id]==p[:id] || nil
That removes the ambiguity between Proc and Hash, but it's still weird. Why do you want the || nil? I think it's unnecessary:
= f.radio_button :id => p[:id], :checked => #user[:plan_id] == p[:id]
Thanks for the hints from Brian. It turns out
f.radio_button :plan_id, p[:id]
works for pre-select.