The notification does not disappear when clicking the x.
I don't think there are any missing required css classes, so I'm not sure why this isn't working.
Before clicking x:
After clicking x:
application.html.erb
<html>
<body>
...
<% if flash[:notice] %>
<div class="alert alert-success alert-dismissible fade out in">
<button type="button" class="close" data-dismiss="alert">
<span>×</span>
</button>
<%= flash[:notice] %>
</div>
<% elsif flash[:error] %>
<div class="alert alert-danger alert-dismissible fade out in">
<button class="close" data-dismiss="alert">×</button>
<% flash[:error].each do |msg| %>
<li>
<%= msg %>
</li>
<% end %>
</div>
<% elsif flash[:alert] %>
<div class="alert alert-warning alert-dismissible fade out in">
<button type="button" class="close" data-dismiss="alert">×</button>
<%= flash[:alert] %>
</div>
<% end %>
</body>
</html>
Gemfile.rb
gem 'bootstrap-sass'
application.scss
#import 'bootstrap-sprockets';
#import 'bootstrap';
Is there anything else you can recommend that I try?
Solution.
Adding //= require bootstrap-sprockets to application.js.
I wasn't aware this was required in addition to #import 'bootstrap-sprockets'; in application.scss
Related
I am trying to copy this simple design into edit mode.
Here is the code displaying the image above :
<div class="user-description-container col-md-6 col-md-offset-3">
<div class="col-md-3">
<%= image_tag #user.image.standard.url, class: "user-picture img-circle" %>
</div>
<div class="user-description-box col-md-7">
<div class="user-name"><%= #user.full_name %></div>
<div class="user-stats">
<div class="user-stats-debates inline-flex"><b class="spacing-margin-right">
<%= #user.groups.length %></b><% if #user.groups.length == 0 %>
<p> débat</p><% else %><p> débats</p>
</div>
<% end %>
<div class="user-stats-followers inline-flex"><b class="spacing-margin-right"><%= #user.followers.length %></b> <%if #user.followers.length == 0%>
<p> disciple</p> <% else %><p> disciples</p>
<% end %>
</div>
</div>
<div class="user-description">
<%= #user.description %>
</div>
</div>
<div class="col-md-2 edit-profile">
<% if current_user == #user %>
<%= link_to(edit_user_path(#user),:class =>"edit-button") do %>
<i class="glyphicon glyphicon-pencil"></i>
<% end %>
<% end %>
</div>
</div>
I copied the main design of the page to the edit mode.
Unfortunately, here is what I get :
I am using the simple form gem with rails and I can't get bootstrap working properly. Here is my code on the edit mode :
<div class="container">
<div class="row">
<div class="user-description-container col-md-6 col-md-offset-3">
<%= form_for #user do |form| %>
<div class="user-upload-preview col-md-3">
<%= image_tag #user.image.standard.url, class: "user-picture img-circle object-fit-covered" %>
<div class="form-input">
<label class="btn btn-sm btn-primary image-browse-button" >
Choisir une photo
<span style="display:none;">
<%= form.file_field :image %>
</span>
</label>
</div>
</div>
<div class="user-description-box col-md-7">
<div class="user-name">
<%= #user.full_name %>
</div>
<div class="user-stats">
<div class="user-stats-debates inline-flex"><b class="spacing-margin-right">
<%= #user.groups.length %></b><% if #user.groups.length == 0 %>
<p> débat</p><% else %><p> débats</p>
</div>
<% end %>
<div class="user-stats-followers inline-flex"><b class="spacing-margin-right"><%= #user.followers.length %></b> <%if #user.followers.length == 0%>
<p> disciple</p> <% else %><p> disciples</p>
<% end %>
</div>
<div class="form-input inline-flex">
<%= form.text_field :description, placeholder: "Description", class: "form-control" %>
</div>
<div class="form-input save-edit">
<%= form.submit "Sauvegarder", class: "form-control profile-submit-button" %>
</div>
<% end %>
<div class="col-md-2">
</div>
</div>
</div>
</div>
</div>
Any answer would be much appreciated.
So in terms of the way you are using bootstrap you are supposed to input all the items that you want in a row which you did but it all the col-md- should add up to a total of 12 for it to be a complete row you have col-md-7 which you should add with an col-xs to make it full also in terms on how to make it like this I think this should suffice
here is some layout that looks like what you are trying to do
<div class="container">
<div class="row">
<div class="col-md-4">
IMAGE
</div>
<div class="col-md-8">
<div class="header">
<h1 class="page-header text-center">MY NAME</h1>
</div>
<div class="row">
<div class="col-md-6">
<h3 class="text-center">insert contents here</h3>
<center>
<div class="center">
<button class="btn btn-primary">BTN</button>
</div>
</center>
</div>
<div class="col-md-6">
<h3 class="text-center">insert contents here</h3>
<center>
<div class="center">
<button class="btn btn-primary">BTN</button>
</div>
</center>
</div>
</div>
</div>
</div>
</div>
It looks like you are inputting user information stay away from #user tags and information like .file and other such things use tags and set them with an ID and then be sure use javascript to manipulate them
I'm trying to make product images appear as a carousel in a bootstrap modal window.
As the code is now I'm only able to see the first image. At the moment there are three images for this product, uploaded with active admin.
I have tried else elsif and index ==1for the else. I have also tried other modification of in the code below.
I'm kind of stuck, can anyone take a look at this and advise me?
** UPDATE see context in comments from #Lucas Costa**
the problem I'm experiencing seems to be because of the CSS, most probably the .carousel-inner
Have anyone ever had similar problem?
<div class="container text-center">
<h1> Click Me </h1>
<!-- Large modal -->
<button class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<% #product.photos.each_with_index do |photo, index| %>
<div class="carousel-inner">
<% if index == 0 %>
<div class="item active">
<%= image_tag(photo.image.url(:large), class: 'img-responsive') %>
</div>
<% elsif index == 1 %>
<div class="item">
<%= image_tag(photo.image.url(:large), class: 'img-responsive') %>
</div>
<% else index == 2%>
<div class="item">
<%= image_tag(photo.image.url(:large), class: 'img-responsive') %>
</div>
<% end %>
</div>
<% end %>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</div>
The answer depends what you want.
option 1: you just want to handle the first case (note that here I'm using else)
<% #product.photos.each_with_index do |photo, index| %>
<div class="carousel-inner">
<% if index == 0 %>
<div class="item active">
<%= image_tag(photo.image.url(:large), class: 'img-responsive') %>
</div>
<% else %>
<div class="item">
<%= image_tag(photo.image.url(:large), class: 'img-responsive') %>
</div>
<% end %>
</div>
<% end %>
option 2: you want to handle the first and the second case (note that here I'm using elsif and else)
<% #product.photos.each_with_index do |photo, index| %>
<div class="carousel-inner">
<% if index == 0 %>
<div class="item active">
<%= image_tag(photo.image.url(:large), class: 'img-responsive') %>
</div>
<% elsif index == 1 %>
<div class="item">
<%= image_tag(photo.image.url(:large), class: 'img-responsive') %>
</div>
<% else %>
<%# Your other code here %>
<% end %>
</div>
<% end %>
Ok, by looking at your code the problem seems to be in the first lines of the <!-- Wrapper for slides -->
you are writing it like
<% #product.photos.each_with_index do |photo, index| %>
<div class="carousel-inner">
but it should be
<div class="carousel-inner">
<% #product.photos.each_with_index do |photo, index| %>
Otherwise the loop is inserting .carousel-inner to every image and that breaks the Carousel.
Just switch those two lines and it should work. And remember to also switch the </div> and the <% end %> at the bottom.
I am new to ruby on rails and trying to develop a web application, the problem is my css is not loading. I am using a free template and trying to connect it with the back end but nothing worked. Only simple html buttons/ texts are loading .
application.html.erb
<title>InstagramApp</title>
<%= stylesheet_link_tag "default", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "default", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Start Bootstrap</a>
<%= link_to "Instagram", root_url, class: "navbar-brand" %>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<%= link_to "New Post", new_post_path %>
</li>
<%- if current_user %>
<% else %>
<li>
<%= link_to "Logout", new_user_session_path , method: :delete, confirm: "Are you sure?" %>
</li>
<%= link_to "Login", new_user_session_path %>
<li>
<%= link_to "Register", new_user_registration_path %>
</li>
<% end %>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<% flash.each do |a,b| %>
<div class="alert alert-success"> <%= b %> </div>
<% end %>
<%= yield %>
</div>
</div>
</div>
<style>body{padding-top:70px;}</style>
And in app/assets/stylesheets there is bootstrap.css and bootstrap.min.css .
How do i load css in localhost?
If you have place all your css files in stylesheet folder it will call automatically .If it doesn't then do rake assets:precompile and restart your server .
If your using bootstrap elements, It will be better to install the bootstrap gem here. Easy to install and allows you to use all bootstrap components.
install the following gems:
gem 'bootstrap-sass', '~> 3.3.6'
gem 'sass-rails', '>= 3.2'
Change application.css to application.scss
app/assets/stylesheets/application.scss
In your application.scss add
#import "bootstrap-sprockets";
#import "bootstrap";
In app/assets/javascripts/application.js add
//= require jquery
//= require bootstrap-sprockets
Now you can use any bootstrap component, without needed to apply the style, this is a much better way to use bootstrap in your rails app.
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
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