I'm trying to make 2 nice columns of "Food Categories" populated with foods.
This is what I have so far. I cant figure out how to give the divs to go next to each other. I'm making my first rails app with bootstrap.
JSFiddle
Here is the template code I currently have for the page:
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>
<h3>List of all Categories</h3><br>
<% #categories.each_with_index do |category, i| %>
<div style=""<% if i % 2 == 0 %> class="col-md-offset-1" <% end %> <% if i % 2 == 1 %> class="col-md-offset-7" <% end %>>
<h4><%= category.name %></h4>
</div>
<% category.foods.each do |food| %>
<div style=""<% if i % 2 == 0 %> class="col-md-offset-2" <% end %> <% if i % 2 == 1 %> class="col-md-offset-8" <% end %>>
<%= food.name %>
</div>
<% end %>
<% end %>
<hr>
<%= button_to "Start Survey", survey_category_selection_path, class: "pull-right", method: :get %>
You have to wrap each category in a div. Then, you put .col-md-6 class. So each block will take 50% of the width.
You will have something like this
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>
<h3>List of all Categories</h3><br>
<% #categories.each_with_index do |category, i| %>
<div class="col-md-6">
<h4><%= category.name %></h4>
<% category.foods.each do |food| %>
<div class="col-md-offset-1">
<%= food.name %>
</div>
<% end %>
</div>
<% end %>
<hr>
<%= button_to "Start Survey", survey_category_selection_path, class: "pull-right", method: :get %>
JSFiddle
Ok, what you are asking is to align the div tags so that they appear side by side:
div {
width: 48%;
display: inline-block;
}
You may instead want to select .inline-block instead of div.
Please note that you need to keep the width less than 50% because your indentation will make the div tags not appear line.
Also, make a media query so that when the page gets smaller the div tags will appear as block, not inline block.
hope this helps.
Related
I have a WIP form I would like to expand a text area for. However, when I apply a height it applies it more like a margin than actual height. If I edit the CSS after the page has been rendered it works properly.
With height: 12.5
Now when I check the console I notice that height: 12.5rem is absent. However, if I add it, the page renders properly.
I am using bootstrap 4 and rails. Relevant code is provided below.
messages.scss
#message_form{
margin-left: 4.0rem;
// Only visible with smaller screen sizes
margin-right: 4.0rem;
margin-top: 2.0rem;
margin-bottom: 2.0rem;
width: 50%;
}
.text_form{
height: 15rem !important;
}
_form.html.erb
<div id="message_form">
<%= form_with(model: message, local: true) do |form| %>
<%# Error message setup %>
<% if message.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(message.errors.count, "error") %> prohibited this message from being saved:</h2>
<ul>
<% message.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<%# Form setup %>
<%# Message Title %>
<div class="form-group">
<%= form.label :message_name %>
<%= form.text_field :message_name, id: :message_message_name, :class=>"form-control" %>
</div>
<%# Message Context %>
<div class="form-group text_form">
<%= form.label :text %>
<%= form.text_area :text, id: :message_text, :class=>"form-control" %>
</div>
<%# Message send time %>
<div class="form-group">
<%= form.label :date_and_time_to_send %>
<%= form.text_field :date_and_time_to_send, id: :message_date_and_time_to_send, :class=>"form-control" %>
</div>
<%# Actions to perform %>
<div class="actions">
<%= form.submit 'Send Now', :class=>'btn btn-primary btn-block'%>
<%= form.submit 'Save to Database', :class=>'btn btn-primary btn-block'%>
</div>
<% end %>
</div>
How can I fix this problem? Thanks
It's because you're targetting the parent element. Try this instead:
.text_form textarea {
height: 12.5rem;
}
Resource if you need more help with text area elements: https://css-tricks.com/textarea-tricks/
I trying to move pagination to footer on my website.
I don't want to ready solution, I would like to make this alone, but I do not know where to start, how can a real programmer handle this?
*I finished this site lately from book, and now i trying to do something alone.
code:
<div id="pins" class="transitions-enabled">
<% #pins.each do |pin| %>
<div class="box">
<div class="panel panel-default">
<%= link_to image_tag(pin.image.url(:medium)), pin %><br/>
<div class="panel-body">
<%= pin.description %><br/>
<br/>
<strong><%= pin.user.name if pin.user %></strong><br/>
</div>
<% if pin.user == current_user %>
<div class="panel-footer">
<%= link_to 'Edit', edit_pin_path(pin) %><br/>
<%= link_to 'Delete', pin, method: :delete, data: { confirm: 'Are you sure?' } %>
</div>
<% end %>
</div>
</div>
<% end %>
</div>
<br/>
<div class="center">
<%= will_paginate #posts, renderer: BootstrapPagination::Rails %>
</div>
screen:
You havent showed your containers. If you pass all content in order and into containers:
<div class="container">
<div class="row">
<div class="col-md-12">
Stff..
</end>
</end>
</end>
All should be fine. As a fast fix try to:
<div class="center col-md-12">
<%= will_paginate #posts, renderer: BootstrapPagination::Rails %>
</div>
But this just a fast fix, not solution...
And your code is a bit messy, and you have one closing div, but havent showed where it was opened
Currently when the code runs both my title fields appear above the same table. It also lower cases all letters except for the first one. I wanted to have a title above each table. The main code looks like,
<%= form_for(#test) do |f| %>
<div id="field">
<%= f.label "test" %>
<%= f.text_field :test_title %><br>
</div>
<div id="field">
<%= f.label "Description" %>
<%= f.text_area :description %><br>
</div>
<div class="actions">
<br><%= f.submit %><br>
</div>
<div id="title">
<%= f.label "Associated worlds" %><br><br>
</div>
<div id="add_fields">
<%= link_to_add_fields "Associate New world", f, :pwss_wbss %><br><br>
</div>
<div id="fields">
<% if #test.valid? %>
<table id="sort_table" class="display">
<thead>
<tr>
<th>Line Item</th>
<th>Description</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<% if #test.valid? %>
<%= f.fields_for :tests_worlds, #test.tests_worlds.each do |builder| %>
<%= render "tests_world_row", f: builder %>
<% end %>
<% end %>
</tbody>
</table>
<% end %>
</div>
<div id="title">
<%= f.label "States" %><br><br>
</div>
<div id="add_fields">
<% if #test.valid? %>
<%= f.fields_for :state, #test.states.each do |builder| %>
<%= render "states_fields", f: builder %>
<% end %>
<% end %><br>
</div>
<div id="add_fields">
<%= link_to_add_fields "Add State", f, :state %>
</div>
<div id="fields">
<% if #state.valid? %>
<table id="sort_table" class="display">
<thead>
<tr>
<th>Line Item</th>
<th>Description</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<%= f.fields_for :states, #test.states.each do |builder| %>
<%= render "states_row", f: builder %>
<% end %>
</tbody>
</table>
<% end %>
</div>
<% end %>
The CSS code I am using for the title fields is:
div#title label {
display: inline-block;
padding: 0px,5px,0px,5px;
min-width: 80px;
font-size: 14pt;
color: Blue;
font-weight: bold;
}
div#title {
position: static;
display: inline-block;
}
When this runs, both titles appear on one line above both tables. How do I get the title so that each one appears above the respective table?
Here is an image of what it displays
If you are going to use title as a tag, set it as a class rather than an Id in the HTML. ID's should only appear once in any page.
Also, it may have something to do with the display being inline-block only on the titles. If the other elements aren't also inline-block they may render in a different order.
I tend to use inline-block for pretty much entire pages. Try setting the value of the container div or the body to inline-block and see if that helps.
If a User creates a bunch of <ul></li>:results</li></ul> those bullets will overlap the <div> below it. How can we stop this from happening? Will you save the <div> before it's too late?!? dun dun dun
index.html.erb
<!-- Default bootstrap panel contents -->
<div id="values" class="panel panel-default">
<div class="panel-heading"><h4><b>AVERAGE</b></h4></div>
<% #averaged_quantifieds.each do |averaged| %>
<% if averaged.user == current_user %>
<div style="float:left; width:150px;">
<%= link_to edit_quantified_path(averaged) do %>
<b><%= averaged.name %> (<%= averaged.metric %>)</b>
<% end %>
<ul>
<% averaged.results.each do |result| %>
<li>
<%= result.date_value.strftime("%b.%y") %>
<%= result.result_value %>
</li>
<% end %>
</ul>
</div>
<% end %>
<% end %>
</div>
# The line breaks only work if the User only adds a few rows, but I want to encourage the User to creates as many rows as his heart desires.
<br>
<br>
<br>
<br>
<!-- Default bootstrap panel contents -->
<div id="values" class="panel panel-default">
<div class="panel-heading"><h4><b>INSTANCE</b></h4></div>
<% #instance_quantifieds.each do |instance| %>
<% if instance.user == current_user %>
<div style="float:left; width:150px;">
<%= link_to edit_quantified_path(instance) do %>
<b><%= instance.name %> (<%= instance.metric %>)</b>
<% end %>
<ul>
<% instance.results.each do |result| %>
<li>
<%= result.date_value.strftime("%b.%y") %>
<%= result.result_value %>
</li>
<% end %>
</ul>
</div>
<% end %>
<% end %>
</div>
<div class="values-button">
<%= link_to new_quantified_path, class: 'btn' do %>
<b><span class="glyphicon glyphicon-plus"</span></b>
<% end %>
</div>
you have a the code <div style="float:left; width:150px;">. this is what makes it overlflow to the div below it. float style takes it out of the normal flow of the dom (floats above the natural structure of the dom is a way of describing it) and the div below it doesnt pay attention to it. removing that line of code (you have it twice) will solve your problem
I want to create a pair of bootstrap columns inside another bootstrap column.
My output is not as desired for some reason.They look completely goofy for some reason. Did I make a rookie mistake in my formatting?
I am iterating over a #user object and having the profile picture be on the left and the profile info be on the right. There are many users so it should ideally style for all the iterations of the users in the database.
I feel this code should work but it doesn't, any idea as to what happened:
<div class="row">
<div class="other-box col-sm-6">
<p>Random text!!!</p>
</div>
<div class="index-user-container col-sm-6">
<div class="row">
<% #users.each do |user| %>
<div class="index-picture col-sm-4">
<%= image_tag user.image.thumb('150x185#').url if user.image_stored? %>
</div>
<div class="index-info-box col-sm-8">
<%= user.first_name %>
<%= user.last_name %>
<%= user.email %>
<%= link_to 'Go to profile', user_path(#user) %>
</div>
<% end %>
</div>
</div>
</div>
I am using twitter bootstrap. Here is a screen shot of the goofyness:
If you want a new row for each user in the list, then put the iterator above the row div, not inside it - otherwise, you might get some funky results.
<div class="index-user-container col-sm-6">
<% #users.each do |user| %>
<div class="row">
<div class="index-picture col-sm-4">
<%= image_tag user.image.thumb('150x185#').url if user.image_stored? %>
</div>
<div class="index-info-box col-sm-8">
<%= user.first_name %>
<%= user.last_name %>
<%= user.email %>
<%= link_to 'Go to profile', user_path(#user) %>
</div>
</div>
<% end %>
</div>