After installing Bootstrap 3 to my rails app, the height of the text fields shrunk and some positioning went nuts. I haven't made any changes to my bootstrap files, other than manually adding the files to my vendors/stylesheets folder. I also looked at the doctype as I've seen others mentioning that could be the problem, but everything seems right with it. Does anyone has experienced this issue after adding bootstrap 3?
To install bootstrap 3 I followed this thread: Link
My application.html.erb had the <!DOCTYPE html>
Here is how my app looks with Bootstrap 3:
And here is how it should look (with the previous version of bootstrap):
Note that I can trigger this by adding\removing *= require bootstrap
from my application.css.scss file.
Can anyone help me?
When you migrate from Bootstrap 2 to 3, be sure to check all your formatting attributes. For text field height, <input type='text'> used to work, but now you need <input type='text' class='form-control'>.
For other readers of this answer, whenever you install Bootstrap, make sure that you add the appropriate class attributes to the HTML tags in your views. Otherwise, it may look like things have shrunk. For example,
Welcome, visitor! What is your name?
<%= text_field_tag 'name' >
should become
Welcome, visitor! What is your name?
<%= text_field_tag 'name', nil, class: 'form-control' >
Note that in Rails, you can specify the class of form elements using the form helpers by passing class: 'your-class-here'
Bootstrap works by setting class attributes everywhere. See the following documentation:
http://getbootstrap.com/css (Bootstrap documentation)
http://getbootstrap.com/css/#forms-control-sizes (resizing text fields)
Related
I am trying to prefix bootstrap classes like (card, row, bt-button...) to (my-card,my-row,my-button...). The problem is, I am only allowed to use a plain html/css file.
instead of this
<div class="row"> ... </div>
to this
<div class ="my-row">...</div>
I did some research, but mostly I need npm install or using scss, but not inside html file. Does anyone know a solution for this problem?
I have a div that has a dynamic background image. The background image url is logged in a database. I'd also like to replace this image with a dynamic GIF (which is logged in the same table) when the div is hovered over...but I'm struggling with figuring out a clean way to do this.
Here is a brief snippit from the html.erb file I'm working with...it seems that I cannot use the hover selector in in-line HTML, so I'm not sure if I need to resort to JavaScript? I'd essentially like to replace blah.jpg with blah.gifon:hover.
<% #workout[:image_url] = "blah.jpg" %>
<% #workout[:gif_url] = "blah.gif" %>
<div class="image-wrapper">
<div class="workout-image" style="background-image:url(<%= #workout[:image_url] %>)">
</div>
</div>
EDIT:
It works now using <script> tags.
<head>
<script>
document.head.insertAdjacentHTML('beforeend', '<style>.workout-image:hover { background-image:url("blah.gif");}</style>');
</script>
</head>
Unfortunately this can't be solved using raw CSS, as you can't target pseduo-selectors with inline CSS. However, it's possible to get around this using JavaScript. What you need to do is add the following to your page:
<script>
document.head.insertAdjacentHTML('beforeend', '<style>.workout-image:hover{background-image:url(<% #workout[:gif_url] %>);}</style>');
</script>
That should append CSS styling of .workout-image{background-image:url("blah.gif");} to the end of the head section.
Another solution would be to simply use an external css.erb file instead of a .css file, in order to process Ruby variables directly:
.workout-image:hover {
background-image:url(<% #workout[:gif_url] %>);
}
Be aware that using ERB in CSS will only work if the file is loaded ad-hoc, and will not work if you precompile your assets! You can get around this using the SCSS Rails Preprocessor, assuming you have access to, and want to use, SASS.
Hope this helps :)
Good afternoon everyone,
I'm using rails to build a web application (naturally) and I'm currently working on a form.
This form gets created by using the form_for rails helper.
The form_for helper also includes CSRF if it's enabled which it is.
My form output looks like this:
<form accept-charset="utf8" action="/some/path" class="some classes" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
<input name="authenticity_token" type="hidden" value="[csrf token]">
</div>
h3 My Epic Form title
</form>
Now in CSS I'm using :first-child selector quite frequently to remove top spacing on headings or just first-children of any container.
The SASS for this looks like so:
.some.classes h3:first-child
margin-top: 0
This works normally but obviously since the CSRF token is actually the :first-child it doesn't work in forms. I think it's an annoyance and would rather have this thing at the bottom (since :first-child is supported more widely than :last-child) so that I can use :first-child on the element that I want to be the first child.
I'm new to rails unfortunately and did look in the following sections to see if I could find anything on the subject:
Rails security guide CSRF
Googling 'Rails csrf first child in form'
While creating this question I looked through the similar posts.
Found nothing on the subject.
Now it's not a problem to fix this with a different selector but the question here is 'How can I put the CSRF token at the bottom of my form?'
(Yes - googling that also yielded no specific result)
I'd like to know this so that I can change the position of the CSRF tag.
If anyone could help with that (perhaps one with more xp with Rails than me) - it would be greatly appriciated.
In case anyone's interested in the actual CSS/SASS selector solution
.some.classes div[style]:first-child + h3
margin-top: 0
What it does is select a div which is the first-child if it has a style attribute. Since nobody uses inline styles as they are a bad practice (except for this kind of thing ofcourse) you can easily overcome this issue by using this selector.
The selector however reduces the flexibility of your CSS since you can't just do * :first-child (extreme example) but you'd have to do * div[style]:first-child + * as well which just seems plain useless to me.
Before I forget,
Thanks in advance for any feedback this question may get.
I have not worked yet with the Deface gem and have read Spree tutorial on Deface and skipped through the Spree/Deface explanation on Github.I cannot get the following issue working though:
In my Spree stable-2-1 with Rails 4 I have this element <li id="locale-select" data-hook="" style="float: right; margin-right: 10px;"> which is generated by the I18N gem and is available in the _main_nav_bar.html.erb on every page.
I want to add to this <li> element a class="dropdown-menu" element. The data-hook is empty. I have no idea how to accomplish this with Deface and am wondering if it is even possible.
I hope someone here can provide me more information on Deface and explain how to accomplish this task. (Maybe I am following the wrong path and should just find the element in the I18N and override it.)
Faced with the same problem, I read through https://github.com/spree/deface, and it appears once you select the proper element, you may use the :add_to_attributes action to insert HTML attributes.
I want Bootstrap styling to always supersede Rails native styling.
The example that's driving this is the following code:
link_to "Delete all CIDNE reports", :class => "btn btn-info"
Does not style the link in the button fashion you would expect from Bootstrap. It remains looking like an ordinary generic blue link. How do I ensure Bootstrap styles take precedence?
Styles are included in order which they're are listed in application.css(sass/scss etc) in your assets folder. By defaults the whole directory required using require_tree . Which means an alphabetical order.
And rails only provides you with styles when you do the scaffolding and it gives you scaffold.css. So if you're including file called bootstrap.css, it should go before that file.