This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 3 years ago.
I am trying to align my words with icon. I tried the methods from this site: Vertical alignment of text and icon in button
current state
My code:
<div class = "row">
<div class = "col-md-8">
<h3><%= link_to item.title, item , id: "font-colour" %></h3>
<p><%= if item.description.length > 70
item.description[0..70].gsub(/\s\w+\s*$/, '...')
else
item.description
end
%></p>
</div>
<%= link_to complete_item_path(item), id: "font-colour", method: :patch do %>
<i class="fa fa-square-o fa-2x align-center"></i>
<% end %>
<div class = "col-md-1">
<%= link_to item_path(item), id: "font-colour", method: :delete do %>
<i class="fa fa-trash fa-2x align-center"></i>
<%end%>
</div>
</div>
Adding display: flex;align-items: center; to row could be helpful:
<div class = "row" style="display: flex;align-items: center;">
<div class = "col-md-8">
<h3><%= link_to item.title, item , id: "font-colour" %></h3>
<p><%= if item.description.length > 70
item.description[0..70].gsub(/\s\w+\s*$/, '...')
else
item.description
end
%></p>
</div>
<%= link_to complete_item_path(item), id: "font-colour", method: :patch do %>
<i class="fa fa-square-o fa-2x align-center"></i>
<% end %>
<div class = "col-md-1">
<%= link_to item_path(item), id: "font-colour", method: :delete do %>
<i class="fa fa-trash fa-2x align-center"></i>
<%end%>
</div>
</div>
Related
I have this signup page snippet that I want to use. My issue is I am using devise with my rails app so I'm not sure how to replace the fields in the snippet with the ruby code while retaining styles.
This is the code from devise in my view
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<div class="field">
<%= f.label :email, :class=>'formlabel' %><br />
<%= f.email_field :email, autofocus: true %>
</div>
<div class="field">
<%= f.label :password, :class=>'formlabel' %>
<% if #minimum_password_length %>
<em>(<%= #minimum_password_length %> characters minimum)</em>
<% end %><br />
<%= f.password_field :password, autocomplete: "off" %>
</div>
<div class="field">
<%= f.label :password_confirmation, :class=>'formlabel' %><br />
<%= f.password_field :password_confirmation, autocomplete: "off" %>
</div>
<div class="actions">
<%= f.submit "Sign up" %>
</div>
<% end %>
<%= render "teachers/shared/links" %>
and this is the snippet
<div class="container-fluid stylish-form">
<h2 class="text-center">Stylish Signup Page Using Bootstrap</h2>
<div class="row mar20">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="inner-section">
<form method="POST" action="https://google.co.in">
<div class="mar20 inside-form">
<h2 class="font_white text-center">SIGN UP</h2>
<ul>
<li class="icon-holder dsp-flex">
<i class="fa fa-facebook "></i>
</li>
<li class="icon-holder dsp-flex">
<i class="fa fa-twitter "></i>
</li>
<li class="icon-holder dsp-flex">
<i class="fa fa-instagram "></i>
</li>
</ul>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-pencil "></i></span>
<input type="text" class="form-control" name="text" placeholder="First Name...">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope "></i></span>
<input type="email" class="form-control" name="text" placeholder="Email...">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock "></i></span>
<input type="password" class="form-control" name="text" placeholder="Password...">
</div>
<div class="footer text-center">
Get Started
</div>
</div>
</form>
</div>
</div>
</div>
<h2 class="text-center font_white">Thank You For Visiting This Snippet</h2>
</div>
Simply replace your the <input> tags in your snippet. with the <%= f.email_field :email, autofocus: true %> on the original forms. Add any other missing options like placeholders and such.
Compare the resulting HTML, ultimately it will be the same.
This is the code I have:
<div class="col-md-6 col-sm-6 col-xs-6">
<%- if devise_mapping.omniauthable? %>
<%- resource_class.omniauth_providers.each do |provider| %>
<%= link_to "Sign in", omniauth_authorize_path(resource_name, provider) %>
<% end -%>
<% end -%>
</div>
From the code above how can I change link_to "Sign in" with:
<button class="btn btn-facebook btn btn-lg btn-block"><i class="fa fa-facebook fa-2x"></i> | Connect with <br> Facebook</button>
So instead of "sign in" simple button, I will show my custom made Facebook button.
Answer: this is how i solved it
<div class="col-md-6 col-sm-6 col-xs-6">
<%- if devise_mapping.omniauthable? %>
<%- resource_class.omniauth_providers.each do |provider| %>
<%= link_to omniauth_authorize_path(resource_name, provider), class: 'btn btn-facebook btn btn-lg btn-block' do %>
<i class="fa fa-facebook fa-2x"></i>
|Connect with <br> Facebook
<% end %>
<% end -%>
<% end -%>
</div>
and it looks like this
when someone clicks on that,it gets redirected to the required path,which is omniauth_authorize_path(resource_name, provider)
for those who need the css code for this button here it is
.btn-facebook.btn.btn-lg.btn-block {
color: white;
background-color: DodgerBlue;
font-size: 1em;
&:hover {
color: white;
background-color: RoyalBlue;
}
}
I would appreciate if someone,would tell me how to make the "f" icon,to be in the center of the button.
Thank you
What I did:
<%= link_to raw('<span class="fa fa-facebook"></span> Ingresa con Facebook'), user_omniauth_authorize_path(:facebook), :class => 'btn btn-block btn-social btn-facebook form-control' %>
Im using the bootstrap-social gem and the font-awesome gem to style it exactly like facebook looks :P
https://github.com/gavinkflam/bootstrap-social-rails
Here is the code i have for my modal window it is located in views/devise/registration/_newfile.html.erb folder
<li><a data-toggle="modal" href="#normalModal" id="secondtry" class="btn btn-success btn outline">sign up</a></li>
<div id="normalModal" class="modal fade" data-toggle="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="panel panel-default">
<div class="panel-heading">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h1 class="modal-title">Signup to sharebox</h1>
</div>
<div class="modal-body">
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<div class="form-group">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, class: "form-control" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
This is the button that this form makes
When clicked it gives the proper modal window,which appears as a popup,and the screen in the background gets darker as it should,everything works fine.
Question: How to put this button in my navigation bar,in the header? which is located in views/layouts/_header.html.erb,(my
layouts/application.erb file calls this partial)
I tried to put in my _header partial this code
<nav>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "log in", user_session_path, id: "menu-overwritten-loggedout", class: "btn btn-success btn outline" %></li>
<li><%= render "users/registrations/newfile" %></li>
<% end %>
</ul>
</div>
</nav>
As you see i used <%= render "users/registrations/newfile" %>
and the form appeared literally in my navbar,when i click on sign up button
When it actually should appear in the main layout,so the button is in my header but the form must appear in the main body or layout.
how can i fix it?
thank you
I think you need to show the signup dialog anywhere in the site where the SignUp button exists in the navigation bar. So for this make these changes in the code:
<nav>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "log in", user_session_path, id: "menu-overwritten-loggedout", class: "btn btn-success btn outline" %></li>
<li><a data-toggle="modal" href="#normalModal" id="secondtry" class="btn btn-success btn outline">sign up</a></li>
<% end %>
</ul>
</div>
</nav>
And outside this nav where you body is rendered using <%= yield %> or in the container whatever your layout is using for the main body in that add this
<%= render "users/registrations/newfile" %>
And from this partial remove:
<li><a data-toggle="modal" href="#normalModal" id="secondtry" class="btn btn-success btn outline">sign up</a></li>
as you have added this in the nav bar.
I hope this will do the job. Basically what you are doing is writing the dialog code in the layout itself but outside the nav bar. In the body of you view. Not in header.
I am iterating through a database and displaying the results of each in two columns on the same row. Currently, the image is always displayed in the first column of every row. I would like to alternate this so on every other the image is on the right and the description on the left.
<% #guide.in_groups_of(2, false).each do |guide_row| %>
<% for guide in guide_row %>
<div class='row guide-row'>
<div class="col-md-6">
<%= link_to image_tag(guide.image(:large)), guide.image(:xlarge), :class => 'guide-image' %>
</div>
<div class="col-md-6 guide-list ">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href=" #info_<%= guide.id %>">
<h2 class='guide'><%= guide.title %></h2>
</a>
<h4 class='guide'>From <%= guide.date_starting.strftime("%a %b #{guide.date_starting.day.ordinalize}") %> to <%= guide.date_ending.strftime("%a %b #{guide.date_starting.day.ordinalize}") %></h4>
<div class='col-md-12'>
</div>
<div class="accordion" id="categories">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle btn glyphicon" data-toggle="collapse" data-parent="#accordion" href=" #info_<%= guide.id %>">
<i class='glyphicon glyphicon-info-sign info-icon'></i>
</a>
<% unless guide.extra_info.nil? %>
<%= link_to ' ', guide.extra_info, :class => 'glyphicon glyphicon-globe info-icon' %>
<% end %>
<div id="info_<%= guide.id %>" class="accordion-body collapse">
<div class="acccordion-inner">
<% if guide.description.empty? %>
<h4>No description available</h4>
<% else %>
<p class='guide-description'><%= guide.description %></p>
<% end %>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks in advance.
I am not sure how you are iterating through your rows, it's not really clear from the above.
But I would suggest you create 2 partials (small erb files), one for the even row and one for the odd row. Then based on your iterator, you would render either the even partial or the odd partial, each partial have the image and text swapped from each other.
Basically something like this: (not tested, but should give you the idea.
<%= #even_row? ? render 'shared/even_row' : render 'shared/odd_row' %>
to figure out which pair is even vs odd you can do something like this:
<% #guide.in_groups_of(2, false).each_with_index do |guide_row, index| %>
<%= index.even? ? render 'shared/even_row' : render 'shared/odd_row' %>
then you can use index.even?to determine which partial to render.
Hope that helps
Now I have the button with which, I can follow user, or un-follow.
Now when the target user is already followed. it's shown just like this.
Then the target user is not followed, it's shown just like this.
I'd like it to be shown 'following' when the target user is already followed.
Then when I bring mouse cursor over the button, the display should be changed to 'Un-Follow'.
How can I do that with bootstrap?
view
<% if user_signed_in? %>
<% unless user == current_user %>
<% if current_user.following?(user) %>
<%= link_to(unfollow_user_path(user), :remote => true, :class => 'btn') do %>
<i class="icon-remove"></i>
Un-Follow
<% end %>
<% else %>
<%= link_to(follow_user_path(user) ,:remote => true, :class => 'btn btn-primary') do %>
<i class="icon-ok icon-white"></i>
Follow
<%end%>
<% end %>
<% end %>
<% else %>
<%= link_to(new_user_session_path , :class => 'btn btn-primary') do %>
<i class="icon-ok icon-white"></i>
Follow
<%end%>
<% end %>
HTML
<a href="/user/1/follow" class="btn btn-primary" data-remote="true">
<i class="icon-ok icon-white"></i>
Follow
</a>
<a href="/user/1/unfollow" class="btn btn-primary" data-remote="true">
<i class="icon-remove icon-white"></i>
Un-Follow
</a>
UPDATE:
<a href="/user/1/unfollow" class="btn" data-remote="true" onhover="someFunction()">
<i id="Following" class="icon-remove"></i>
Following
</a>
Using the onHover event You can use jQuery to change the "class" attribute of the button you want to change the text too.
i.e.
<a href="/user/1/follow" onHover="someFunction();" class="btn btn-primary" data-remote="true">
<i id="Following" class="icon-ok icon-white"></i>
Following
</a>
someFunction() {
$('i#Following').attr("class", "icon-ok icon-white").innerText("Unfollow");
}
you get the picture hopefully.
Edit:
This is the full code that should fire the code in someFunction on mouse over.
<html>
<head>
<script type="text/javascript">
function someFunction()
{
alert("Hello");
}
</script>
</head>
<body>
<a href="/user/1/unfollow" class="btn" data-remote="true" onmouseover="someFunction();return true;" >
<i id="Following" class="icon-remove"></i>
Following
</a>
</body>
</html>