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>
Related
I have the following code for showing the header image in my index.html.erb for my articles:
<% #articles.each do |article| %>
<% if article.public? %>
<%= link_to article_path(article), class: 'text-decoration-none' do %>
<div class="card mt-3 post-card">
<div class="card-body">
<div class="row">
<div class="col-md-2">
<% if article.header_image.present? %>
<div class="header-img"
style="background-image: url(<%= url_for(article.header_image) %>);">
</div>
<% end %>
</div>
<div class="col-md-10">
<h5 class='card-title mb-1 text-dark'><%= article.title %></h5>
<p class='text-secondary mb-0'><%= article.body %> </p>
</div>
</div>
</div>
</div>
<% end %>
<% end %>
<% end %>
I am following the tutorial by Techmaker Studio, and the desired output is at this timestamp: https://youtu.be/MCEzxY9BbiU?t=5059
The code is correct because I inspected and see the example image (the ruby icon) shows up in the inspector but not in the background image.
inspect screenshot proves url is working
The one difference between my project and the tutorial I am following is that I am using Rails 7 and importmaps. Does anyone have an idea why it isn't showing up? when I use image_tag, it works but not with the background-image style I desire.
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
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.
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
Here is my code for my edit.html.erb:
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
<div class="row">
<br />
<div class="span12">
<h2>Main content</h2>
<%= form_for(#post) do |f| %>
<% if #post.errors.any? %>
<div id="errorExplanation">
<h2><%= pluralize(#post.errors.count, "error") %> prohibited this post from being saved:</h2>
<ul>
<% #post.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<h1>New post</h1>
<div class="field">
<%= f.label :Title %><br />
<%= f.text_field :title %>
</div>
<div class="field">
<%= f.label :content %><br />
<%= f.text_area :content, :rows => "40", :cols => "40" %>
</div>
<div class="field">
<%= f.label :slug_url %><br />
<%= f.text_field :slug_url %>
</div>
<div class="field">
<%= f.label :Project %><br />
<%= f.text_field :project %>
</div>
<div class="field">
<%= f.label :Desciption %><br />
<%= f.text_field :desc %>
</div>
<div>
<%= f.submit %>
</div>
<% end %>
</div>
</div>
On my webpage when it loads the form_for stuff is super skinny and won't break out of a very narrow section. When I got to inspect element and I look at the h2 it spans the whole 12 columns, but everything else doesn't. I can adjust the col number on the text area and it does nothing. It looks like it is defaulting to the the smallest text_field for it's width.
Any ideas on how I can figure out what is going wrong?
Try this:
<%= f.text_field :title, :style => "width:100px;" %>
It works for me and you can change the '100px' depend on your needs.
At the other answers mention, this should be handled by your CSS. Though it's difficult to know exactly without knowing the intracicies of your stylesheet, something like this:
.edit_post input[type=text], .edit_post textarea {
width: 100%;
/* or */
width: 450px;
}
will probably work.
Inspect your CSS. This is a pure CSS issue and has nothing to do with Rails.
(Bonus tip: Try Haml instead of ERb.)
Well, you haven't specified any sort of widths, unless you did in your stylesheet, which you didn't include in your post.
Are any of the lines wrapping (like the titles < h1 > or < h2 >) ? If they are and that's not what you want, you can add "white-space:nowrap:" to your h1/h2 styles in your stylesheet.
I also noticed you are looping and adding a list (< li >). Try specifying a width in the < ul > tag to force it to be the same width as the header tag (maybe width:100%;).
Just some ideas since I don't know what your stylesheet looks like :)