I'm creating a theme with Wordpress and Bootstrap and have included their 'dropdown' for a filtering element on the page. It works fine in all browsers, including when I scale them down to mobile size. But, when I visit the site from an iPhone or iPad the dropdown doesn't drop down, so to speak.
This is the markup that I have:
<div class="col-md-4 col-sm-6">
<div class="bdo-employee-filter dropdown">
<div class="dropdown-toggle filter-button" type="button" data-toggle="dropdown">
<div class="text">Filtrera</div>
<div class="arrow"></div>
</div>
<ul class="dropdown-menu" role="menu">
<li>Rensa filtrering</li>
<li>IT</li>
<li>Office of World Reign</li>
</ul>
</div>
</div>
I have tried following Bootstrap's example and can't really see what could be wrong. Nothing happens at all when I try to open the dropdown from an iphone or ipad. On the same page I use their navbar dropdown, and that works fine on all devices.
Related
I have a button Sign Up that loads in content from another file in the form of a Modal. When I click the button for the first time, the script works normally with no errors/warnings. However after the first time, if I dismiss the modal by clicking off of the element, clicking the Sign Up button again STILL WORKS, however it now throws a console error, stating $(...).modal(...).find(...).load(...) is not a function. In another one of my posts trying to solve this issue, I discovered the .load() method wouldn't work because I had the wrong version of jquery sourced in the file. But since then I have fixed that issue and the Modal now works, so I don't understand where this error is coming from.
Secondly, when the modal appears, it darkens the rest of the page (normal behaviour of the modal), if I try to dismiss the modal using the close button in the header, the modal disappears however the rest of my page is left darkened?/left out of focus? and the page becomes un-interactable...
Thirdly, I posted this as a seperate question due to the difference in nature: Bootstrap Modal messes up Carousel CSS
How do I fix these issues?
HTML file
<!-- NavBar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Land Power</a>
<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"></span></a>
</li>
<!-- <li class="nav-item ">
<a class="nav-link" href="contact.html">Contact Us<span class="sr-only"></span></a>
</li> -->
</ul>
</div>
<div class="d-flex justify-content-end">
<button class="signup btn btn-outline-success my-2 my-sm-0" type="button" linkFile="contact.html" data-toggle="modal" data-target="#theModal">Sign Up</button>
</div>
</div>
</nav>
<!-- Modal -->
<div class="modal fade" id="theModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Sign Up</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Modal content load script
<script>
$('.signup').on('click', function(e){
e.preventDefault();
$('.modal').modal('show').find('.modal-body').load($(this).attr('linkFile'));
});
</script>
I think the issue here is likely that you are including bootstrap from two sources. Check your code to make sure you are including bootstrap from only one source. I had a similar issue not too long ago, solved when I realized bootstrap was being automatically included from another CDN.
Here is a jsfiddle containing your code inside a bootstrap template. It works as you have described it to.
https://jsfiddle.net/fatchild/b04r7Ljo/3/
It is a good idea to take your code out of context into a tool like JSfiddle in order to isolate the bug. As you can see there is nothing wrong with the code you have supplied.
When I click the burger menu on a small screen nothing happens. Of course, it works fine on a large screen. I have tried several "navbar" configurations. The included code at least compiles. I had a target defined : class="navbar-burger is active" data-target="navbar-menu" and an id for class="navbar-menu" id = "navbar-menu"
What am I missing?
<!-- logo -->
<div class="navbar-brand is-large">
<a class="navbar-item" href="#">
<img src="assets/img/Grayscale_cloud.png">
</a>
<div class="navbar-burger is active" data-target="navbar-menu">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- menu -->
<div class="navbar-menu" id = "navbar-menu">
<div class="navbar-start">
<a class="navbar-item" routerLink="">Home</a>
<a class="navbar-item" routerLink="contact">Contact</a>
<a class="navbar-item" routerLink="networksupport">Network</a>
<a class="navbar-item" routerLink="managemnentreports">Management Reports</a>
</div>
</div>
</nav>
`,
I tried the code here to no avail. https://medium.com/#edigleyssonsilva/bulma-css-framework-with-angular-6-responsive-menu-and-navbar-burger-dff747ed2dc1
Several good examples here but I could not make them work with Bulma and Angular: I'm trying to use hamburger menu on bulma css, but it doesn't work. What is wrong?
Routing works as expected on a large browser. Burger menu appears on small screen but no appears when you press it.
there are a few things which might cause this for you - since you didn't paste a MCV example, i'll list them all
you didn't paste your toggle function for showing main-nav or burger nav... this is the toggle function (in app.component.ts) from the medium article link which you pasted
toggleNavbar() { this.navBurger.nativeElement.classList.toggle('is-active'); this.navMenu.nativeElement.classList.toggle('is-active'); }
to get this toggle function to work, you'd have to assign the names in app.component.html
you had <div class="navbar-menu" id = "navbar-menu"> ... which should have <div class="navbar-menu" id = "navbar-menu" #navMen>
and <a class="navbar-item" href="#"> .... </a> ...which should have
<a (click)="toggleNavbar()" role="button" #navBurger data-target="navbar-menu"> ... </a>
Also, we had to do npm install bulma
add the css in our angular.json:
"styles": ["node_modules/bulma/css/bulma.min.css" ],
you can check a working sample here
I have created my own modals from scratch and i want to prevent scrolling in the background when a modal is open, all i can find online is stuff about bootstrap which isn't helpful to me because my code doesn't automatically call 'modal-open' so
body.modal-open{
overflow:hidden;
}
Doesn't work for me.
<div id="wrapper3">
<a class="button" href="#openModal-4">
<img class="image"src="img/Animation.png">
<p class="text">Animation</p>
</a>
</div>
<div id="openModal-4" class="modalbg">
<div class="dialog">
X
<div class="popout">
<h1>2D Animation Project</h1>
<div>
<h2>Project Brief</h2>
<a class="modalfullimg"><img src="img/Design/moodboard.png"></a>
</div>
<h2>Sketches</h2>
<a class="modalfullimg"><img src="img/Design/initialsketches.png"></a>
</div>
</div>
</div>
Can you just modify the script you wrote to add a body class like 'modal-open' so you can apply the appropriate CSS? Seems like the easiest solution, if you're making it custom anyway.
This code was working yesterday and now it has suddenly stopped working, I haven't made any alterations to any of my html pages including this one. I am using flask bootstrap but my navbar is working fine and the border that comes up with "list-group-item" is there, it's just the colours that are missing from "list-group-item-success/info/warning".
<div class="col-md-8">
<ul class="list-group">
<a href="{{ url_for('listings.make_bst_listing') }}">
<li class="list-group-item list-group-item-success">
<h4><b>Buy Sell Trade</b> </h4>
<p>Post a listing for an item that you want to buy and/or sell and/or trade</p>
</li>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!--This code was working yesterday and now it has suddenly stopped working, I haven't made any alterations to any of my html pages including this one. I am using flask bootstrap but my navbar is working fine and the border that comes up with "list-group-item" is there, it's just the colours that are missing from "list-group-item-success/info/warning".-->
<div class="col-md-8">
<ul class="list-group">
<li class="list-group-item list-group-item-danger">
<a href="{{ url_for('listings.make_bst_listing') }}">
<h4><b>Buy Sell Trade</b> </h4>
<p>Post a listing for an item that you want to buy and/or sell and/or trade</p>
</a>
</li>
</ul>
</div>
This is working for me...however the html was rearranged so that the Anchor tag is inside of the LI tag. An anchor can't be inside of a UL tag as posted in question.
Using Bootstrap 4 for the first time, and I am trying to do something that was quite easy in Bs3: I want link items in my navbar to collapse to a hamburger menu when screen size is xs.
Now the documentation and another answer sort of touch on this, but I appear to be following the correct classes, and yet when the screen is sized XS, the link items do not collapse - they just disappear.
Here's the JSFiddle with CSS for the full view, but here's what I am doing with my navbar:
<nav class="navbar navbar-full navbar-light" style="background-color: #E4491C; padding: 0px;">
<p id="toptext">Test</p>
</nav>
<nav class="navbar navbar-full navbar-light" style="background-color: #002b52">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">TopDog</a>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar">
<ul class="nav navbar-nav">
<li class="nav-item"><a class="pull-sm-right navbar-brand2" href="#">Contact</a></li>
<li class="nav-item"><a class="pull-sm-right navbar-brand2" href="#">About</a></li>
</ul>
</div>
</div>
</nav>
So I am using toggleable class, I am specifying these as link-items; the only difference I can spot is that I am also using a pull-sm-right class, which should bring the links to the right side of the nav. Removing them did not fix the issue.
Question: Why is Bootstrap failing to display these links as a collapsible menu when I resize the page?
Because it's responsive menu. The links hides when it reaches 768 pixels and the navbar-header is only visible as well as Hamburger Menu Icon.
It looks like the Hamburger Menu Icon is missing too, that's because you didn't add it.
Use this code to add it:
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
☰
Good luck.