I have a rails 4 app with simple form.
There is a check box element in the app where the box is to the left of the label.
<div class="row">
<div class="col-md-3 col-md-offset-1">
<%= f.label :'How will you share the project results?', :class => 'question-project' %>
</div>
<div class="col-md-7">
<div class= "response-project">
<%= f.input :report, as: :boolean, inline_label: 'A report on project outcomes', label: false, :item_wrapper_class => 'inline' %>
<%= f.input :other_outcome, :as => :boolean, :label => false, :inline_label => true %>
</div>
</div>
</div>
The css for response-project is:
.response-project {
font-weight: normal;
font-family: 'Roboto', sans-serif;
color: light-grey;
font-size: 16px;
line-height: 2;
}
The check box is aligned further to the left than all of the remaining form elements. That seems to come from simple form. Does anyone know how to turn that alignment off so that the check box is aligned to the left of the form, in a uniform line with all other elements of the form?
Thank you
There was a Stack post very similar like this here: simple_form with Bootstrap check box
What you need to do is create a custom wrapper in config/initializers/simple_form.rb. Read more here https://github.com/plataformatec/simple_form/wiki/Custom-Wrappers
According to bootstrap, you need to layout the checkbox style and class to be something like this
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
add :item_wrapper_class => 'inline' to your code.
Related
could someone explain me what should I do to fix this? I put this on post.rb
has_attached_file :image, styles: { medium: "300x300>", thumb: "100x100>" }
validates_attachment_content_type :image, content_type: /\Aimage\/.*\z/
then in my index.html.erb i got this
<div class="row">
<% #posts.each do |post| %>
<div class="col-md-4">
<div class="card mb-4 shadow-sm ">
<img class="bd-placeholder-img card-img-top img-fluid " ><%= image_tag post.image.url(:medium) %></img>
<div class="card-body">
<p class="card-text"><h3><%= post.title %> </h3> <%= post.body %></p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<%= link_to "View", post_path(post), :class =>'btn btn-md btn-outline-secondary' %>
<%= link_to "Edit", edit_post_path(post), :class =>'btn btn-md btn-outline-secondary' %>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<% end %>
</div>
When I upload diffrent images then it doesn't resize it properly: look at this: https://iv.pl/image/resize-ruby.Gt21xMz
I use paperclip and Magick to upload images.
I checked through the docs for Paperclip, and it appears that 300x300> and 100x100> are directives passed to ImageMagick.
https://www.imagemagick.org/script/command-line-processing.php#geometry says that 300x300> will shrink the image so that it fits within 300x300. That means if you have a picture that's 500x300, it'll shrink down to 300x180.
{ medium: "300x300>", thumb: "100x100>" } looks like the line of code to modify, to change your resizing.
The picture that renders correctly is probably close to square in its original form. The picture that does not is probably a wide rectangle.
I have a page with bootstrap div's and 2 images and buttons on the page. In full screen, the page works fine. But when I resize the page only one of the images and 1 of the 2 buttons work. The images are side by side in full screen but when they resize one is on top of the other ant the top button and image cannot be pressed. Here is the view.
<div class="jumbotron">
<div class="center-block">
<img src="https://s3.amazonaws.../Frontpage_logo.png" class="img-responsive" alt="...">
</div>
<div class="text-center">
<br/>
<br/>
<% if user_signed_in? %>
<%= link_to 'Your Dashboard', users_dashboard_url, class: 'btn btn-primary' %>
<% elsif manager_signed_in? %>
<%= link_to "Your Dashboard", managers_dashboard_url, class: 'btn btn-primary' %>
<% elsif admin_signed_in? %>
<%= link_to "3rd Party/Supplier Dashboard", admins_dashboard_url, class: 'btn btn-primary' %>
<br/>
<br/>
<%= link_to 'Monitoring', sidekiq_web_path %>
<% else %>
<div class="container-fluid">
<div class="col-md-5">
<div class= "pull-left">
<h3><strong>See how we ...!</strong></h3>
<img src="https://s3.amazonaws.../manager_video.jpg" class="img-responsive">
<br>
<%= link_to "Manager", managers_why_url, class: 'btn btn-primary' %>
</div>
</div>
<div class="col-md-2">
<div class="text-center">
<h2>or</h2>
</div>
</div>
<div class="col-md-5">
<div class= "pull-right">
<h3><strong>See how we are helping ...!</strong></h3>
<img src="https://s3.amazonaws.../user_video.jpg" class="img-responsive">
<br>
<%= link_to "Tenant", users_why_url, class: 'btn btn-primary' %>
</div>
</div>
</div>
</h2>
</div>
<% end %>
</div>
If you wish to have the images side by side without overlapping when resized, change col-md-* to col-xs-*. Do so with rest.
I hope this helps.
I hope this should work for you.
Please try this code instead of yours. i made some small changes.
See how we ...!
or
See how we are helping ...!
When we create table using Bootstrap then it should go in side the "row" class. and when you re-size the window some other element is coming above of all the screen. that's way you was not able to click images. and on the End of your code 4th line from the bottom. there is no stating tag for closing "h2" tag.
I want to display a 1 px border on selection of the radio button and checkbox.
I am using this code to do for a radio button class.
label.option_radio_label > input{ /* HIDE RADIO */
display:none;
}
label.option_radio_label > input + img{ /* IMAGE STYLES */
cursor:pointer;
border:1px solid transparent;
height: 100px;
}
label.option_radio_label > input:checked + img{
/* (RADIO CHECKED) IMAGE STYLES */
border: 1px solid #000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
label.option_radio_label > input.c_disabled:checked + img{
/* (RADIO CHECKED) IMAGE STYLES */
border: none;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
here is my _radio_option.html.erb code
<div class="col-md-2">
<div class="row">
<div class="col-md-12 part_option_wrapper">
<center>
<% if pre_disabled %>
<div class='option_overlay'></div>
<% end %>
<label for="order_part_<%= radio_option.part.id %>_option_<%= radio_option.id %>"
class="option_radio_label">
<%= radio_button_tag "order[part][#{radio_option.part.id}][option]",
radio_option.id,
radio_option.is_default?,
class: "radio_option #{pre_disabled ? 'c_disabled' : ''}",
"data-option-part" => radio_option.part.id,
"data-option-name" => radio_option.name,
"data-option-disables" => "#{radio_option.disables.map(&:disable_element_id)}",
"data-option-subid" => "option_subid_#{radio_option.id}",
"data-option-group" => "part_#{radio_option.part_id}",
"data-option-enables" => "#{radio_option.enables.map(&:enable_element_id)}",
disabled: (pre_disabled ? true : false) %>
<%= image_tag radio_option.photo(:small), class: "radio_option_img",
"data-option-part" => radio_option.part.id,
"data- option-name" => radio_option.name %>
<br><%= radio_option.name %>
</label>
</center>
</div>
</div>
</div>
And here is my _part_child.html.erb
<div class="col-md-12 part-child-wrapper">
<div class="row">
<div class="col-md-2">
<label><%= part_child.name %></label>
</div>
<div class="col-md-10 selected_part_child">
<% if part_child.display_type == "dropdown" %>
<%= select_tag "order[part][#{part_child.parent.id}][children][][part][#{part_child.id}][option][][id]",
options_for_part_child(part_child),
class: "form-control child_option",
"data-option-subid" => part_child.id,
"data-option-name" => part_child.name %>
<% elsif part_child.display_type == "radio" %>
<div class="row">
<%= options_radio_tag part_child %>
</div>
<% elsif part_child.display_type == "checkbox" %>
<div class="row">
<%= options_checkbox_tag part_child %>
</div>
<% elsif part_child.display_type == "textbox" %>
<div class="row">
<%= options_textfield_tag part_child %>
</div>
<% end %>
</div>
</div>
</div>
PS: inspect element for the radio child part
<div class="col-sm-2">
<label for="order_part_11_children__part_14_option__id">
<input id="order_part_14_option_48" ,="" class="radio_option_child"
data-option-name="Edge" data-option-id="14"
name="order[part][11][children][][part][14][option][][id]"
type="radio" value="48" checked=""
data-option- subid="option_subid_48">
<img src="/system/options/photos/000/000/048/original/cuff_doublebutton.jpg? 1424078897"> Edge
</label>
</div>
But when I try to do the same for the children's radio options and checkboxes, I am not able to get that working.
Please help.
In your radio button template, you have correctly add the class class="option_radio_label" to your label... but it's clearly not coming through in the html. The problem is not with your css.. but the fact that the class is not actually showing up in the final html.
That may be due to a typo, or some other interference - but that's where you need to concentrate your efforts.
I have these markup on my rails application these form is not working when i tr
<div class="span5 mg myform">
<div class="span5 mg">
<ul class="clearfixremo formmenu">
<li class="lefty blocky boldy rightbrd"><i class="icon-pencil"></i> Post</li>
<li class="lefty blocky boldy myphotoupload "> <i class="icon-camera"></i> Photo</li>
</ul>
</div>
<div class="span5 mg">
<div class="row">
<div class="span4">
<%= simple_form_for(current_user.posts.new, :remote => true ,:html => { :multipart => true } ,:class=>"form-horizontal" ) do |f| %>
<div class="field">
<%= f.text_area :body ,:rows=>1%>
<%= f.select :privacy,["public","friends","only me"] %>
</div>
</div>
</div>
</div>
<div class="span5 mg">
<div id="pactions" class="actions">
<%= f.submit "#{t 'share'}",:id=>"share"%>
</div>
<% end %>
</div>
</div>
it shows to me on html markup that the form is closed before the select menu and when I move the submit button before the select menu and inside the field div its working
Fix the formatting and indentation of your ERB and the problem should become obvious: opening tags (including <%= ... do %>) must match their closing tags (including <% end %>). You can't:
<div>
<form>
</div>
</form>
you need to:
<div>
<form>
</form>
</div>
Your <form> opens one <div>
<%= simple_form_for(current_user.posts.new, :remote => true ,:html => { :multipart => true } ,:class=>"form-horizontal" ) do |f| %>
<div class="field">
and then tries to close four of them:
</div>
</div>
</div>
</div>
When the browser sees that invalid HTML, it will attempt to fix it by closing the <form> behind your back and it will pretend that you said:
</div>
</form>
</div>
</div>
Once that happens, your form is broken and nothing works the way you're expecting it to.
Fix your tag nesting so that everything is closed in the opposite order that the tags are opened. And start formatting your code properly so that the structure is obvious, the computer won't care but you will.
I am using bootstrap on my application and having a hard-time to vertically align some items using bootstrap. It consist of one bootstrap row and 3 span4 with a search bar, a title and navigation links.
This is the skeleton:
<div class="row">
<div class="span4">
form code, as generated by rails form_for
<div class="span4">
Page title
<div class="span4">
pagination links, as generated by rails will_paginate
This is the rails code:
<div class="row">
<div class="span4">
<%= form_tag mybooks_path, class: "form-search", :method => 'get', :id => "mybooks_search" do %>
<div class="input-append">
<%= text_field_tag :search, params[:search], class: "search-query" %>
<%= submit_tag "Search", :name => nil, class: "btn" %>
</div>
<% end %>
</div>
<div class="span4">
<h2>My book library</h2>
</div>
<div class="span4">
<%= will_paginate #mybooks, class: "pagination pagination-right" %>
</div>
</div>
And here is the JSFiddle:
http://jsfiddle.net/V7CVE/2/
I am using the standard uncustomized bootstrap 2, and I need the search-box, the page title and the pagination links to be vertically aligned to each other.
I'm not familiar with ruby syntax, but conceptually this should not make a difference. The reason they are not aligned is that bootstrap has its own default css for different elements. You just need to fine tune each element by overriding these bootstrap styles.
apply the following styles:
.form-search {
margin: 15px 0 0 0;
}
.pagination {
margin: 15px 0;
}