Just two small problems, working on a school assignment to recreate a generic website, using bootstrap.
A) I've been hiding a search input field/submit button in the horizontal navbar when screen is < 820px and incorporating another dropdown list named "search" with a input field in the drop down which is fine.
But I'm trying to hide this Search dropdown until screen is < 820px and targeting this list with a class and display: none but it's still displaying. Is there anyway you can do this?
<li class="dropdown searchDropDown">
Search<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>
<input type="text" class="form-control searchBox" placeholder="Search">
<button type="submit" class="btn btn-default">Submit</button>
</li>
</ul>
</li>
my .searchDropDown {display:none} and have a media query for max-width 820px display: block
But the problem is it isn't hiding this list class at full page size.
B) when i click the search dropdown and try click into the search input field but it loses focus and rolls back up.
B) your click is propagating to the above li that has a click event attached to it, you could add a function like this (jQuery)
$('.searchBox').click(function(e){
e.stopPropagation();
});
if that doesn't work, make sure that you're actually clicking the input and not another element.
I'll get back to A in a minute
For question A use
#media screen and (min-width: 820px) {
.searchDropDown {
display: none!important;
}
}
Also, remember to close your img and input tags
Related
I'm sorry I'm reposting this but my previous question was marked as closed due to absence of minimal reproducible code. I have attached a stackblitz link with this one.
Original question - Bootstrap search-select dropdown but now when I try to search through the list and the dropdown opens on top, the list gets reduced and floats mid-air
Please don't close this one too. This is very important for my project and I have been stuck on this one for 16 hrs.
I have created a custom search select dropdown using the bootstrap dropdown in my Angular 8 project. The functionality works perfectly but the issue lies when the dropdown opens up on top of the element. Now when I search using the search box, the list gets updated accordingly and gets shortened but it keeps floating mid-air. You can see the issue in the GIF below.
Issue GIF - https://imgur.com/a/SeMVjns
As you can see in the first case when I search, the list gets shortened and it floats mid-air. What I want is when the list gets shortened, it still appear directly above the Expert dropdown button without any space in between.
Below is my HTML code:
<div class="dropdown h-100" [ngClass]="{'statusDropdownContainer': config.src != 'unavailability'}">
<a class="btn btn-white dropdown-toggle mb-2 statusFilterDropdown h-100 w-100 flex-middle" [ngClass]="{'btnDisable': disable, 'srcUnavailability': config.src == 'unavailability' }" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="text-truncate">{{config.src != 'unavailability' ? config.dropdownTitle + ':' : ''}} {{selectedValue ? selectedValue : 'All'}}</span>
</a>
<div class="dropdown-menu w-100 pt-0" aria-labelledby="dropdownMenuButton">
<input type="text" class="w-100 p-2 searchInput" [ngModel]="searchValue" (ngModelChange)="filterDropdown($event)" placeholder="{{config.placeholder}}">
<a *ngFor="let option of filteredList; let i=index" class="dropdown-item pointer text-contain" [ngClass]="{'alternateBackground': i%2 == 0 }" (click)="selectValue(option.name, option.unique_code)">
{{option.name}}
</a>
<div *ngIf="filteredList.length <=0" class="text-center text-muted mt-1">No {{config.user}} found</div>
</div>
</div>
What CSS changes do I need to make?
Stackblitz - https://stackblitz.com/edit/angular-ivy-nghkhp?file=src/app/app.component.html
Edit: I found the exact issue that's causing the problem. Bootstrap's dropdown uses popperJS to position the dropdown. PopperJS calculates the dropdown's position on the scroll event, so whenever the window scrolls, the dropdown's dimensions are recalculated (uses transform CSS). But in my case, since there is no scroll, the dimensions are not calculated and the dropdown has the same height as before the user searches something in the search box. But what I want is for the dimensions to be recalculated every time there is a change in the list's data. Any suggestions would be helpful. Thanks.
Bootstrap's dropdown uses popperJS to position the dropdown. PopperJS calculates the dropdown's position on the scroll event, so whenever the window scrolls, the dropdown's dimensions are recalculated (uses transform CSS).
One approach could be to give the height of the body slightly more than the viewport height and then programmatically trigger the scroll on ngModelChange
STACKBLITZ SOLUTION
You may add to CSS (You may also hide the vertical scroll-bar if not required with overflow-y: hidden;)
body {
min-height: 101vh;
}
And you might add scroll down 1px and scroll up 1px in your filterDropdown(e) method on ngModelChange as below to achieve the desired effect.
filterDropdown(e) {
console.log("e in filterDropdown -------> ", e);
window.scrollTo(window.scrollX, window.scrollY + 1);
let searchString = e.toLowerCase();
if (!searchString) {
this.filteredList = this.data.slice();
return;
} else {
this.filteredList = this.data.filter(
user => user.name.toLowerCase().indexOf(searchString) > -1
);
}
window.scrollTo(window.scrollX, window.scrollY - 1);
console.log("this.filteredList indropdown -------> ", this.filteredList);
}
I have a bootstrap dropdown menu. When I choose an item from the dropdown menu, the text of the button is changed to the text value of the choosen item (implemented by the help of this answer: https://stackoverflow.com/a/60029507/7061548).
I have to reload the window whenever an item from the dropdown menu has been chosen because I update the sessionstorage. This works fine after page reload. But I have a problem before reload. As soon as I click on an item from the dropdown menu, the menu button becomes fully green and the button text disappears just before the page is reloaded.
I found out that if I remove the class "btn-outline-success" from the button the problem seems to be gone. I have tried to apply css styles on various elements but didn't succeed in solving the problem.
Here is my code:
HTML:
<div class="m-dropdown">
<button type="button" class="btn btn-outline-succes m-btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
{{selectedColor}}
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#" (click)="setColorGreen('Green')">Green</a>
<a class="dropdown-item" href="#" (click)="setColorBlue('Blue')">Blue</a>
</div>
</div>
TS:
...
selectedColor: string;
ngOnInit() {
this.selectedColor = "Green";
}
setColorGreen(color: string) {
this.selectedColor = "Green";
...
window.location.reload();
}
setColorBlue(color: string) {
this.selectedColor = "Blue";
...
window.location.reload();
}
...
As soon as I click on an item from the dropdown menu, the menu button becomes fully green and the button text disappears just before the page is reloaded.
When you click the button Bootstrap fires some JS to trigger the dropdown.
It's using the .dropdown-toggle class and the data-toggle="dropdown":
<button type="button" class="btn btn-outline-succes m-btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
I'm guessing that Bootstrap is marking the button as disabled so it can prevent double-clicks. And I'm guessing that the style change you're seeing is a result of some class changes that Bootstrap is making in JS as part of the button's click function.
If you have any defined CSS on the button, it could be conflicting with what Bootstrap is trying to do.
See the effect of clicking on a button on Bootstrap's docs page. Does your change look at all familiar?
You can further test this in Chrome DevTools by looking at what fires when you click the button. Then put a breakpoint there and click the button.
Or you can use DevTools to force element state on the button to see what happens in different states (:active, :hover, etc).
I have the following menu implemented on a HTML/CSS theme running on Confluence.
The theme that I'm running provides options to activate drop-down menu's for all menu items by default. However, I'd like the dropdown menu to be displayed for only one of the menu items.
The theme doesn't provide the option to toggle dropdowns for specific menu items, which is why I'm forced to resort to custom CSS.
The HTML corresponding to the RELEASE NOTES menu item is as so --
<li id="rw_category_key_notes" data-name-key="notes">
<a class="rw_custom_url" href="http://localhost:8090/display/DDB/Release+Notes">
<span class="rw_item_name">RELEASE NOTES</span>
<span class="rw_item_dd rw_dropdown_btn"></span>
</a>
</li>
Also, adding the following custom CSS removes the dropdown menu for ALL menu items.
#rw_category_menu.rw_theme_underline ul.rw_category_items li a .rw_item_dd{
display: none;
}
I'd like CSS to conditionally not display the dropdown for the RELEASE NOTES menu item, displaying it only for LEARNING instead.
How would I go about this?
Thanks.
if you want to target only the first instance of element you can use
ul.your-ul-class > li {
// target only the 1st node instance
}
ul.your-ul-class li > li.second-intance {
// target only the 2nd node instance
}
this will only the first instance of the node
ex:
<ul>
<li> -- CSS implemented -- <li>
<li> -- CSS implemented --
<ul>
<li class="second-intance" > -- NO CSS implemented -- </li>
</ul>
</li>
<ul>
Thank you, #misorude!
That solved it, I applied --
#rw_category_key_notes .rw_dropdown_btn { display: none; }
to the theme's custom CSS as you suggested. By itself it doesn't hide the dropdown menu for the RELEASE NOTES menu item, but adding !important at the end makes it work.
#rw_category_key_notes .rw_dropdown_btn { display: none !important; }
Hi i just wanted some help trying to animate my navigation bar. I want the nav link to still be highlight after I have clicked on the page. So for example if I pressed a "home" button while on the home page the home button would be highlighted to just to show that your definitely on this page. Would use :target or ::active?
<div id="header-content">
<div class="hire"><h3>For Hire</h3></div>
<h1>Black Cab Tours</h1>
<nav class="cl-effect-8">
<ul>
<li><a onclick="tours.html" href="#tab1">Tours</a></li>
<li>About</li>
<li>Contact</li>
<li>Review</li>
</ul>
</nav>
</div>
create a css class like
.active {
background: #c2c2c2;
}
when u click on a HOME page link add this class to that li tag through java script here is the code
$('li').click(function(){
$(this).removeClass('active');
$(this).addClass('active');
});
or you can use gt(), lt() selector to remove active class from else li tags
Your best bet is to use Javascript (e.g. jQuery) to assist you, in native CSS :active will only style the current interaction state as it occurs, :target may be unreliable if you rely on routing, and the final option :focus will fail when clicking elsewhere.
By using jQuery you can more tightly maintain control over the application/removal of a selected state, e.g:
$('#header-content li').on('click', function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
This isolates the relevant elements, adds the class selected when you click one, and removes it from its siblings.
I have something like this:
http://jsfiddle.net/D2RLR/5649/
And it works fine for checking checkboxes from a dropdown menu in bootstrap. But the problem is that this segment of code:
<a href="#">
<input type="checkbox">
<span class="lbl"> Every day</span>
</a>
Will cause the page to reload if someone clicks on the text in the label ('Every day').
I don't want the reload behavior. I tried to change the anchor to a span tag, but it loses the style of onhover, highlighting the entire row together. Also tried to take out the '#' from the anchor and simply make it:
<a href=''>
but the checkboxes don't seem to be responsive to clicks.
Does anyone have any good solution to this?
To your dropdown-menu add the class dropdown-with-checkbox (or another more qualifying class name)
then add the following script:
$(function(){
$('.dropdown-with-checkbox a').click(function(e) {
// ?: Are we clicking a checkbox inside the a-tag?
if(e.target.type === 'checkbox') {
// Yes, but we do not want to prevent the default checkbox behaviour
return;
}
// Do not reload the page when clicking the a tag
e.preventDefault();
})
});
Sidenote 1:
Adding e.stopPropagation(); in the click handler will prevent clicks from propegating up to the 'dropdown' handler, closing the dropdown on click.
Sidenote 2:
You should also structure your checkboxes like this:
<label>
<input type="checkbox"> Label
</label>
This way, clicking the lable will toggle the checkbox.
You could also go with the span approach and create a css class which changes the cursor on mouse over.
.pointer {
cursor: pointer;
}
That way you keep the mouse over effect but don't have to worry about it linking somewhere or reloading the page.