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.
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 created a story using MDX. I want to demonstrate my inhouse-styles for buttons.
The story contains the following:
<a class="btn btn-primary">
Primary Button
</a>
When rendered, story book shows
<a class="sbdocs sbdocs-a btn btn-primary css-19nbuh3" target="_top">
Primary Button
<a>
As a result, my button does not display with the correct css.
How do I prevent storybook MDX from changing markup?
Put your markup inside of <Preview> tags:
<Preview>
<a class="btn btn-primary">
Primary Button
</a>
</Preview>
I have the following code inside my asp.net mvc core web application + bootstrap 4.0, which show a FAQ question:-
#foreach (var item2 in Model.OrderBy(a => a.Description))
{
<div class="card">
<div class="card-header" id="#item2.Id+'headingTwoa'">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse"
data-target="##item2.Id" aria-expanded="false"
aria-controls="collapseTwo">
#Html.DisplayFor(modelItem => item2.Description)
</button>
</h5>
</div>
<div id="#item2.Id" class="collapse" aria-labelledby="headingTwoa"
data-parent="#accordion" style="">
<div class="card-body">
#Html.Raw(item2.Answer)
</div>
</div>
</div>
}
but the problem i am facing is that the question description will spell out of screen on small sized screens, while the answer text will align to the screen size.. so not sure how i can force the button text to span multiple lines on small sized screens?
Edit-1:-
Here is a markup for a question which spells out of page layout on small sized screens:-
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#1004" aria-expanded="false" aria-controls="collapseTwo">
What services are being provided? What if my practice is already performing these services?
</button>
https://prnt.sc/t3ptin From Bootstrap's official website -> I just added text to the button and it automatically spans on multiple lines
Please, provide screenshots of an actual webpage and HTML code not from your ASP.NET but from the "elements" tab of the browser. I believe you just have a really big word.
If so, check this link(interactive) https://developer.mozilla.org/ru/docs/Web/CSS/word-break
Edit 1
Just copypasted your button into exact same component on the bootstraps website(https://getbootstrap.com/docs/4.5/components/collapse/#accordion-example) - https://prnt.sc/t3t7k6 Still works as expected.
It is still hard to give you a clear answer...
I will suggest two things:
try too add a btn-block class to your buttons
provide screenshots of what you have now and also screenshots of the computed props tab https://prnt.sc/t3t9rr 1) select your button 2) switch to computed tab 3) share all the props that browser applies to your button, maybe there is something custom
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
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...