As shown in the image, my buttons are not inline with eachother and the cancel button is far bigger than it should be.
This is the code I'm currently using:
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<%= button_tag t('btn.save'), class: 'btn btn-brand-color', type: 'submit' %>
<%= link_to t('btn.cancel'), :back, class: 'btn btn-default' %>
</div>
</div>
What I want is to have the two buttons next to each other preferably by using already existing bootstrap classes.
As per comment - you have a link (a) declaration which is set to 100%.
tip -- might be easiest to use the browser inspector to find out which class and in which css file are overriding your intention.
For others in the future: If there is any doubt about whether a class is vanilla bootstrap, or something you've inadvertently overriding a class you hadn't intended to, you can view bootstrap's native behavior by inspecting the html row or element, right clicking - then click on Copy as HTML
In this questions example that output would be
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<button name="button" type="submit" class="btn btn-brand-color"><span class="translation_missing" title="translation missing: en.btn.save">Save</span></button>
<a class="btn btn-default" href="javascript:history.back()"><span class="translation_missing" title="translation missing: en.btn.cancel">Cancel</span></a>
</div>
</div>
Paste that into http://www.bootply.com/new and click Run -- it's a good indicator of style interference (also Bootply lets you change versions of bootstrap to match your own.
I never used ruby-on-rails before. But if you get this, maybe you should create a new CSS class and include display: inline-block on the button & make sure the button with are not set width: 100%.
Related
This may seem like a minor quibble, but why are the symbols #! appearing in my url after opening and closing my modals?
Here's what's in my script tags. The problem likely lies here.
<script>
$( document ).ready(function(){
$(".button-collapse").sideNav({menuWidth: 320, activationWidth: 70, edge: 'right', closeOnClick: true});
$('#modal2').modal();
$('#modal1').modal();
});
</script>
Edit: Added the modal link, which is a rails search form. Modal2 is essentially the same, but for a different resolution
<div id="modal1" class="modal hide-on-med-and-down">
<div class="modal-content">
<div class="center-align">
<h4>Looking for something?</h4>
<div class="search_form">
<%= form_tag search_posts_path, method: :get, id: "post-lookup-form" do %>
<div id="search_border" class="form-group">
<%= text_field_tag :post, params[:post], placeholder: " Search Posts", autofocus: true, id: "search_box" %>
</div>
<% end %>
<div>
<a id="cancel" href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
</div>
</div>
</div>
</div>
This briefly caused the hover effects on my side nav to stop working. I fixed it by manually entering the hover effect in my css, but I have a bad feeling that I really didn't address the main problem only the symptom and that this will bite me later on down the road.
I'm currently using the 0.100.2 version of materialize for this project. Let me know if you need more info or code.
It is because of this line
<a id="cancel" href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
Change the href to href='' value and it will not get placed into the url anymore.
My text is overflowing within a span element which has the class: form-control
Code:
<div class="row">
<div class="form-group col-sm-12">
<label>Notes:</label>
<span class="form-control"><%= #stuff.notes %></span>
</div>
</div>
And when #stuff.notes has a lot of text, it overflows like this:
I did look at this question, as well as this ticket within bootstrap. I am still having trouble coming up with a solution.
Update:
I realized I could use a form helper (even though it isn't a form) like this:
<div class="row">
<div class="form-group col-sm-12">
<label>Notes:</label>
<%= text_area_tag :notes, #complaint.notes, {class: "form-control", disabled: "disabled"} %>
</div>
</div>
Which renders it like this:
But I don't like how the disabled html attribute grays out the box and mutes the text. It makes it difficult for the user to read.
You could use a basic panel to get a similar feel. See Bootply Here
<label>Notes:</label>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
And if you really want to match the look of the form-control class, you could add a custom .inset-box-shadow class which would override the box shadow on the panel and give it that formy look. That may confuse users though, they may want to click and type in it.
I want to test the function to add an image to the application. How can I do this. attach_file method is not work. I don't know why.
html:
<form id="edit_user_5577b0c4a851ac600c000002" class="form-horizontal user-settings" method="post" enctype="multipart/form-data" action="/tardis54" accept-charset="UTF-8">
<div id="upload-avatar" class="control-group">
::before
<label class="control-label" for="user_avatar">
Setting avatar
</label>
<div class="controls">
<div class="form-fileupload">
<div class="image-preview">
<img class="gravatar img-circle" width="60" height="60" src="http://gravatar.com/avatar/7046a07b25397e4a0c838a47c88d8742?default=identicon&secure=false&size=60" data-retina-url="http://gravatar.com/avatar/7046a07b25397e4a0c838a47c88d8742?default=identicon&secure=false&size=120" alt="tardis54"></img>
</div>
<span class="btn btn-fileinput btn-default">
<span>
Choose file ...
</span>
<input id="user_avatar" class="input-file" type="file" name="user[avatar]"></input>
</span>
</div>
</div>
</div>
<div class="form-actions pull-right">
<input class="btn btn-large btn-primary" type="submit" value="Update" name="commit"></input>
</div>
</form>
test code:
scenario "upload a custom avatar" do
attach_file("user[avatar]", Rails.root + "temp4.png")
end
error log:
Failure/Error: attach_file("user[avatar]", Rails.root + "temp4.png")
Capybara::Webkit::ClickFailed:
Failed to click element /html/body/div[#id='content']/div/div/div/div/div/div[2]/form[#id='edit_user_5580e19da851ac6a51000002']/div[#id='upload-avatar']/div/div/span/input[#id='user_avatar']
because of overlapping element /html/body/div[#id='content']/div/div/div/div/div at position 740, 627;
It looks like you're using CSS to overlay another element on top of the HTML input. Some people do this because it's difficult to style HTML file inputs directly. However, doing so breaks capybara-webkit, because it needs to click on the actual HTML input field and the styled element is positioned on top of it.
This is being discussed in a GitHub issue.
You can work around it in the test by using execute_script to hide the overlay element, and then attempting to upload the file.
I find a way to solve this problem.
script = "$('#user_avatar').css({opacity: 100, display: 'block', position: 'relative', left: ''});"
page.execute_script(script)
I could assume that input[type=file] is not visible, thus you need initially make it visible f.e. execute javascript $("input[type=file]").show() and than attach file
Here's my implementation of #tardis answer (which itself is an implementation of #joe-ferris' suggestion). I put it as an answer to be able to use code formatting.
# spec/support/file_uploads.rb
module FileUploads
# Enables file uploads by capybara-webkit on pages that
# style file their input fields
def attach_file_styled_input(element_id, file)
page.execute_script("$('##{element_id}')" +
".css({opacity: 100, display: 'block', position: 'relative', left: ''});")
attach_file element_id, file
end
end
Don't forget to include this support module in spec/rails_helper.rb:
config.include FileUploads
Then use it in your feature spec like this (not spectacular):
attach_file_styled_input 'my_input_id', 'my_file'
I'm using Twitter-Bootstrap and want to generate the correct html to display the error view how it does it on the main site, which is:
The html for the above field is:
<div class="control-group error">
<label for="inputError" class="control-label">Input with error</label>
<div class="controls">
<input type="text" id="inputError">
</div>
</div>
Note: I deleted Please correct the error, <span>, I just want the input field and label.
And if I was to use my sign up page as an example, the email field, it would be:
<div class="control-group">
<label for="user_email" class="control-label">Email*</label>
<div class="controls">
<input type="email" value="" name="user[email]" id="user_email" class="span3">
</div>
</div>
What do I have to do to get it to function like the former?
Don't re-invent the wheel. Use simple_form. The current version of the gem allows you to do the following:
rails generate simple_form:install --bootstrap
With that, you can use the simple_form helpers. They will generate the right things for you.
I've just encountered this issue, and have fixed it with a simple modification to the Bootstrap CSS.
My usual field code is:
<div class="control-group">
<%= f.label :fieldname, t('models.model.fieldname'), :class => "control-label" %>
<div class="controls">
<%= f.text_field :fieldname, :class => 'input-large' %>
</div>
</div>
Since I'm using f.label and f.text_field the label and input are both encapsulated with divs with the field_with_errors class (as Nicholas mentions), making the resulting HTML:
<div class="control-group">
<div class="field_with_errors"><label class="control-label" for="model_fieldname">Field name</label></div>
<div class="controls">
<div class="field_with_errors"><input class="input-large" id="model_fieldname" name="model[fieldname]" size="30" type="text" value=""></div>
</div>
</div>
To make these have the same look appearance as Bootstrap's <div class="control-group error"> style I add some extra selectors into bootstrap.css. I find all references to .control-group.error ... and add duplicate lines with .control-group .field_with_errors .... So I end up with this kind of thing:
.control-group.error > label,
.control-group.error .help-block,
.control-group.error .help-inline,
.control-group .field_with_errors > label,
.control-group .field_with_errors .help-block,
.control-group .field_with_errors .help-inline {
color: #b94a48;
}
It might not be the most elegant way of doing it for Rails, but to me it seemed a lot easier than more dependant gems or overriding the error processing. Yes, you'll have to make the same changes each time you update Bootstrap, but they're fairly simple changes, and you could probably make a patch file to do it automatically.
Rails automatically generates a div with the class field_with_errors when an error message appears. That div wraps the element with error. In order to customize it, you can add this line to application.rb:
config.action_view.field_error_proc = Proc.new { |html_tag, instance| %Q(<div class="field_with_errors">#{html_tag}</div>).html_safe }
This is the default, so in order to get the same structure as Twitter Bootstrap, you could play with it.
html_tag is a placeholder for the field with errors, e.g. <input name="model[attribute]" size="30" type="text" value="">
You could wrap this within another div, and also add a span saying "Please correct the error".
More info: http://guides.rubyonrails.org/configuring.html - item 3.9
I'm trying to accomplish the following mark-up for all my form elements
<div class="input-container">
<label>Topic Title</label>
<div class="input-holder">
<input type="text" />
</div>
</div>
<div class="textarea-container">
<label>Post</label>
<div class="textarea-holder">
<textarea></textarea>
</div>
</div>
invalid fields mark-up:
<div class="input-container alert">
<label>Topic Title</label>
<div class="input-holder">
<input type="text" />
</div>
</div>
<div class="textarea-container alert">
<label>Post</label>
<div class="textarea-holder">
<textarea></textarea>
</div>
</div>
here's my current haml markup:
.input-container
= f.label :title, 'Topic Title'
.input-holder
= f.text_field :title
.textarea-container
= f.label :body, 'Post'
.textarea-holder
= f.text_area(:body, :size => "60x10")
Now what would I need to do if I want the container divs to have the alert class when a field in my form is invalid?
I want to do the same thing but unfortunately haven't figured out a clean way to handle it.
You can override ActionView::Base.field_error_proc, but that doesn't help with the enclosing elements.
It can be done manually by checking errors on each field ('post.errors['body'].nil?') and outputting your alert class conditionally.
The next step could be extracting the logic into a view helper, and perhaps some further abstraction after that.
But it would still be nice to do this in a more automated, Rails-y fashion.
It might be best to use either the formtastic or simple_form gems which out of the box support highlighting an individual invalid field.
I'm almost certain they do this by changing the CSS class on the field or its container, which you could also hook into in your stylesheets.