in my navbar i have Event drop down menu(see print screen). so if i hover mouse on it, dropdown menu will appear. with help of dropdown-toggle disabled if i click on Event link i will go to events page. but i want to remove this disabled attribute when screen width less then 768px. i know, i can do it with js, but is there way to do it only with bootstrap? in code it looks like this
<a class="dropdown-toggle disabled" data-toggle="dropdown" href="http://127.0.0.1:8000/{lang}/events">Events
<span class="caret"></span></a>
so when screen width less then 768px i want to remove disabled attribute
Only pure-bootstrap, no-JS solution I can think of is to duplicate the element in the code, with the disabled version having class hidden-xs and the non-disabled version having class visible-xs-inline-block (or visible-xs-block, maybe? not sure which display property you want).
<a class="dropdown-toggle disabled hidden-xs" data-toggle="dropdown" href="http://127.0.0.1:8000/{lang}/events">Events
<span class="caret"></span></a>
<a class="dropdown-toggle visible-xs-inline-block" data-toggle="dropdown" href="http://127.0.0.1:8000/{lang}/events">Events
<span class="caret"></span></a>
You can use the hidden tags to hide on certain screen sizes: Visibility Breakpoints
So for <768 you would add the classes .hidden-xs and .hidden-sm
Related
I have a navigation bar in Bootstrap 4. It's fully functioning.
Now, I'm trying to reproduce that bar in another place of my code. And only one of the two items works !
I have tried to understand, and, suddenly I founded that, on the one that works, at the end of the line, with the Code Inspector, there is a box saying "event" : I don't know what that means and the non-working line of code doesn't have it !
And I don't find any difference in the code, css... :
Case 1 <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Equipes</a>
whithout event
Case 2 <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Utilisateur : {{ app.user.prenomNom }}</a>
with an event !
And only the line with the event works...
So, what added that event listener, and how can I reproduce it
I've understood my issue :
In my complete code, I had a logo, placed relatively, and in the initial place of this logo, it was over my links, and hid them !
I am using Bootstrap v4.3.1 with no modifications and I implemented a dropdown menu with the following markdown:
<li class="nav-item dropdown">
A
<div class="dropdown-menu">
<a class="dropdown-item nav-link text-dark nav-headlines" asp-area="" asp-page="/B">B</a>
<a class="dropdown-item nav-link text-dark nav-headlines" asp-area="" asp-page="/C">C</a>
<a class="dropdown-item nav-link text-dark nav-headlines" asp-area="" asp-page="/D">D</a>
</div>
</li>
I did no changes to the Bootstrap code whatsoever.
The displayed hoveron on all dropdown items appear to be rendered partly out of bounds to the right.
The problem is that the dropdown-item class gets this rule width: 100%; which if I disable in Firefox/Chrome it seems to solve the issue.
I tried going the not recommended way and going to the bootstrap.css and commenting out the width: 100%; rule. It did not work.
The problem is that the browser somehow imports the rule not from bootstrap.css but rather _dropdown.scss even though such a file does not exist...
How do I fix my dropdown items hoveron?
I am using .NET 6 if that matters.
I also tried setting the CSS with inline CSS added to the DOM using jQuery but it also seems to have no effect ($(".classnamehere").css("width","");)...
Is this a bug from Bootstrap's side???
How does Bootstrap generate .scss files which I can see in the browser without actually having those files?? I don't import anything from the internet for Bootstrap, everything is local.
Here's a picture to visualize it:
I am having issues formatting my drop down list. Code is as follows.
<div class="row" id="row02">
<div class="dropdown" id="meters-toggle-container">
<button class="btn btn-default dropdown-toggle" type="button" id="metter-dropdown-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Meters
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="meters-dropdown-ul" aria-labelledby ="metter-dropdown-btn">"></ul>
</div>
</div>
List Items are appended via Jquery depending upon an ajax request/response.
var html = "<li><a href='#'>" + meterNumber + "</a></li>"
$("#meters-dropdown-ul").append(html);
After reviewing several css options I have found one that seems to control the width of the drop down how I would like it. I am having dificulty of 1) containing the drop down inside of its row parent and 2) setting the menue to overflow so that it can be scrolled through.
As you can see in the picture bellow. The dropdown menu not onlyy runs past its parents boundaries about 50% of the page but runs off the page as well not allowing to view whats beyond.
I have a navigation bar that has two glyphicons from bootstrap the envelope and phone I want my phone icon to disappear when screen reaches <768px so I used the bootstrap class .hidden-xs but it doesn't work, any help? My code is
<span class="glyphicon glyphicon-envelope"></span>
<span class="glyphicon glyphicon-phone"; class="hidden-xs"></span>
That's not how you assign multiple classes to an element. There should only ever be one class="" attribute...
<span class="glyphicon glyphicon-phone hidden-xs"></span>
Separate the individual classes with a space.
I'm using the bootstrap dropdown component, which for me currently looks like this:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="btnSaukList" data-toggle="dropdown" runat="server" style="width: 100%">
Select a Saukville contact
<span class="caret"></span>
</button>
<ul id="ulSaukContact" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" runat="server" style="width: 100%">
<!--NOTE: Intentionally left blank; li's are generated by code behind to populate users from Sharepoint.-->
</ul>
<input id="inpSaukValue" type="hidden" />
</div>
(default code sample here - as you can see, mine isn't that different structurally)
My problem is that every time I click a dropdown item, a postback is fired (browser jumps to the top of the page). I'm pretty sure this is because the default code Bootstrap uses is <button> which always includes a postback.
According to other SO articles regarding this issue, it's recommended to use an <input> or <asp:Button> instead. Well I can't do either...
<asp:Button> does not support text between the opening and closing tags.
<input> does not support the data-toggle attribute, which it seems the dropdown needs.
I've also tried adding onclick="return false;" to my <button> to no avail.
I'm new to bootstrap and to an extent, ASP.net.
UPDATE:
It wasn't a postback, it was a link to "#", I was confused, sorry!
I think I was confused about this one, and labelled the problem as a postback - it wasn't. In Bootstrap's default code snippet, every dropdown item includes a link to "#". Clicking a link to that(<a href="#">) will send the browser to the top of the page. I thought this was a page refresh but it wasn't actually refreshed.
A quick fix is to replace href="#" with href="Javascript:;". If anyone has a better solution, do share...