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.
Related
Is there a built-in Bootstrap 4 trick that will align these three to centre, in a line "on a large screen", with a small space between them, then place them over each other when displayed on a small screen?
<h4 class="h4">Follow Social Media</h4>
<div class="row">
<div class="col-6-lg col-4-md col-1-sm center-pills">
<ul class="nav nav-pills">
<li class="nav-tabs">
<a class="nav-link active social social_f" href="#">Facebook</a>
</li>
<li class="nav-tabs">
<a class="nav-link active social social_i" href="#">Instagram</a>
</li>
<li class="nav-tabs">
<a class="nav-link active social social_y" href="#">Youtube</a>
</li>
</ul>
</div>
</row>
I've tried adding custom css but it keeps falling apart and looks messy.
At the moment, the code above output this:
Is there a build in bootstrap 4 trick that will align these three to centre
One of the first tricks is to use Bootstrap classes that actually exist.
col-6-lg col-4-md col-1-sm classes don't exist.
The next best trick is to replace your nav-tabs class with nav-item because the nav-tabs class isn't designed to be used the way you attempted to.
The mx-auto class needs to be added to the column to center it.
Finally, adding nav-justified to the parent element will do the trick of spreading the pills evenly. And for padding, you can use responsive padding classes px-lg-3 p-md-2 p-1.
Click the "run code snippet" button below and expand to full page:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-12 col-sm-5 col-6 text-center mx-auto">
<h4 class="h4">Follow Social Media</h4>
<ul class="nav nav-pills nav-justified">
<li class="nav-item px-lg-3 p-md-2 p-1">
<a class="nav-link active social social_f" href="#">Facebook</a>
</li>
<li class="nav-item px-lg-3 p-md-2 p-1">
<a class="nav-link active social social_i" href="#">Instagram</a>
</li>
<li class="nav-item px-lg-3 p-md-2 p-1">
<a class="nav-link active social social_y" href="#">Youtube</a>
</li>
</ul>
</div>
</div>
</div>
Very simply, I put a drop down menu on my navigation bar that is in my _layout.cshtml page. It has a few items and drops down when I click on it as expected. So far so good! But when I reference Bootstrap at the start of the page the menu will no longer drop down. Bootstrap is stepping on something that is breaking my drop down menu. It appears that Bootstrap is not competely compatable with MVC. Does anyone have any idea of what the fix should be? I have tried this in both Chrome and Firefox. I am using Visual Studio 2017 with Bootstrap 4. Here is a sample of my _layout.cshtml page.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Bootstrap Reference</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/bundles/bootstrap")
</head>
<body>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
#Html.ActionLink("BootStrap Practice", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
Messages <b class="caret"></b>
<ul class="dropdown-menu">
<li>Inbox</li>
<li>Drafts</li>
<li>Sent Items</li>
</ul>
</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
Solved the problem by referencing Bootstrap near the end of the _Layout.cshtml page instead of the beginning of it. Not sure why that mattered, but I am new to Bootstrap and MVC, so in time I may have a better explanation.
You can try this:
Add class dropdown in the li element.
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Messages <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Inbox</li>
<li>Drafts</li>
<li>Sent Items</li>
</ul>
</li>
I had a similar issue wherin a bootstrap menu would not appear within a partially rendered view and adding the render tag at the end of the view fixed it.
In case I had a page that was partially rendering a view. The partial view was working perfectly on its own but once it was injected into another page the dropdown menu stopped working and there was zero errors or warnings in the console. Adding the Scripts.Render at the end of the partial view fixed it for some reason.
I am trying to use bootstrap's carousel inside an angular.dart component. Here is the html:
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol ng-repeat="pic in ctrl.pics" class="carousel-indicators">
<li data-target="#carousel" data-slide-to="{{ $index }}" ng-class="{ active: {{$first}} }"></li>
</ol>
<!-- Slides -->
<div ng-repeat="pic in ctrl.pics" class="carousel-inner">
<div class="item" ng-class="{ active: {{$first}} }">
<img src="{{ ctrl.pic.image }}">
<div class="carousel-caption">{{ ctrl.pic.title }}</div>
</div>
</div>
<!-- Controls -->
<a id="carousel-control-left" class="left carousel-control" href="#carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a id="carousel-control-right" class="right carousel-control" href="#carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
The prev/next controls don't work (maybe other things too), probably because the href attributes are wrong. I tried to fix them by updating the hrefs at run time, but I don't know how to enter a url pointing to an id that is inside shadow dom.
Alternatively, I tried to add event listeners that would use dart:js to call the carousel('prev') and carousel('next') bootstrap functions. This approach failed too because I don't know how to pass the shadow dom root reference from dart to javascript.
Any suggestions?
There may be two issues:
JavaScript tries to querySelect() an element and can't find it because it's hidden in the shadowDOM
you could change the JavaScript code
The CSS doesn't work because you haven't added applyAuthorStyles: true to your AngularDart component.
Currently Angular UI Bootstrap components are being ported to Angular Dart
see https://github.com/akserg/angular.dart.ui
Carousel is not yet working AFAIK
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 want to show a footer that contains a list with links, but when i add the links, the "li" becomes a button. How can i fix it?
Some code:
<div data-role="footer">
<ul data-role="listview">
<li>
<span>Google</span>
</li>
</ul>
</div>
Thanks!
Change your ul to data-role="none" , like this:
<div data-role="footer">
<ul data-role="none">
<li>
<span>Google</span>
</li>
</ul>
</div>
UPDATE:
You could try the following to get your desired style for the li while making it work like a link:
<ul data-role="listview">
<li style="cursor:pointer" onclick="window.location.href='http://www.google.com/'">Google</li>
</ul>