I have a landing page that contains six hero images. I have it set up to display three images per row, in two rows. This works fine on Chrome, Firefox, IE, Opera, but not on Safari (10.1). Instead of the neat rows, the first row has two images, the second three, and the third one. Here is my erb file:
<section class="grouping">
<div class="wrapper grouping">
<div class="intro-content grouping row">
<% flash.each do |key, value| %>
<div class="alert alert-<%= key %>" role="alert">
<%= value %>
</div>
<% end %>
<div class="landing-image-container col-xs-12 col-sm-4">
<%= link_to image_tag("news.jpg"), articles_path, class: 'image-link' %>
<h4 class="landing-headings text-centered"><%= link_to "News", articles_path, class: 'landing-link' %></h4>
</div>
<div class="landing-image-container col-xs-12 col-sm-4">
<%= link_to image_tag("Our People.JPG"), support_path, class: 'image-link' %>
<h4 class="landing-headings text-centered"><%= link_to "Peer Support", support_path, class: 'landing-link' %></h4>
</div>
<div class="landing-image-container col-xs-12 col-sm-4">
<%= link_to image_tag("training.jpg"), training_path, class: 'image-link' %>
<h4 class="landing-headings text-centered"><%= link_to "Training", training_path, class: 'landing-link' %></h4>
</div>
<div class="landing-image-container col-xs-12 col-sm-4">
<%= link_to image_tag("calendar.jpg"), calendar_path, class: 'image-link' %>
<h4 class="landing-headings text-centered"><%= link_to "Calendar", calendar_path, class: 'landing-link' %></h4>
</div>
<div class="landing-image-container col-xs-12 col-sm-4">
<%= link_to image_tag("about.jpg"), resources_path, class: 'image-link' %>
<h4 class="landing-headings text-centered"><%= link_to "Trans Resources", resources_path, class: 'landing-link' %></h4>
</div>
<div class="landing-image-container col-xs-12 col-sm-4">
<%= link_to image_tag("Get Involved.JPG", id: 'involved-image'), involved_path, class: 'image-link' %>
<h4 class="landing-headings text-centered"><%= link_to "Get Involved", involved_path, class: 'landing-link' %></h4>
</div>
</div>
</div>
</section>
I know that the specification for Bootstrap says that you should wrap a row in a .container, I've tried this setup with .container and .container-fluid, nothing changes except some slight padding on the left and right. The .grouping class is a clearfix hack:
.grouping:before,
.grouping:after {
content: " ";
display: table;
}
.grouping:after {
clear: both;
}
Here's the css for .wrapper and .intro-content:
.wrapper {
width:100%;
margin: 9em auto 0;
padding-bottom: 9em;
box-shadow: 0 8px 1em rgba(0, 0, 0, 0.1);
}
.intro-content {
margin: 4em auto;
max-width: 1100px;
width: 90%;
}
I've messed with these settings quite a bit, reducing all padding and margin to 0 and things like that, but the problem remains. Googling this has provided a few hacky solutions, none of which worked.
Found this on one of GitHub forums:
.row:before, .row:after {
display: inline-block;
}
Helped me a lot.
It does not affect bootstrap columns behaviour on edge, chrome and Firefox.
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 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
Well, I tried solving this on my own but it seems like that many people have the same problem for all sort of different reasons, so here is my situation:
<div class="col-md-4">
<ol class="albums">
<%= render #albums %>
</ol>
<%= will_paginate #albums %>
</div>
#album:
<li id="album-<%= album.id %>" class="listed_album">
<div class=row>
<aside class="col-md-6" id="album_cover">
<% if album.clips.any? %>
<%= link_to album do %>
<img src="http://img.youtube.com/vi/<%= album.clips.first.adress %>/mqdefault.jpg" height="110" width="178">
<% end %>
<% else %>
<%= link_to album do %>
<img src="http://img.youtube.com/vi/ksjfhskd4/0.jpg" height="110" width="178">
<% end %>
<% end %>
</aside>
<div class="col-md-6" id="album_info">
<p><span class="title"><%= album.title %></span></p>
<span class="likes">
<%= pluralize(Album.find(album_to_display).relationships.where(value: 1).count, "like") %> |
<%= pluralize(Album.find(album_to_display).relationships.where(value: -1).count, "dislike") %>
</span>
</div>
</div>
</li>
I would like to have the title in the top-center of its col and span.likes in the bottom-left (top and bottom relative to the height of the picture in the col to the left) but until now I was only able to move it with something like padding-right: 15px; for example. How do I need to adjust it, in order to make things like text-align: center; or float: bottom; work?
li.listed_album {
#album_info {
span.title {
text-align: center;
}
span.likes {
float: bottom;
}
}
}
Hard to tell without being able to see it on jsfiddle or codepen.. Have you tried this:
li.listed_album {
#album_info {
text-align: center;
}
span.likes {
float: bottom;
}
}
or just make #album_info a flexbox:
#album_info {
display:flex;
justify-content: center;
}
I'm working on a simple image gallery, and I suddenly noticed
a weird bug I can't figure out.
The page looks the way its supposed to when a user is logged in, however
once the user logs out, the image-specific CSS gets destroyed.
I'm using Rails 4 with Twitter Bootstrap gem
ERB/HTML
<div class="container">
<div class="row">
<% #projects.each do |project| %>
<div class="col-lg-4 col-md-3 col-sm-3 col-xs-12 prosjekt_ramme">
<div class="prosjekt">
<p class="prosjekt_content">
<%= project.content %>
<% if user_signed_in? %>
<%= link_to 'Slett', project, method: :delete, data: { confirm: 'Er du sikker?' } %> </p>
<% end %>
<%= image_tag(project.picture.url, class: "img-responsive project_image") %>
</div>
<hr>
</div>
<% end %>
</div>
</div>
CSS
.prosjekt {
background-color: #eee;
padding: 0;
text-align: center;
margin-bottom: 5%;
height: 350px;
img {
max-width: 100%;
max-height: 80%;
display: block;
margin: auto;
}
}
If I remove
<% if user_signed_in? %>
<%= link_to 'Slett', project, method: :delete, data: { confirm: 'Er du sikker?' } %></p>
<% end %>
The image-specific CSS stays destroyed, whether I'm logged in or not.
Got any idea what's going on?
You are closing your p tag within the if conditional. As a result, it never closes if the user is not signed in. This is probably what is messing up the styling. Try this:
<div class="prosjekt">
<p class="prosjekt_content">
<%= project.content %>
<% if user_signed_in? %>
<%= link_to 'Slett', project, method: :delete, data: { confirm: 'Er du sikker?' } %>
<% end %>
</p>
<%= image_tag(project.picture.url, class: "img-responsive project_image") %>
</div>
Or, if you don't want the link to be part of the paragraph:
<div class="prosjekt">
<p class="prosjekt_content">
<%= project.content %>
</p>
<% if user_signed_in? %>
<%= link_to 'Slett', project, method: :delete, data: { confirm: 'Er du sikker?' } %>
<% end %>
<%= image_tag(project.picture.url, class: "img-responsive project_image") %>
</div>
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;
}