I am attempting to use a calendar icon from Foundation Icon set next to a rails form input, and figured a quick way to align the two while making it look good was to use Foundation's postfix labels. Here is my code followed by a screenshot, which shows that they are compatible, but the main priority of getting them to be aligned with each other fails to happen:
<div class="row collapse">
<div class="fourteen mobile-three columns">
<label for="fundraiser-expire-at">End Date</label>
<%= form.text_field 'expire_at',
class: 'datepicker' %>
</div>
<div class="two mobile-one columns">
<span class="postfix">
<i class="general enclosed foundicon-calendar show_datepicker"></i>
</span>
</div>
</div>
Does anyone know a way I can get what I'm looking for hear? Will it require css? I'm sure that css is A solution, I'm just wondering if I can use Foundation built in styling to get this working...
I contemplated deleting this question because it ended up being a really easy fix, but I figured that SOMEONE, SOMEWHERE, MIGHT benefit from this question persisting. The problem lies with the label being in the same section of fourteen columns as the input. The postfix does its best to align with the combo of the label and input. If you put the label outside the fourteen columns so that the input is the only member of that section, the postfix aligns itself with the input.
Adding to Jake Smiths's answer I will show where to change to make it the postfix get nicely aligned with the field. The example bellow uses Foundation 5.1.1 and Ruby on Rails 3.2.
<div class="row">
<div class="large-4 columns">
<div class="row collapse">
<div class="small-9 columns">
<%= f.label :altitude %> <!-- This line here must be moved outside this div -->
<%= f.text_field :altitude %>
</div>
<div class="small-3 columns">
<span class="postfix radius">meters</span>
</div>
</div>
</div>
</div>
This results in an not aligned field and label.
If we change it to:
<div class="row">
<div class="large-4 columns">
<div class="row collapse">
<%= f.label :altitude %> <!-- Now it is happy and aligned :-) -->
<div class="small-9 columns">
<%= f.text_field :altitude %>
</div>
<div class="small-3 columns">
<span class="postfix radius">meters</span>
</div>
</div>
</div>
</div>
Related
I'm trying to create a two column layout. The first side should span 9 columns and the next one 3. Inside the col-md-9 I want to nest two more columns, one that spans 4 and another one that spans 8.
<div class="row">
<% #huddles.each do |huddle| %>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="http://placehold.it/300x150">
</div>
<div class="col-md-8">
<h4><%= huddle.title %></h4>
<h4 class="huddle-description"><%= huddle.description %></h4>
<%= link_to "Read More...", huddle_path(huddle) %>
</div>
</div>
<% end %>
</div>
<div class="col-md-3">Second Column</div>
</div>
This however, comes out looking like this:
Am I nesting my rows and columns wrong? Or maybe it is my ruby code itself that screws up the layout once new "Huddles" are created?
EDIT: With the fixed code, the second column "col-md-3" comes out next to the last created huddle. Inspecting it, all the huddles make one single row.
<div class="row">
<% #huddles.each do |huddle| %>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="http://placehold.it/300x150">
</div>
<div class="col-md-8">
<h4><%= huddle.title %></h4>
<h4 class="huddle-description"><%= huddle.description %></h4>
<%= link_to "Read More...", huddle_path(huddle) %>
</div>
</div>
</div>
<% end %>
<div class="col-md-3">Second Column</div>
</div>
And looks like this, where the second column moves all the way down next to the last huddle created:
I think this is what you are going for. I am pretty confident the issue is with the html structure and has nothing to do with ruby.
I also want to clarify. The initial issue you were having was that you were starting a div inside the loop but only closing it outside the loop. So starting n amount of divs but only one closing tag, and that would cause it to look like the image you first posted.
<div class="row">
<div class="col-md-9">
<% #huddles.each do |huddle| %>
<div class="show-region" >
<div class="col-md-4" style="height:150px;">
<img class="img-responsive" src="http://placehold.it/300x150">
</div>
<div class="col-md-8" style="height:150px;">
<h4><%= huddle.title %></h4>
<h4 class="huddle-description"><%= huddle.description %></h4>
<%= link_to "Read More...", subjects_path(huddle) %>
</div>
</div>
<% end %>
</div>
<div class="col-md-3">Second Column</div>
</div>
Currently I am making a twitter clone using RubyOnRails and bootstrap as the framework. When trying to distribute some text in a post panel using the "col-sm" div class, the text seems jammed together on the left,
as seen here.
Here is my code:
<div class="row">
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-body">
<p>status</p>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<p>trend</p>
</div>
</div>
</div>
<div class="col-xs-6">
<%= render '/components/post_form' %><br></br>
<% for #p in #posts %>
<div class="panel panel-default post-panel">
<div class="panel-body">
<div class="col-sm-1">
AVATAR
</div>
<div class="col-sm-11">
<p><%= #p.content %></p>
</div>
<div class="col-sm-12">
LINKS
</div>
</div>
</div>
<% end %>
</div>
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-body">
<p>about</p>
</div>
</div>
</div>
</div>
I am using the latest bootstrap sass version 3.3.6 which is included in the gemfile. Is there something wrong with the code or does the latest version of bootstrap mean I need to do something different?
Look at this section:
<div class="col-sm-1">
AVATAR
</div>
<div class="col-sm-11">
<p><%= #p.content %></p>
</div>
<div class="col-sm-12">
LINKS
</div>
The first issue is the text "AVATAR" is wider than 1 bootstrap column, so it's extending out of your container. using col-sm-2/col-sm-10 may fix the issue.
Second, column sizes should add up to 12 columns per row. Here you have a col-sm-1, col-sm-11, and col-sm-12 all in the same row.
Using the following HTML I am trying to randomly select one of the href links
<div class="field">
Check availability
</div>
</div>
</div>
</div>
</article>
</div>
<div class="views-row views-row-3 views-row-odd views-row-last">
<article id="node-cruise-47" class="node node-cruise node-search-result node-cruise-search-result node-published node-not-promoted node-not-sticky author-admin odd clearfix s-search-result" itemscope="" itemtype="http://schema.org/Product">
<div class="search-result-inner clearfix">
<div class="s-search-result--left">
<div class="s-search-result--middle">
<div class="s-search-result--right">
<div class="field field-name-field-price field-type-number-decimal field-label-inline clearfix price-summary">
<div class="field field-name-field-departure-duration field-type-number-integer field-label-hidden price-conditions primary-condition">Based on 7 nights, yacht only</div>
<div class="availability-button-wrapper-search">
<div class="field">
Check availability
Note that several href links are present on the page not just these 2. I am using the following code
b.links(:xpath => '//div[#class="field"]/a').click
However I get:
"undefined method `click' for #<Watir::AnchorCollection:0x2ba1858> (NoMethodError)"
Try to pick randomly from array
b.links(:xpath => '//div[#class="field"]/a').to_a.sample.click
I installed Bootstrap for my Rails and decided to test out making a grid. This is my code.
<div class="row">
<div class="span4">
<h1>About the Creator</h1>
<p>
</p>
</div>
<div class="span8">
<h1>About the Site</h1>
<p>
</p>
</div>
</div>
This is what it looks like. As you can see, it's in 2 rows, however it should be in 2 columns. There doesn't seem to be anything wrong with the code itself as far as I can see. I don't think I made a mistake during installation, because when I installed bootstrap, it automatically stylized my webapp. Any help?
What version of bootstrap are you using? In recent versions of bootstrap the syntax is <tag class="col-xs-4"> rather than <tag class="span4">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-4">
<h1>About the Creator</h1>
<p>
</p>
</div>
<div class="col-xs-8">
<h1>About the Site</h1>
<p>
</p>
</div>
</div>
There are 4 classes you can use in order to specify column size:
col-xs-#
col-sm-#
col-md-#
col-lg-#
They were introduced so that you could have columns have different portions of the screen on different platforms. For example, perhaps you want your main content to take up 12 columns, instead of 10, on a mobile phone. TO do this do:
<div class="row">
<div class="col-xs-12 col-md-10">
Content
</div>
</div>
I have a problem with multiples ajax forms in index view, only first works with remote: true attribute.
This is my index view with a forms
<% #mensagens.each do |mensagem| %>
<%= form_for(mensagem, remote: true,:authenticity_token => true) do |f| %>
<div class="row">
<div class="col-md-9">
<div class="widget">
<!-- BLOCK -->
<div class="row innerAll half border-bottom">
<div class="col-sm-12">
<div class="media-body">
<div class="innerAll half">
<div class='col-md-10'><%= f.number_field :avaliacao %></div>
<div class='col-md-2'><%= mensagem.slug %></div>
</div>
</div>
</div>
</div>
<div class="row innerAll half border-bottom">
<div class="col-sm-12">
<div class="media-body">
<div class="innerAll half">
<%= f.text_area :texto, :class=>"col-md-12 form-control", :placeholder=>"Mensagem" %>
</div>
</div>
</div>
</div>
<div class="row innerAll half border-bottom">
<div class="col-sm-12">
<div class="media-body">
<div class="innerAll half ">
<div class="col-md-2"><%= f.check_box :aprovado %></div>
<div class="col-md-2"><%= f.check_box :status %></div>
<div class="col-md-6 btn"><%= f.text_field :autor,:class=>"form-control", :placeholder=>"Autor" %></div>
<div class="col-md-2"><%= f.submit "Salvar", :class=>"btn btn-success" %></div>
</div>
</div>
</div>
</div>
<div class="row innerAll half border-bottom">
<div class="col-sm-12">
<div class='notyfy_wrapper mensagem_<%= mensagem.id %>'>
<div class="notyfy_message">
<span class="notyfy_text">
<div id="alerta"></div>
</span>
</div>
</div>
</div>
</div>
</div>
<!-- BLOCK -->
</div>
</div>
<% end %>
<% end %>
This is a result: (http://droido.com.br/html.html)
This first form works fine! but second, send a normal request (non-ajax) and redirect to show page!
At droido.com.br/mensagens the second form is nested inside the first. It appears the second This is why it isn't being set up with ajax, as forms are not supposed to be nested, so I expect Rails is not getting to it.
The problem is, based upon your code above, I am not finding any missing close tags. On the page it looks like the <div class='row'> is missing the closing tag. I suggest you knock out a section at a time until you find the problem. Or, delete the entire content and add back until you find it.
Have you used the Chrome dev tools? If not, try it out. Go to the web page, right click, inspect. It will show the tags in a hierarchical manner.