I am new to rails development. I am creating one Rails app. In which I am using Bootstrap 4.0.0 beta. I have one navbar in particular div, (not on whole page). But problem is, dropdown is not working when I click on it. For that first I have to click on nav-brand first, then I can click on dropdown and it works. But it changes whole placings of navbar. and again if I click on nav-brand dropdown stops working.
I also tried putting it on whole page there is also same problem.
I have ruby-2.4.1, rails-5.1.3, bootstrap-4.0.0beta
Here is my /assets/stylesheets/application.css code
*= require bootstrap
And this is /assets/stylesheets/welcomeindex.css code
*= require bootstrap
*= require application
body, .jumbotron{
height: 100vh;
min-height: calc(100vh - 155px);
//overflow: hidden;
}
.jumbotron{
margin-bottom: 0px;
}
#media (max-width: 991px) {
.jumbotron{
height: 100%;
}
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 40px;
line-height: 40px;
background-color: #f5f5f5;
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
}
This application.js file:
//= require jquery
//= require jquery_ujs
//= require popper
//= require turbolinks
//= require bootstrap-sprockets
//= require bootstrap
//= require_tree .
And this is welcomeindex.html.erb file:
<html>
<head>
<title> Fest Management </title>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= stylesheet_link_tag 'welcomeindex', media: 'all', 'data-turbolinks-track' => true %>
</head>
<body>
<div id="main-container" class="container-fluid">
<div class="row">
<div class="jumbotron col-lg-8 col-md-12">
</div>
<div class="jumbotron col-lg-4 col-md-12">
<nav class="navbar navbar-light bg-light">
<div class="navbar-header">
Brand
</div>
<div id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Messages <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Inbox</li>
<li>Drafts</li>
<li>Sent Items</li>
<li class="divider"></li>
<li>Trash</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<footer class="footer navbar-fixed-bottom">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
</div>
</div>
</body>
</html>
So where am I missing? It would be great help.
EDIT
after solving the issue of dropdown click, I am getting the issue with CSS of navbar. when i expand dropdwon, rather than poping out of navabar area, it increases the height of navbar and shows whole list in it.
here is the edited index.html.erb file. Along with the edits suggested I have completely removed CSS references and still it giving the same problem for CSS.
<div id="main-container" class="container-fluid">
<div class="row">
<div class="jumbotron col-lg-8 col-md-12">
</div>
<div class="jumbotron col-lg-4 col-md-12">
<nav class="navbar navbar-light bg-light">
<div class="navbar-header">
Brand
</div>
<div id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="dropdown show">
<a data-toggle="dropdown" class="dropdown-toggle" href="#" id="CategoryDD" aria-haspopup="true" aria-expanded="false">Messages <b class="caret"></b></a>
<ul class="dropdown-menu" aria-labelledby="CategoryDD">
<li>Inbox</li>
<li>Drafts</li>
<li>Sent Items</li>
<li class="divider"></li>
<li>Trash</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<footer class="footer navbar-fixed-bottom">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
</div>
</div>
Adding to application.js
//= require jquery-ui
right after
//= require jquery
worked for me like a charm.
Hopefully, this will solve someone's issue too.
You shouldn't add body and html tags in a view. You also shouldn't add
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
All of this is usually already defined in application.html.erb which is the "skeleton" of your views.
Regarding your issue:
According to the documentation, you're missing an id on the a tag.
<div class="dropdown show">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Try removing any custom classes you've added and simply use this snippet. Should work out of the box if you leave all their elements.
If it still doesn't work, try running this in your console:
$('.dropdown-toggle').dropdown()
And let us know if there is an error.
You have added bootstrap but not jquery. Since bootstrap depends on jquery you must also add it. Before Rails 5, jquery used to be default in Rails app but Rails team removed it after Rails 5. If you want to use it then you should add this gem to your Gemfile. Here is the link https://github.com/rails/jquery-rails
Same issue, but solved with this kind of doing...
Did you overwrite bootstrap CDN or install any kind of bootstrap things like example of:
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
If you're having this kind of in application.html.erb then kindly remove all kind of this...
and clear all cdn links and add again bootstap link
Thank you.
Related
I have a navbar dropdown in my header and one in the body of my page. Currently, the navbar dropdown works. However, when I click on the icon that I've set to trigger the other dropdown, nothing happens.
Navbar dropdown:
<nav class="navbar navbar-expand-lg">
<div class="collapse navbar-collapse" id="desktop-header">
<ul class="navbar-nav">
<li class="nav-item dropdown pe-4">
<a class="nav-link dropdown-toggle text-dark fw-bold" href="#" role="button" data-bs-toggle="dropdown">Log</a>
<ul class="dropdown-menu">
<li>...</li>
</ul>
</li>
</ul>
</div>
</div>
The other dropdown outside of the header:
<div class="dropdown d-inline">
<a href="#" role="button" data-bs-toggle="dropdown">
<span class="mdi mdi-18px mdi-flag-outline text-dark me-2"></span>
</a>
<ul class="dropdown-menu">
<li>...</li>
<li>...</li>
</ul>
</div>
Here's the console error I get when trying to open the second dropdown:
bootstrap.source.js:2174 Uncaught TypeError: Popper__namespace.createPopper is not a function
at Dropdown._createPopper (bootstrap.source.js:2174:1)
at Dropdown.show (bootstrap.source.js:2063:1)
at Dropdown.toggle (bootstrap.source.js:2041:1)
at HTMLAnchorElement.<anonymous> (bootstrap.source.js:2400:1)
at HTMLDocument.handler (bootstrap.source.js:411:1)
Here is how I've included Bootstrap JS, taken straight from the v. 5.2.x docs:
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"
type="application/json">
</script>
I've also tried including Popper and Bootstrap separately, again per the official docs.
Further, when I don't include type="application/json" the dropdown in the body (outside of the navbar) works but the navbar dropdown doesn't. Conversely, when I include type="application/json" the navbar dropdown works but the other one doesn't.
How do I get both dropdowns to work correctly?
In my Rails layout file, I had two sections -- content_for :head_javascripts and content_for :body_javascripts.
It was in :body_javascripts that I was trying to include Popper and Bootstrap per the documentation's instructions.
By adding the following lines:
<%= javascript_include_tag 'railsapp' %>
<%= javascript_include_tag 'libs/bootstrapapp' %>
to the :head_javascripts section and deleting :body_javascripts, I got both dropdowns to work.
Any insight into why exactly this solution worked and not when I tried including Bootstrap in :body_javascripts is welcome.
This is my first stackoverflow question..
I'm trying to install Boostrap 4 on Rails 5, I thought that everything was working but when I checked the website from mobile I noticed that the navbar is really small compared to the "usual" size (but at least it's correctly collapsed).
I followed the official "Bootstrap Ruby Gem"but it doesn't work.
This is the current website with the incriminated navbar (it's just the basic navbar from boostrap components):
https://warm-peak-79199.herokuapp.com/
Following my files:
GemFile:
gem 'bootstrap', '~> 4.0.0.beta2.1'
Application.scss:
// Custom bootstrap variables must be set or imported *before* bootstrap.
#import "bootstrap";
Application.js:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require turbolinks
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require_tree .
Application.erb.html:
<!DOCTYPE html>
<html>
<head>
<title>FlickerFeed</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</body>
</html>
Can anyone help me understanding what's wrong?
Thank you so much!
Isashi
Your site is missing the responsive meta tag. Add this to your layout inside the <head> tags:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
When i try to run the sample Starter template from the Twitter Bootstrap 2.3.2 get started page and i try to collapse the page to smaller size the navbar items don't collapse into the corner like they should in the demo but stay as pulled down pulldown.
i am using Rails with
gem 'bootstrap-sass' and
gem 'sass-rails', '~> 3.2.3' [in assets]
my application.js file includes:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
and my boostrap_and_overides.css.scss file includes:
#import "bootstrap";
body { padding-top: 60px; }
#import "bootstrap-responsive";
i love the idea of responsive bootstrap but cant get it to work
here is the main code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<h1>Hello, world!</h1
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
</body>
</html>
I figured out what the problem was. For the record, i was using the gem 'rails', '3.2.7' and when i updated to gem 'rails', '3.2.13' the problem was resolved.
I have bought a twitter bootstrap theme from wrapbootstrap.
I already have a functional rails application. Now, I want to design my application by integrating the bootstrap theme into my application.
I am new to this and I have no idea how to do it. After doing a lot of research on this, I found only a very few discussion regarding this issue. As for example I found this post: Implementing WrapBootstrap theme into Rails App
But, I am not totally sure how the assets from the theme will be applied to my application. I have copied all the assets under my project's app/assets/images, app/assets/javascripts and app/assets/stylesheets folders from the theme's corresponding folders. Then, I got several error when I tried to run my app locally. I deleted my application.css file, after that it started working. But, I can not see any design from the theme being applied yet. What should I do to make this theme work into my rails app?
First check this screencast:
http://railscasts.com/episodes/328-twitter-bootstrap-basics
then I would add a bootstrap gem like bootstrap-sass, then add the JS files through the gem by adding them to the manifest, something like this:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
then i would get the css files that you bought from wrapboostrap and place them in you assets/stylesheets folder, then add the necesary markup and clases to your app this is how ive done it before.
hope it helps
EDIT:
Markup:
Check the template you downloaded, lets start with the navbar for example
Code from template:
<header>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="container">
<a class="brand" href="index.html">Gaia Business</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Service</li>
<li>FAQ</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul id="dropdown-menu" class="dropdown-menu">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
<li>Dropdown 3</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Dropdown 4</li>
<li>Dropdown 5</li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!--/.container-->
</div><!-- /navbar-inner -->
</div>
</header><!--/header-->
Now you need to place yourself in your app, if the navbar shows in every view on your app, you should mention it on the layouts/application.html.erb something like this:
<!DOCTYPE html>
<html>
<head>
<title>Golden Green Chlorella</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render :partial => 'layouts/navbar' %>
<%= yield %>
</body>
</html>
and last, do your navbar partial
_navbar.html.erb:
<header>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar glyph"></span>
<span class="icon-bar glyph"></span>
<span class="icon-bar glyph"></span>
</a>
<div class="container">
<%= link_to "Your app", root_path, :class => "brand" %>
<div class="nav-collapse">
<ul class="nav">
<li class=<%= current_page?(static_index_path) || current_page?(root_path) ? "active" : "" %> > <%= link_to (t "navbar.home"), root_path%></li>
<li class=<%= current_page?(static_know_path) ? "active" : "" %>> <%= link_to (t "navbar.know"), static_know_path%></li>
<li class=<%= current_page?(static_buy_path) ? "active" : "" %>> <%= link_to (t "navbar.buy"), static_buy_path%></li>
<li class=<%= current_page?(static_faq_path) ? "active" : "" %>> <%= link_to "FAQ", static_faq_path%></li>
<li class=<%= current_page?(static_contact_path) ? "active" : "" %>> <%= link_to (t "navbar.contact"), static_contact_path%></li>
<!-- <li class="active">Home</li> -->
</ul>
<ul class="nav pull-right">
<li><%= link_to "English", static_english_path%></li>
<li><%= link_to "Español", static_spanish_path%></li>
</ul>
</div><!-- /.nav-collapse -->
</div><!--/.container-->
</div><!-- /navbar-inner -->
</div>
</header><!--/header-->
That was only for the navbar, now you need to do the rest, add the markup your template shows you to do, with all your app, its not an easy job, but thats how its done.
make sure that while installing twitter bootstrap you should add following gem into your Gemfile under "group :assets"
gem 'therubyracer'
gem 'less-rails'
gem 'twitter-bootstrap-rails'
then run bundle command.
Now, the theme "file_name.css" (file_name could be any) that u have downloaded just add it into "stylesheets" folder under app->assests->stylesheets
then open your application.css file in same folder there you will see
*= require_tree.
replace this line with
*= require "file_name.css"
NOTE: Don't forget to re-compile your assets or simply delete the content of your tmp/cache folder.
save it and reboot your server. it will apply your new theme.
I just started ruby on rails a few weeks ago, I'm currently building a blog using rails composer ( which uses twitter-bootstrap-rails gem ). I want to add the bootstrap carousel to my application view ( ie to my application.html.erb)
I already tried to add the classic html code from the twitter bootstrap documentation but I just get the right and left controller buttons with no pictures displayed.
Does somebody have the solution for me ?
PS : I currently use Sass for my bootstrap design.
EDIT 02-11-2013 => Here's my code hope you can find what my mistake is
<div class="container">
<!-- Carousel -->
<!-- consult Bootstrap docs at
http://twitter.github.com/bootstrap/javascript.html#carousel -->
<div id="this-carousel-id" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<a><img src="assets/images/1.jpg" alt="Antennae Galaxies" /></a>
<div class="carousel-caption">
<p>The Antennae Galaxies</p>
<p>Hubblesite.org »</p>
</div>
</div>
<div class="item">
<a><img src="assets/images/2.jpg" alt="Carina Caterpillar" /></a>
<div class="carousel-caption">
<p>Carina Nebula: The Caterpillar</p>
<p>Hubblesite.org »</p>
</div>
</div>
</div><!-- .carousel-inner -->
<!-- next and previous controls here
href values must reference the id for this carousel -->
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div><!-- .carousel -->
<!-- end carousel -->
<div class="content">
<div class="row">
<div class="span12">
<%= render 'layouts/messages' %>
<%= yield %>
</div>
</div>
<footer>
</footer>
</div>
</div> <!--! end of .container -->
</div> <!--! end of #main -->
<script>
$(function(){
$('#this-carousel-id').carousel();
});
</script>
</body>
</html>
EDIT 2 : And this is how it looks like on Chrome : http://s7.postimage.org/kvp5cq4tn/Capture_d_cran_11_02_13_18_46_2.png
instead of
img src="assets/images/1.jpg" alt="Antennae Galaxies",
Use the following image tag for rails:
link_to image_tag("1.jpg", :alt => "Slide1"), {:class => "img-responsive", :alt => "Responsive image"}
and there is no need to specify "assets/images" for showing the image folder. the 1.jpg is enough!
Does your app/assets/javascripts/application.js contain a reference to bootstrap?
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
My carousel as a reference:
<div class="span8 welcome-image">
<div id="myCarousel"
class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="/pictures/1.png">
</div>
<div class="item">
<img src="/pictures/2.png">
</div>
<div class="item">
<img src="/pictures/3.png">
</div>
<div class="item">
<img src="/pictures/4.png">
</div>
<div class="item">
<img src="/pictures/WordcloudInsight.png">
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
Bootstrap Carousel in Rails suddenly stopped working
check above link, also did you add this + is jquery loading
<script>
$(function(){
$('#myCarousel').carousel();
});
</script>