I create a web application based on ASP .Net Core and Angular. I also use the Bootstrap library. I wanted to add an extension to Bootstrap - Bootstrap Essentials. The problem is that the classes from this library don't work for me. I downloaded the extension using the command npm install bootstrap-essentials . Then I added the styles and scripts file paths (in the angular.json file).
This is what the paths to the needed files in angular.json look like:
My goal was to use the library to make a side slide for mobile devices. I copied the code from the documentation (I didn't change anything).
Documentation code:
<nav class="navbar navbar-default navbar-fixed-top navbar-slide-nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle pull-right" data-toggle="offcanvas" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-slide offcanvas">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
According to the documentation, I should get such a bar after pressing the hamburger button:
But instead I get this:
It looks like the style and script file is not visible to Angular.
I looked at the folders and the files are actually there. The strange thing is that when using classes from pure Bootstrap everything works fine. This additional library does not work. I don't get any errors or warnings in the console on the browser. Additionally, when compiling with ng serve --open, it doesn't show any errors (so the given paths are valid because they exist). Any ideas what could be wrong?
I have read the documentation (bootstrap-essentials) of the Bootstrap extension in more detail. It turns out that this extension was written with Bootstrap 3 in mind. It is not compatible with 4 (Bootstrap 4 is in my project). I have downgraded to Bootstrap 3 and it actually works with that version.
Related
I have a Bootstrap v5 site I'm trying to make accessible. The navbar has the company logo that links to the home page, but also a nav link "Home" that also links to the home page. WAVE evaluation tool triggers a warning for "Redundant link" since they go the same place and are next to each other.
The code:
<nav class="navbar navbar-expand-lg" aria-label="Main navigation">
<div class="container">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="/">
<img src="/Images/company_logo.png" alt="Company logo">
</a>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link active" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/home/about">About</a></li>
<li class="nav-item"><a class="nav-link" href="/home/contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
The obvious solutions are:
Solution 1: Remove the logo link. But everything I read is that it's a best practice to have your logo be a home page link.
Solution 2: Remove the Home link. But for accessibility I hear you should include a Home link in the navigation.
Solution 3: Somehow combine the logo and Home nav-item into a single link, but not sure how Bootstrap would support that especially in mobile view.
Solution 4: Ignore it, it's a WAVE "Alert" not a "Warning".
I'm leaning towards Solution 1; it seems to be the most accessible.
What would you do?
Solution 1: It's pretty common to have a logo be a link to the home page. It's fine to keep it.
Solution 2: There is nothing in the Web Content Accessibility Guidelines (WCAG) that says you must have a "Home" link in the navigation menu. It's a pretty common thing to have but is not required. You could remove it if you wanted to but don't do it for any accessibility reasons. Remove it if it doesn't fit with your design, otherwise keep it.
Solution 3: Often there are elements between the company logo and the first menu item with the "Home" link (such as a login link or search button) so combining the links could be very messy. There's no need to pursue this route.
Solution 4: Absolutely, except it's a Warning, not an Alert. You had it backwards. WAVE is just being proactive and pointing out usability issues that could affect some users but it's not an accessibility (WCAG) failure. It's fine to ignore this Warning if you're happy with your design.
I created a site using Boostrap and WAMP Server and now I am trying to move it to a virtual server, so more people could use it.
The site looks fine, but when clicking a drop-down toggle for example, it doesn't display anything, it just goes to href="#"
My element looks like this:
<li class="dropdown" style="border-radius: 5px;">
<a target="_blank" href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:white;font-size: medium; background-color: #8A2BE2;border-radius: 5px;">Search <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span></a>
<ul class="dropdown-menu forAnimate" role="menu">
<li><a target="_blank" href="search_1" style="color:#601e9e;font-size: medium;border-radius: 5px;">Option 1</a>
</li>
<li><a target="_blank" href="search" style="color:#601e9e;font-size: medium;border-radius: 5px;">Other Options</a>
</li>
</ul>
</li>
Is there anything I need to change? I moved all the files and folders.
You probably missed the bootstrap JavaScript file. Make sure you add after your footer and it should be fine. Your code should have something like this:
<script src="/js/bootstrap.min.js"></script>
Make sure ti put your script after jQuery script. Additionally, you may have this script, but it can't find the file in the specified location. Check if the file exist on your server.
I am developing a translating system where I am using Google Translator API. So I need to have a dropdown list of languages where I have to pass the code of the languages to the API. I tried to do that using bootstrap, But it didnt work. I know how to do this part in HTML. But I preffer to do that in Bootstrap. This is what I have tried so far
<div class="btn-group"> <a class="btn btn-default dropdown-toggle btn-select2" data-toggle="dropdown" href="#">Select a Region <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#" >Spanish</a></li>
<li>Sinhala</li>
<li>Portuguese</li>
<li class="divider">Arabic</li>
<li>Quebec
</li><li>Ontario
</li><li>British
</li>
</ul>
</div>
Please give me an idea to proceed. Thank you in advance
Add a data-* attribute to your a tags. Attach a click event and get this data-* attribute and pass this to the API.
Ex:
<div class="btn-group">
<a class="btn btn-default dropdown-toggle btn-select2" data-toggle="dropdown" href="#">Select a Region <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a data-code="spanishCode" href="#" >Spanish</a></li>
<li><a data-code="sinhalaCode" href="#">Sinhala</a></li>
<li><a data-code="portugueseCode" href="#">Portuguese</a></li>
<li class="divider">Arabic</li>
<li><a data-code="quebecCode" href="#">Quebec</a></li>
<li><a data-code="ontarioCode" href="#">Ontario</a></li>
<li><a data-code="britishCode" href="#">British </a></li>
</ul>
</div>
Click Event
$('ul.dropdown-menu li a').on('click',function(){
var code=$(this).data('code');
//pass this code in your API request and get the response
});
Definition and Usage
The data-* attributes is used to store custom data private to the
page or application.
The data-* attributes gives us the ability to embed custom data
attributes on all HTML elements.
The stored (custom) data can then be used in the page's JavaScript
to create a more engaging user experience (without any Ajax calls or
server-side database queries).
The data-* attributes consist of two parts:
The attribute name should not contain any uppercase letters, and must be at least one character long after the prefix "data-"
The attribute value can be any string
Note: Custom attributes prefixed with "data-" will be completely ignored by the user agent
<div class="btn-group"> <a class="btn btn-default dropdown-toggle btn-select2" data-toggle="dropdown" href="#">Select a Region <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Spanish</li>
<li>english</li>
</ul>
</div>
jQuery
$(".langclass").on("click",function(){
var code = $(this).data("langcode");//call this code in your functin
callabelfunction(code);
})
I have use the Yeoman angular-fullstack generator and absolutely love it!
I'm trying to add a dropdown in the navbar.
I found the navbar controller in Client/Components/Navbar/navbar.controller.js and added items to the menu object. This works fine for individual pages, however I cannot find any syntax on how to add a dropdown menu!
I'm sure this is an easy question to answer but I am struggling to find any relevant documentation.
Cheers
Angular fullstack uses bootstrap. So you can use a bootstrap 3 drop-down menu where you would like your menu to be in the file that you found. If you go to http://getbootstrap.com/components/#dropdowns it's explained there.
angularfulstack may use bootstrap 3, however, for dropdown you need to use ui-bootstrap way of doing things.
<li ng-show="$ctrl.isLoggedIn()" class="btn-group" uib-dropdown is-open="status.isopen">
<a>
<span id="single-button" type="button" uib-dropdown-toggle ng-disabled="disabled">
<span class="glyphicon glyphicon-cog"></span>
</span>
</a>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li ng-show="$ctrl.isAdmin()" ui-sref-active="active"><a ui-sref="users"><span class="fa fa-address-card-o"></span> Users</a></li>
<li ng-show="$ctrl.isAdmin()" ui-sref-active="active"><a ui-sref="dashboard"><span class="fa fa-dashboard"></span> Dashboard</a></li>
<li ng-show="$ctrl.isAdmin()" class="divider"></li>
<li ng-show="$ctrl.isLoggedIn()" role="menuitem" ui-sref-active="active"><a ui-sref="company"><span class="fa fa-gears"></span> Company Information</a></li>
</ul>
</li>
I've got a project I'm working on and for some reason, I can't get the dropdowns to work on my menu. I've included the proper files which leads me to believe it's a problem in my code.
Here's my page in action: https://git.jobud9.com/ (try the dropdown on the right side of the menu. Also don't mind the prompt your browser will issue because my certificate approval's still pending.)
And here's the code powering it:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Account
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>hi</li>
</ul>
</li>
Thanks much in advance!
Your html code is correct. Maybe you forgot to attach a script? Look this dropdown js