I have a rails app with bootstrap 3, and the menu is not collapsing. Also when I resize sometimes the three bars show up for the collapse menu but the normal menu items are still there just squeezed together next to it. Here is the haml thanks in advance.
%nav.navbar.navbar-inverse{role: 'navigation' }
%div.container-fluid
%div.navbar-header
%button.navbar-toggle{type: 'button', 'data-toggle' => 'collapse', id: 'menu-toggler', 'data-target' => '.navbar-collapse'}
%span.icon-bar
%span.icon-bar
%span.icon-bar
= link_to (image_tag 'logo.png', class: 'logo'), root_path, class: 'navbar-brand', 'data-no-turbolink' => true
%div.collapse.navbar-collapse
%ul.nav.navbar-nav.navbar-right
%li.active= link_to '<i class="icon-dashboard"></i> Dashboard'.html_safe, root_path, 'data-no-turbolink' => true
%li= link_to '<i class="icon-signout"></i> Logout'.html_safe, destroy_user_session_path, method: :delete
%li= link_to '<i class="icon-envelope"></i> Contact Us'.html_safe, new_contact_request_path
%li.dropdown
%a.dropdown-toggle{href: '#', 'data-toggle' => 'dropdown'}
%i.icon-gears
Profile
%b.caret
%ul.dropdown-menu
%li= link_to 'Manage email addresses', emails_path
%li= link_to 'Edit Account', edit_user_registration_path
%li= link_to 'Setup Wizard', setup_wizard_home_index_path
%li= link_to 'Cancel Account', cancel_account_home_index_path
Did you add //= require bootstrap to your javascript manifest?
After looking through the bootstrap docs I ended up doing this. To get the drop down toggle to work. Still not sure why some of the menu will remain at a certain size and the dropdown option will show up along side.
$('#nav-toggle').click(function(){
$('.collapse').collapse({ toggle: false })
});
Related
I'm trying to make a navigation bar with bootstrap on ruby on rails using haml. I am making the nav bar responsive, using the hamburger menu. When the browser is smaller than 1040px, I'd like to make all the icons larger. Is there a way to select all the icons, or do I have to manually select all of the icons?
Here is the code (application.html.haml):
%body
%header
%nav.navbar.navbar-fixed-top{role: "navigation"}
.mobile
%div.navbar-brand
%i.fa.fa-bars.bars{"data-target" => ".navbar-collapse", "data-toggle" => "collapse", type: "button"}
= link_to "Recipeazy", root_path, style: "color: #696969;"
.collapse.navbar-collapse.navbar-collapse
%ul.navbar-nav.navbar-right
.navbar-items
- if user_signed_in?
%li.nav-item
= link_to "Home", root_path
%i.fa.fa-home
%li.nav-item
= link_to "About", about_path
%i.fa.fa-info-circle
%li.nav-item
= link_to "Settings", edit_user_registration_path
%i.fa.fa-cog
%li.nav-item
= link_to "New", new_post_path
%i.fa.fa-plus-circle
%li.nav-item
= link_to "Sign Out", destroy_user_session_path, method: :delete
%i.fa.fa-sign-out
- else
%li.nav-item
= link_to "Log In", new_user_session_path
%i.fa.fa-sign-in
%li.nav-item
= link_to "Sign Up", new_user_registration_path
%i.fa.fa-user-plus
I figured out the answer.
Basically you just add the class of the size you want the icon to be. You can find the sizes here.
I have a rails 4 app with simple form and bootstrap.
I have checkbox elements in my form. I want to align the check box to be vertically aligned with the content in other fields. At the moment the check box is further left than the rest of the content in other fields.
For example:
<%= f.input :experiment, :as => :boolean, :label => false, inline_label: 'Do you want experiment logs or methods?' %>
Does anyone know how to make the vertical alignment uniform so that checkboxes are not out to the left of the rest of the form elements?
Thank you
To expand on the above,
I'd like the checkbox to be left aligned in line with the left edge of the other form elements. At the moment, it is further left (like there is some kind of negative margin on that check box element).
I'd like all three of these field inputs to be flush at the left alignment. At the moment, the check box in the two boolean elements is further left than the third text field:
<%= f.input :survey, :as => :boolean, :label => false, inline_label: 'Do you need survey responses?' %>
<br><br>
<%= f.input :survey_link, label: 'Where is your survey?', :label_html => { :class => 'question-data' }, placeholder: 'Include a link to your survey', :input_html => {:style=> 'width: 650px; margin-top: 20px', class: 'response-project'} %>
<br>
<%= f.input :experiment, :as => :boolean, :label => false, inline_label: 'Do you want experiment logs or methods?' %>
As doc suggested here http://montrezorro.github.io/bootstrap-checkbox/ You should have data-label in your input so change your input like this:
<%= f.input :experiment, :as => :boolean, :label => false, :input_html => { :'data-label' => 'Do you want experiment logs or methods?' } %>
If you want prepend then :
<%= f.input :experiment, :as => :boolean, :label => false, :input_html => { :'data-label-prepend' => 'Do you want experiment logs or methods?' } %>
I made a custom wrapper like this:
config.wrappers :inline_checkbox, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
b.use :html5
b.optional :readonly
b.wrapper tag: 'div', class: 'col-sm-10 col-sm-offset-2' do |ba|
ba.wrapper tag: 'div', class: 'checkbox' do |baa|
baa.use :input
end
#ba.use :input
ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' }
end
end
In my case I wanted a simple inline checkbox with the label to the right to place below another form element. You may need to play with the col-sm-10 col-sm-offset-2. This goes in your SimpleForm initializer (or make a separate one line I did to avoid breaking things in the original). Also you need to restart your app to see the changes take effect.
I am trying to get my nav-tabs styled and working properly. I believe I am not setting up the class="active" the correct way. It sets my first TAB/PAGE active by default, but when I click on either one of my other TABS/PAGES it still Highlights(background-color active) on my first TAB/Page.
How do I configure it to Highlight the active/clicked-on Tab?
This is what I have right now for my code:
<ul class="nav nav-tabs">
<li class="active"><%= link_to "Active Projects", projects_path %></li>
<li><%= link_to "Delinquent Projects", delinquent_projects_path %></li>
<li><%= link_to "Completed/Closed Projects", closed_projects_path %></li>
</ul>
Thanks
When rendering the navbar, you should check current path. If it's, say, "/users", then you highlight "Users" menu item and not others. If it's "/orders", you highlight "Orders". And so on.
Here's a little gem to do this work for you: active_link_to.
active_link_to 'Users', '/users'
# => Users
I think so you need to create a helper like
def active_link_to(text, link)
content_tag(:li, :class => request.fullpath == link ? 'active' : nil) do
link_to text, link
end
end
A simple solution is checking the controller param since every action would have the same active tab.
<li class=<%= params[:controller] == "users" ? "active": "" >
(I may have syntax errors since I'm getting rusty, specially with the quotes).
Every other solution listed here should work too.
GL & HF!
https://github.com/twg/active_link_to
gem 'active_link_to'
Then simplify your code to:
<ul class="nav nav-tabs">
<%= active_link_to "Active Projects", projects_path, :wrap_tag => :li %>
<%= active_link_to "Delinquent Projects", delinquent_projects_path, :wrap_tag => :li %>
<%= active_link_to "Completed/Closed Projects", closed_projects_path, :wrap_tag => :li %>
</ul>
Edit: Didn't notice answer above. At least here's an example :)
I'm working with a very large Ruby on Rails app, so I won't be able to include much of the source code. If I miss anything needed for the solution, please let me know, and I'll see if I can find it.
The part of the app I'm working on is the sign up page. We're using haml for the view, and bootstrap for styling. Here's the view code that's in a _form.html.haml partial:
= simple_form_for(resource, :as => resource_name,:class=>"", :url => registration_path(resource_name)) do |f|
.row-fluid
= f.input :email, :as => :string, :input_html => { :class => 'span12', :type => 'email', :required => 'required' }
.row-fluid
.span6
.input-append{ "data-role" => "acknowledge-input" }
= f.input :firstname, :as => :string, :label => 'First Name', :input_html => { :class => 'span12', :type => 'text', :required => 'required', :placeholder => "Letters Only Please" }
.span6
= f.input :lastname, :as => :string, :label => 'Last Name', :input_html => { :class => 'span12', :type => 'text', :required => 'required', :placeholder => "Letters Only Please" }
.row-fluid
.span6
= f.input :password, :as => :password, :input_html => { :class => 'span12', :type => 'password', :required => 'required' }
.span6
= f.input :password_confirmation, :as => :password, :input_html => { :class => 'span12', :type => 'password', :required => 'required' }
.row-fluid
.span7
%small
= link_to 'Already a Member?', new_user_session_path
.span5
= f.submit "Sign up", :class=>"btn btn-success btn-block"
I've got it set up (through bootstrap) so that it will outline each text box in red if the conditions for that particular variable are not met, and at the bottom of the page is a Sign Up button. The main problem we're having is that if you madly click on the Sign Up button, the system will happily create several copies of the user in the database. Ideally, the Sign Up button should disable itself after the first click (until the page is refreshed). I know there's a disabled option provided by Bootstrap, but I'm not sure how to trigger that only after the button has been clicked once.
As a corollary, I'd really like it if the button was actually disabled until all the front-end validation was done. But that's a bonus, not the main issue. ^_^
EDIT
As #rlecaro2 mentioned below I would really prefer something to happen when I click the button. As an initial attempt, I've added the following code:
- if submit_clicked?
= f.submit "Sign up", :class=>"btn btn-success btn-block", :disabled => 'disabled'
- else
= f.submit "Sign up", :class=>"btn btn-success btn-block", :onclick => "click_submit"
The two method are Ruby methods I've put in application_helper.rb:
def click_submit
#submit_clicked = true
end
def submit_clicked?
#submit_clicked
end
Unfortunately, this doesn't seem to work at all. I can click the button multiple times still. I suspect it has something to do with onclick wanting a JavaScript method. How do I have a separate Ruby method run when I click the button? It has to happen before the form is sent, because the whole point of this is that I only want the form to be sent once.
I'm guessing you use javascript for your front-end validations, in that case you could start up with the button disabled and enable it at the end of said validations.
Or better, don't display the button until you're ready to sign up, and make it disappear after clicked.
Both effects can be achieved using Jquery in a pretty straight-forward manner.
You should do this on the view's javascript file (under assets).
I'm out of time but check out this detailed
answer.
GL & HF.
The code below creates a form and styles the "submit" button according to some css ("button"). The problem is, when the page renders, it shows the normal rails submit tag button on top of the customized "button" css. How do I mute or disable the visual aspects of the rails submit tag button while still making it submit the form?
=form_tag new_site_url, :method => :get do
=text_field_tag :homepage,'', type: "text", class: 'text'
%button
=submit_tag "GO!"
Could you do this :
=form_tag new_site_url, :method => :get do
=text_field_tag :homepage,'', type: "text", class: 'text'
=submit_tag "GO!", class: 'button'
and set the css style for the button?
It better to do this :
=form_tag new_site_url, :method => :get do |f|
=f.text_field '', type: "text", class: 'text'
=f.submit "GO!", class: 'button'
Another way is (rails 4.1)
<%= submit_tag("Submit", :class => "btn btn-warning" ) %>
Here is where you go to find answers http://api.rubyonrails.org/
and if you are working in form_for you would do
<%= f.submit("Submit", class: "btn btn-default" ) %>
I'm using old school ruby(1.8.7) and rails(2.3.5)
heres what my submit tags look like for custom css styling :
<%= submit_tag("Edit", :style => "width:30px;") %>
where "Edit" is the text that appears on the button, and "width:30px;" is my styling. you can also cascade the stylings :
<%= submit_tag("Edit", :style => "width:30px;color:blue;") %>
You can add a style key to the hash
<p><%= submit_tag l(:button_apply), :class => 'btn btn-default btn-sm', :name => 'submit', :style => 'margin-left: 42px' %></p>