Given the code below I am trying to figure out the correct way to display the form fields wider then they do. i.e. The first two rows display roughly two bootstrap columns wide but I would expect the third row to display at the full width.
<div class="well">
<div class="row">
<div class="col-xs-4">
#Html.LabelFor(m => m.To)
#Html.EditorFor(m => m.To)
</div>
</div>
<br />
<div class="row">
<div class="col-xs-4">
#Html.LabelFor(m => m.Subject)
#Html.EditorFor(m => m.Subject)
</div>
</div>
<div class="row">
<div class="col-md-10">
#Html.LabelFor(m => m.Body)
#Html.EditorFor(m => m.Body)
</div>
</div>
******* Update ********
Changed one of the fields to this
<div class="row">
<div class="col-md-12">
#Html.TextBoxFor(m => m.Body, new { #class = "form-control", placeholder = "Body" })
</div>
</div>
You need to apply the form-control class to your inputs as this sets the input width to be 100% which means they will completely fill the column. Unfortunately EditorFor doesn't let you do that. However, TextBoxFor does:
#Html.TextBoxFor(m => m.To, new { #class = "form-control" })
Related
The width isnt setting for the textarea control. It sets for the other controls. Could somebody tell me why isnt the width applying for text area
For example
Setting border to solid for col-md-6
<div class="form-group">
#Html.LabelFor(model => model.ProjectName, htmlAttributes: new { #class = "control-label col-md-5" })
<div class="col-md-6">
#Html.EditorFor(model => model.ProjectName, new { htmlAttributes = new { #class = "form-control", style = "width:100%" } })
#Html.ValidationMessageFor(model => model.ProjectName, "", new { #class = "text-danger" })
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
#Html.LabelFor(model => model.ProjectSummary, htmlAttributes: new { #class = "control-label col-md-5" })
<div class="col-md-6">
#Html.TextAreaFor(model => model.ProjectSummary, new { htmlAttributes = new { #class = "form-control", rows = "3", style = "max-width:100%" } })
#Html.ValidationMessageFor(model => model.ProjectSummary, "", new { #class = "text-danger" })
</div>
</div>
The real width is the width the textarea has. The col-md-6 will make it that wide. The problem is that the container you're applying the border to does not actually constrain the textarea. If I understand you correctly that you're applying the border to the div with the col-md-6 class, that could very well be your issue. The grid classes that Boostrap employ various width, margin and padding settings to construct a grid that is as close to cross browser as possible, and applying actual visible style to them almost always causes weirdness like this. Instead, wrap your textarea with another div and apply the border to that:
<div class="col-md-6">
<div class="my-awesome-border">
#Html.TextAreaFor(model => model.ProjectSummary, new { htmlAttributes = new { #class = "form-control", rows = "3", style = "max-width:100%" } })
#Html.ValidationMessageFor(model => model.ProjectSummary, "", new { #class = "text-danger" })
</div>
</div>
Long and short, you should always avoid adding additional style to anything with Bootstrap's grid classes (col-*, row, etc.).
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.
I am using Twitter bootstrap 3.0 and razor views.
How can I align the image in the below div to the immediate right of the artist text box ?
<div id="artist"class="form-group">
#Html.LabelFor(m => m.Artists, new { #class = "col-lg-2 control-label" })
<div class="container">
#Html.TextBoxFor(m => m.Artists, new { placeholder = "Artist name",#class="form-control", id="artistinput"})
<img onclick="AddArtist()" id="plusartist" src="\Content\bootstrap\img\plus-button.png" class="img-thumbnail"/>
#Html.ValidationMessageFor(m => m.Artists)
</div>
</div>
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.
As you see the image. The result of pagination comes right next to the shops list.
It has to be below that.
How can I do that?
view
<div class='pagination-centered'>
<%= page_entries_info(#shops).html_safe %>
<%= paginate #shops, :window => 4, :outer_window => 5, :left => 2, :right => 2 %>
</div>
<% #shops.each do |shop| %>
<%= render 'shops/shop', :shop => shop %>
<% end %>
<div class='pagination-centered'>
<%= paginate #shops, :window => 4, :outer_window => 5, :left => 2, :right => 2 %>
<%= page_entries_info(#shops).html_safe %>
Image
UPDATE: This is the HTML that is generated. pagination has to be started at new line.
It shouldn't be at the same line as Shops.
<div class='pagination-centered'>
Displaying <b>all 4</b> shops
</div>
<span class='shop'>
<div class="List">
…shop A...
</div>
<div class="List">
…shop B...
</div>
<div class="List">
…shop C...
</div>
</span>
<div class='pagination-centered'>
Displaying <b>all 4</b> shops
</div>
If your span or list contain a float thats the problem
try
<div class='pagination-centered'>
Displaying <b>all 4</b> shops
</div>
<span class='shop'>
<div class="List">
…shop A...
</div>
<div class="List">
…shop B...
</div>
<div class="List">
…shop C...
</div>
</span>
<div class="clearfix"></div>
<div class='pagination-centered'>
Displaying <b>all 4</b> shops
</div>