I just moved over to Bootstrap 4 and noticed some weird behavior in my app. All of the navbar links work fine on the first try, including the dropdowns, but after the linked page loads, all of the navbar links are dead. They come alive again when I reload whatever page I happen to be on.
My code:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/" style="color:white">
... some content
</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 dropdown">
...
</li>
<li class="nav-item dropdown">
...
</li>
</ul>
</div>
</nav>
Is this a known issue with Bootstrap 4, or am I seeing something else?
When I posted my original question, I didn't specify that this was a Rails 5 application.
Originally, I had tried to load bootstrap using the CDN links provided at the bootstrap site:
<head>
...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
...
</head>
<body>
...
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
...
</body>
I wrestled with this for some time and couldn't solve the problem. It seemed that none of my javascript-related bootstrap components (e.g. popovers) worked unless I reloaded the page.
In the end, I gutted all of this and opted for the bootstrap-ruby gem. When I followed the implementation instructions, everything worked fine.
I'd still be interested in knowing why the CDN solution didn't work.
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.
The examples on the Bootstrap 5 site only show non-LI nav items aligned to the right.
I have 4 menu items, 3 should be left aligned while the last should be pushed to the right.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
You could achieve this with the classes .me-auto on the left div or .ms-auto on the right div. This adds a margin between the two different navigation elements. Here a short demo, but you can see some other examples with a searchbar in the navbar-documentation.
Changed navbar-expand-lg to just navbar-expand so the example is easily visible without needing to go fullpage.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap navbar demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<!-- div class="navbar-nav"> -->
<!-- use me-auto here... -->
<div class="navbar-nav me-auto">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
<!-- ...or use ms-auto here -->
<!-- <div class="navbar-nav ms-auto"> -->
<div class="navbar-nav">
<a class="nav-link" href="#">Settings</a>
<a class="nav-link" href="#">Account</a>
<a class="nav-link" href="#"><span class="btn btn-outline-danger btn-sm">Logout</span></a>
</div>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>
Note that these changes would not have any visual effect on the mobile version of the navigation. Also, if you are using e.g. divs or lists (ul/ol) for the navigation will not make any visual difference with bootstrap. However, it could make an impact in SEO and accessability.
I'm using Bootstrap 4 to build my personal website. I'm CDN Bootstrap and FontAwesome. All of the icons are showing in the page but are not clickable. The code in my <head> is as follow...
<head>
<meta charset="UTF-8">
<!--Bootstrap CSS-->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="
{{site.baseurl}}/css/main.css">
<title>Gilberto Diaz</title>
</head>
The structure of the navbar is as follow...
<!--Navbar Image & Social Icons-->
<nav class="navbar navbar-toggleable-sm navbar-light bg-faded">
<a class="navbar-brand" href="{{site.baseurl}}"><img class="img-fluid" src="{{site.baseurl}}/images/profile_img_bw.png"
alt="Gilberto Diaz Profile Picture"></a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="brand-text" href="{{site.baseurl}}">Gilberto Diaz <span class="sr-only">(current)</span></a>
</li>
</ul>
<a class="nav-link" href="mailto:{{site.author.email}}?subject=feedback" title="Email me">
<i class="fa fa-envelope"></i>
</a>
<a class="nav-link" href="https://twitter.com/{{ site.twitter_username }}" title="Twitter">
<i class="fa fa-twitter-square"></i>
</a>
<a class="nav-link" href="https://www.linkedin.com/in/{{ site.linkedin_username }}" title="LinkedIn"><i class="fa fa-linkedin-square"></i></a>
</div>
</nav>
<!--End of Navbar Image & Social Icons-->
_config.yml is as follow...
twitter_username: diazgilberto
github_username: diazgilberto
google_plus_username: +GilbertDiazCasanas
linkedin_username: diazgilberto
Two things:
When I hover cursor should change automatically with anchor tags in bootstrap and is not doing that.
Nothing happens when you click in the social icon
My issue is with the collapsible block 'accordion' menu. I initially followed a tutorial online and it was only when I got to applying the collapsible blocks that I realised the tutorial was quite old and the scripts I had copied from the tutorial were:
with these scripts, the collapsible content simply cannot be set to be closed by default so data-collapsed="true simply doesn't work and the menus are open by default. After much googling it seems other people has the same issue and when upgrading to the latest script version the problem was sorted so when I updated to the current up to date versions i.e.:
The data-collapsed="true did work however every page now goes tiny on the screen. Please see the below screenshots to see what I mean.
What is wrong here, is it a css issue?
Using the older scripts I had this: http://www.magnetikmedia.co.uk/m/old_script.png
Using the newer scripts I had this: http://www.magnetikmedia.co.uk/m/new_script.png
I know the Galaxy note has a massive screen but using a mobile site emulator (to see sites on various handsets) the site looks fine on there (although now and again this morning when browsing the site on an emulator of an iphone 5 for example, the screen shrinks as per my screenshot so there must be a bug somewhere) The code from the head to the end of one page is here as the other pages are the same just with different content
<head>
<title>Page Title</title>
<link rel="stylesheet" href="mobile.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="home">
<div data-role="header1">
<div align="center"><img src="http://www.magnetikmedia.co.uk/m/images/magnetikmedia_header.png" width="90%"></div>
</div>
<div>
<div align="center"><img src="http://www.magnetikmedia.co.uk/m/images/welcome_banner.png" width="100%"></div>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider"><h3 align="center">Digital Design & Development</h3></li>
<li><a href="#about">
<div class="mobile_menu_hpage"></div>
<div class="list-text">About Us</div>
</a></li>
<li><a href="#getsocial">
<div class="mobile_menu_hpag"></div>
<div class="list-text">Get Social</div>
</a></li>
<li><a href="#services">
<div class="mobile_menu_hpag"></div>
<div class="list-text">Services</div>
</a></li>
<li><a href="http://www.magnetikmedia.co.uk/portfolio.htm">
<div class="mobile_menu_hpag"></div>
<div class="list-text">Portfolio</div>
</a></li>
<li><a href="http://www.magnetikmedia.co.uk/contact.htm">
<div class="mobile_menu_hpag"></div>
<div class="list-text">Contact Us</div>
</a></li>
</ul>
</div><!-- /content -->
<div id="footer1">
<div id="footer_left">
<div align="center"><img src="http://www.magnetikmedia.co.uk/m/images/fbook_foot.png" width="30" height="30" style="margin-right:10px;" ><img src="http://www.magnetikmedia.co.uk/m/images/twitter_foot.png" width="30" height="30" style="margin-right:10px;" ><img src="http://www.magnetikmedia.co.uk/m/images/blogger_foot.png" width="30" height="30" style="margin-right:10px;" ><img src="http://www.magnetikmedia.co.uk/m/images/linkedin_foot.png" width="113" height="30" style="margin-right:10px;" ></div>
</div>
<div style="clear:both;"></div>
</div>
</div>
<div align="center"><!-- /footer -->
</div>
</div><!-- /page -->
Add viewport meta tag as follows.
<meta name="viewport" content="width=device-width, initial-scale=1">
I have a small application that needs to have a professional looking Help/Manual section. The help would consist of:
HowTos
FAQ
References
I am wondering if there is a free (Easy to learn) tool that can help me produce these documents in HTML format? Any suggestions?
Thanks for the help
for a new MVC application we are designing right now we plan to use an external help site in a wiki form. There are wiki engines like mediawiki and others, the idea is to have context sensitive help ( different help page opened from different application pages ) and also to allow users to add content like formulas and examples afterwards.
The cool thing is that a wiki track changes and does the versioning for us and for free so help can grow being fully decoupled from our application source code and users can see who has added what if they want.
in our case, it's only an Intranet application so in fact we have no security issues in the internal network.
You have to create more or lesss that has MSDN for instance.
It has two columns
The firsrt column has list of descriptions
The second column is text + images + video + links.
https://learn.microsoft.com/en-US/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-3.1&tabs=visual-studio
Simplest approach is to use static files and resources. Try it.
In ASP .Net MVC you can create special _LayoutFAQ.cshtml and apply it to IFRAME pages.
The Index FAQ page could look like following
#{
ViewBag.Title = "FAQ";
Layout = "~/Views/Shared/_LayoutMain.cshtml";
}
<div class="container-fluid">
<h5 class="mt-1 text-center text-success mb-0">My mega FAQ</h5>
<hr class="mt-1" />
<div class="row">
<div class="col-sm-3 overflow-auto pl-0">
<ul class="">
<li><a onclick="NavigateIframe('#Url.Content("~/FAQ/Page1")');" href="#">Page 1</a></li>
<li><a onclick="NavigateIframe('#Url.Content("~/FAQ/Page2")');" href="#">Page 2</a></li>
</ul>
</div>
<div class="col-sm-9 border-left">
<div class="embed-responsive embed-responsive-16by9">
<iframe style="height:80vh!important;" id="pageContainer" class="embed-responsive-item" src=""></iframe>
</div>
</div>
</div>
</div>
<nav class="navbar fixed-bottom navbar-expand-lg navbar-light bg-light border-top border-secondary">
<button class="navbar-toggler navbar-toggler-right" 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">
<i class="fa fa-angle-left"></i> Back
</li>
</ul>
</div>
</nav>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
$(function () {
});
function NavigateIframe(url) {
event.preventDefault();
$("#pageContainer").prop("src", url);
return false;
}
</script>
}
#section head{
<style type="text/css">
</style>
}
But if your FAQ changes often you probably have to replicate backend and frontend like this https://learn.microsoft.com/en-US/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-3.1&tabs=visual-studio