I have such a block of elements:
<div class="dropdown">
<button class="btn" >
<i class="fa fa-search"></i>
<i class="fa fa-caret-down"></i>
</button>
<input type="search" class="search-field" placeholder="Search...">
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Now I want to display the dropdown-content when I am hovering just over button. .btn:hover .dropdown-content{ dislpay: block; } has no effect, however hovering over the whole block (dropdown) does work. It is also possible to wrap the whole block in an another block and pull the <input> to the outer block. But than I'm getting a similar problem with hovering over <input>.
My questions are now.
Why isn't it possible to display the block hovering over the button
Why hovering over <input> has no effect when it is in outer block (this
is not presented in the code above)
How can I fix it ?
There is no element .btn .dropdown-content. .dropdown-content is a sibling of .btn. So you can use following code. Please check...
.btn:hover + input + .dropdown-content {
display: block;
background: #000;
}
<div class="dropdown">
<button class="btn" >
button
<i class="fa fa-search"></i>
<i class="fa fa-caret-down"></i>
</button>
<input type="search" class="search-field" placeholder="Search...">
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Or you can use .btn:hover ~ .dropdown-content { this CSS also.
Fiddle
Related
I am building a BlogApp and I am trying to make upvote and downbutton , Like Stack Overflow shows BUT my buttons are not showing opposite one another.
They are showing like:
template.html
<!-- Upvote button -->
<span id="id_likes{{topic.id}}">
{% if user in topic.likes.all %}
<button name='submit' type='submit' value="like"><i class="btn fas fa-sort-up fa-6x fa-lg post-buttons " ></i></button>
{% endif %}
</span>
<!-- DownVote button -->
<span id="id_dislikes{{topic.id}}">
{% if user in topic.dislikes.all %}
<button name='submit' type='submit' value="dislike"><i class="fas fa-sort-down fa-6x"></i></button>
{% endif %}
</span>
When I use div instead of span then it shows like this:
It was showing border on buttons then I used:
<style>
button {
padding: 0;
border: none;
background: none;
}
</style>
Any help would be much appreciated.
If you check out the Fontawesome site for these icons (up and down), you'll see that they're designed as a pair, so that (when they're overlaid) the up arrow will be above the down arrow. If you use them separately, as you're doing, that means they're naturally high and low.
Basically, you've done nothing wrong - that's how these characters were designed to appear!
If you want to line them up, you'll need to manually alter the positions of one or both to get them as you want. You could use css top or padding, as you prefer.
I have removed your dynamic code and added one css class.
button {
padding: 0;
border: none;
background: none;
}
.btnOuter{
display: block;
overflow: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<span>
<button class="btnOuter" name='submit' type='submit' value="like">
<i class="fas fa-sort-up fa-6x fa-lg post-buttons" ></i>
</button>
</span>
<span>
<button class="btnOuter" name='submit' type='submit' value="dislike">
<i class="fas fa-sort-down fa-6x"></i>
</button>
</span>
I have the below script which I am trying to apply some CSS to, to overwrite the bootstrap defaults.
h2 class="sr-only">${Search Categories}</h2>
<div role="list" class="list-group">
<a role="link" ng-class="{active: !data.t}" class="list-group-item"
ng-href="?id=search&q={{data.q}}" aria-label="${All search results}">
<i class="fa fa-chevron-right"/><span class="m-l-sm">${All}</span>
</a>
<a role="link" ng-repeat="source in data.searchSources | orderBy:'order'"
ng-href="?id=search&t={{source.id}}&q={{data.q}}"
ng-class="{active: data.t==source.id}"
class="list-group-item" aria-label="{{source.name}} ${Search results}">
<i class="fa fa-chevron-right"/><span class="m-l-sm">{{source.name}}</span>
</a>
</div>
Current the issue currently is that when one of the links is selected its blue which is OOTB functionality for bootstrap list-group-item but I am having some trouble overwriting it.
I assume I need something like a:focus {background-color: Whitesmoke} or list-group-item:focus ... but neither of these seem to work.
What is the right direction?
you should overwrite the :visited not :hover
ex :
a:visited {background-color: Whitesmoke}
I need to make that the focus of the browser stays in a element even though the user keeps scrolling. Basically I have a dropdown menu with a scrollable feature so I need to keep the focus on it if the user leaves the pointer inside the menu and keeps scrolling.
It's than even possible? I'm new to html.
My html is (with some angular):
<ul ng-if="filter.isSearchListType && hasFilterValues(filter)" class="dropdown-menu scrollable-menu">
<li class="individual-search">
<input type="search" ng-model="searchInputText" class="form-group filter-input" placeholder="Nombre o E-mail" />
<i ng-show="searchInputText" class="fa fa-remove clear-search-icon" aria-hidden="true" ng-click="searchInputText = ''; $event.stopPropagation()"></i>
<i class="fa fa-search search-icon" aria-hidden="true" ng-click="$event.stopPropagation()"></i>
</li>
<li ng-repeat="filterValue in filter.values | searchInData:searchInputText">
<a href="#" ng-click="selectFilterValue(filter, filterValue.id)" ng-class="{ 'selected': isSelectedFilter(filter, filterValue.id) }">
{{filterValue.label}}
</a>
</li>
</ul>
My css is:
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
And the render of this is:
DropDown-Menu Scrollable
And last, but it's not so important, it's posible to keep a li pin or fixed and make the rest of the li scrollable??
Thanks!!
I have a link with a dropdown menu. Problem is that when I click on the link the dropdown opens but there is unwanted border line on the bottom of the link. When i hover on the dropdown link the unwanted bottm line hides. But whenever mouse out from the link the unwanted bottom line displays again.
Here is my code:
<div class="dropdown">
<i class="fa fa-gear fa-lg"></i> <span class="caret"></span>
<ul class="dropdown-menu pull-right" aria-labelledby="dropdownMenu2">
<li><i class="fa fa-align-left"></i> Reorder Pages</li>
<li><i class="fa fa-trash"></i> Delete</li>
</ul>
</div>
Demo is here:
Probably border, outline or underline.
Try this:
a.dropdown-toggle {
border: none;
outline: none;
text-decoration: none;
}
You can try and see if there is only one border bottom tho and cancel it only in case you want to use other borderlines.
In a:toggle Class have Text Decoration . Remove the text decoration.
a:hover {
color: #23527c;
text-decoration: underline;
}
Now you have
.dropdown-toggle:hover {
text-decoration: none;
}
just add
.dropdown-toggle:hover,
.dropdown-toggle:focus {
text-decoration: none;
}
in your css, it resolves issue!
Jsfiddle-example
I'd like to show a <h4> in line with a <button>:
<h4 style="display:inline-block;">headline</h4>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle btn-dropdown-flat" type="button">
<span>Button</span>
</button>
</div>
https://jsfiddle.net/punwaew1/1/
Result: the two elements are shown below each other. Why?
Because h4 and .dropdown are on the same level. Set display: inline-block for the elements on the same level to make them align.
h4,
.dropdown {
display: inline-block;
vertical-align: top;
margin: 0;
}
<h4>headline</h4>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle btn-dropdown-flat" type="button">
<span>Button</span>
</button>
</div>
The default value of display on a <div> element is display:block;. You have to set the display:inline-block; to the <div> too!
Simply add the following rule (https://jsfiddle.net/punwaew1/5/):
div.dropdown {
display:inline-block;
}
Add line style to <div class="dropdown" **style="display:inline-block;"**>
DEMO 1
OR use proper rows and column of bootstrap to get best results and consitency.
Here is your fiddle Just give display: inline-block to dropdown div
https://jsfiddle.net/sesn/punwaew1/4/
This can be done without any extra css. So in-order to make your button inline with your headline, place the button between the <h2></h2> heading tag.
Structure:
<h1>Headline
<button class="btn btn-default dropdown-toggle btn-dropdown-flat" type="button">
Button
</button>
</h1>
Have a look at your updated fiddle here