I have a rails 4 app.
I've been struggling for MONTHS to figure out how to incorporate a bootstrap theme. I thought using a design template might help me structure my content, but it is causing me a world of pain. I just can't figure out how to work with it.
Everything has been incorporated into the pipeline, but now I have instances of CSS that isn't in my code, being imposed.
For example, in my new user registration form, I have a submit button that has:
<div class="form-actions">
<%= f.button :submit, "Sign up", :class=>'btn btn-info' %>
</div>
The info button is blue. When I load the page, it shows with now background colour.
When I load localhost and inspect the element, I get this:
<input type="submit" name="commit" value="Sign up" class="btn btn-default btn btn-info">
The btn btn-default is not part of my code, but somehow it is being imposed.
Does anyone know how to solve this problem. I've torn my hair out for weeks trying to figure this out.
MORE INFO:
When I inspect the code, it shows the attributes of btn btn-info as struck out. I understand this to mean that a closer CSS tag has overridden that element, but the tag that inserts that CSS tag is the last in the list. How can there be anything closer? And if there is something, why doesn't it show in the inspector?
Are you using simple_form ? If so, take a look in your config/initializers/simple_form.rb (or simple_form_bootstrap.rb if you used the flag --bootstrap at the generation, which I think you did)
By default, Simple Form apply a specific wrapper (see documentation here to make your own).
If you just need this one button, either way, you have to specify it like so :
<%= f.input :username, input_html: { class: 'btn btn-info' } %>
You have the same helper for the generated label :
<%= f.input :username, label_html: { class: 'my_class' } %>
Now, for a button, apparently doing simply this should do the trick (according to the documentation):
<%= f.button :submit, "Custom Button Text", class: "btn btn-info" %>
Don't hesitate to have a look at the (well made) documentation here (once again, assuming you use Simple Form :-) )
Check simple_form_bootstrap.rb in your initializers and remove 'btn-default' class from
SimpleForm.setup do |config| config.button_class = 'btn btn-default'
Use e.g. your own style there - if you want it applied for all buttons. Alternatively, make this option an empty string and apply individual specific classes for each separate button:
<%= f.button :submit, class: "btn btn-specific" %>
The config value is added to button classes here
I don't see easy way to remove this class output for single specific control. Either remove it globally or override selectors for this style in your case.
See this - you can't individually remove btn-default class - need to remove it in general config file if you need
Related
I have two repositories for the same project (long story - I'm trying to learn well, so I wanted to do it again for good measure). In one project, there is a confirm message before deleting, and there's a glyphicon trashcan on the delete button as well. In the other (current) one, neither the confirm message nor the trashcan are working (but the song does indeed delete).
The main issue here is not the trashcan, but rather that data { confirm: ... } is not working.
In the working version, the code looks like this:
<td><%= button_to delete_song_path(song_id: song.id), data: { confirm: "Are you sure?" }, class: 'btn-mini btn-danger btn' do %>
<i class="glyphicon glyphicon-trash"></i>
<% end %></td>
In the other non-working version, the code looks like this:
<td><%= button_to destroy_user_song_path(#song), data: { confirm: "Aight, are you sure?" }, class: 'btn-mini btn-danger btn' do %>
<i class="glyphicon glyphicon-trash"></i>
<% end %></td>
For the trashcan, I did some "reverse elimination" of the working version, and found that although I have all the same bootstrap gems downloaded, the line of code that made the trashcan stay / go away was `#import "bootstrap-sprockets";' in application.css.scss. However, doing the same thing in the other project didn't work, so it must be the fact that in the working version, there are glyphicon files in the public-fonts file. If that's the culprit, I'll deal with that later once I have all the other base functionality down.
Thanks!
I'm going to go ahead and answer this since I got it to work: I'm not 100% sure on the exact cause of the problem, but what I do know is that I decided to simplify things and get rid of all bootstrap gems, instead opting to use a CDN file from netdna.bootstrap.com for bootstrap 3.3.7, and everything fixed itself.
So in sum, simple seems to be the best way to go for those like me who have little to no experience. As a side note, I also defined a helper file in the helper directory in order to define a variable for the bootstrap version. This way, in the future I can switch versions of bootstrap by simply replacing the variable with the correct version.
Doing a code search for "form-inputs" in the simple_form github repo indicates it's added as an HTML class in generated templates for ERB, slim, and erb. For example, in the HAML template file _form.html.haml:
= simple_form_for(#<%= singular_table_name %>) do |f|
= f.error_notification
.form-inputs
<%- attributes.each do |attribute| -%>
= f.<%= attribute.reference? ? :association : :input %> :<%= attribute.name %>
<%- end -%>
.form-actions
= f.button :submit
However, I can't see the HTML class being used within simple_form or elsewhere (such as Twitter Bootstrap). For example, I can't find any CSS files changing the styling of divs with the form-inputs class.
What is the purpose of the form-inputs class?
This was ostensibly added to "make it easier to integrate with bootstrap". It replaces a similar wrapper div with a different class. As you've pointed out, this is more relevant for form-actions than for form-inputs, so the latter is most likely just a convenient way to encapsulate all of the fields in a consistent way.
Is there an easy way to prepend a select box or dropdown box with input to a text field in rails? I am using Twitter bootstrap, and I am able to get the select box added in, but styling is not working so well. So far I have tried two things:
1.
<%= f.text_field :var, label: "Test Box", class: 'form-control',
placeholder: "Test Stuff", prepend: f.select(:options,
options_for_select(...) %>
This gets the overall bootstrap styling to the select box, but for some reason it is reading :options as a label, and I can't get it to assign anything to it.
2.
<%= f.text_field :var, label: "Test Box", class: 'form-control',
placeholder: "Test Stuff", prepend: f.select_without_bootstrap(:options,
options_for_select(...) %>
This gets the select box in there correctly, but it is not styled (hence the without_bootstrap and I am having a difficult time styling it.
So I am wondering if there is a better way to do this, or if this is even a possibility in general? I know I could also add it as a separate field entirely and just align it next to it, but I am trying to do it into the same field. Any help is appreciated!
What is the reason to do it via the prepend, and not in the template directly?
<%= f.select :options ...
<%= f.text_field :var ...
I have built a form in Grails. I have used the g:submitToRemote button which dynamically creates a Html <input> tag. I want to apply a dojo style to it like to all other elements in my form like this <g:submitToRemote dojoType="dijit.form.Button" /> but the style doen't get applied. Can you help me out to figure the problem?
<input onclick="createLoader(); dojoType="dijit.form.Button" try{//some Ajax calls};return false" type="button" value="Search">
There are several things you need to check:
Are you sure the button is being parsed? Look at the HTML source and validate whether or not the HTML code of the button is still the same as the code you provided. When Dojo parses the HTML code it will usually change the HTML code to something more complex. If you don't have that complex code, your widget is not picked up by Dojo.
Did you import the correct CSS file? You need to make sure you imported the correct CSS file, for example claro.css.
Does any of the parent elements have the theme class name? If you use the claro theme (for example), you need to make sure you have the classname claro somewhere, usually in your body-tag.
EDIT:
More things to check:
Do you have dijit/form/Button in your require()? Assuming you're using Dojo 1.6 (because you're using the old dojoType) the code you need is:
dojo.require("dijit.form.Button");
Is your button loaded asynchronous or not? If it is loaded async, your node will not be parsed when your page loads. This means you have to async it manually by wrapping your button in a <div> and manually parse that div, for example:
<div id="toParse">
<input onclick="createLoader(); dojoType="dijit.form.Button" try{//some Ajax calls};return false" type="button" value="Search">
</div>
And in JavaScript:
dojo.parser.parse("toParse");
I recently ran into this problem: Rails 3 link_to (:method => :delete) not working
In which I was confused why my link_to 'test', test_path(:test => test), :method => :post wasn't working (why it was GETting rather than POSTing). As the post above suggests, it was because I didn't have the Rails javascript files, which handles dynamically making the form on-the-fly for :post, :put & :delete.
I'm not sure I especially like relying on javascript to do this for me, as I'd like my app to be fully functional with javascript disabled; it's how I like to develop (so I know I've got all my Rails programming functionality works correctly), and when I do wire my app up with javascript, I don't have to worry about duplicating this functionality, since I usually wipe the stock javascripts file generated by Rails.
I read somewhere that, technically, hyperlinks (anchor elements) should only really be used for GET requests, and that buttons (as part of form elements) should be used for the other methods.
So, my two questions:
Is there a gem out there that will rewrite any link_to ... :method => in my view to a form element on-the-fly when my views are rendered?
If not, how would I hook into the view parser to write my own? (using HAML, preferrably)
Essentially, what I would like is to write this in my HAML file:
= link_to 'Test Link', some_path(:with => some_resource), :method => :post
... and have my rendered HTML output come out with this:
<form action="some_path?with=some_resource" method="post">
<!-- insert appropriate _method hidden field here -->
<!-- add appropriate csrf token and whatnot -->
<button type="submit">Test Link</button>
</form>
... so that all the link_to helpers with defined methods (thus, will not affect plain links whose verb is GET) will work without javascript?
I'd also appreciate any thoughts about the why part of this question, specifically why the Rails team decided to keep this functionality tied to javascript rather than doing this through pure HTML?
It seems that you really want a single element form (in this case, a button). If so, you want the button_to helper:
button_to 'Test Link', some_path(:with => some_resource), :method => :post
This will generate a form with an input[type=submit] element inside of it.
Without Javascript, you cannot have a hyperlink that will submit using a HTTP verb other than "GET."
If you need more style / control of the form being rendered by button_to, you can do something like this:
module LinksHelper
def link_form(text, destination, options = {})
form_tag(destination, :method => options.delete(:method)) do
<<-HTML
<!-- some HTML code here -->
<button type="submit">#{text}</button>
<!-- some more HTML code here -->
HTML
end
end
end