Following html results bad positioned caret. how can I force it to be in the same line with link text?
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
link text <span class="caret"></span>
</a>
Related
Short question: I have searched the internet for an answer but I can't seem to find one that fits my situation.
This is where I want to bind some asp-controllers and asp-actions:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="Account" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Inloggen</a>
<a class="dropdown-item" href="#">Kleding bekijken</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Uitloggen</a>
</div>
</li>
The dropdown item "Inloggen" should bind the asp-controller 'Account' and asp-action 'Inloggen'.
The dropdown item "Kleding bekijken" should bind the asp-controller 'Outfit' and asp-action 'OutfitsTonen'.
Looks like yours is the standard situation for Anchor Tag Helpers
<a class="dropdown-item"
asp-controller="Account"
asp-action="Inloggen">
Inloggen
</a>
I have a problem when I use the following code for adding and displaying:
<a href="javascript:void(0)" data-toggle="modal" data-target="#modalYear">
<span class="sub-item">Add year</span>
</a>
<a href="javascript:void(0)" data-toggle="modal" data-target="#ListYear">
<span class="sub-item">Listyear</span>
</a>
Nothing gets blocked but the problem comes when I want to use the edit option the admin menu stops scrolling, this is where the problem starts and also when I use this :
<a href="javascript:void(0)" wire:click="ShowReportModal('add')">
span class="sub-item">Add Year</span>
</a>
the modal will show up but when I close it the admin menu stops scrolling.
After so many tries I figured out that the problem is using wire:click to call the modal for adding, editing and displaying.
this is my component:
public function ShowReportModal($action)
{
if($action == 'add')
{
$this->dispatchBrowserEvent('ModalYearVisible') ;
}
else{
$this->dispatchBrowserEvent('ModalListVisible') ;
}
}
Here is the admin menu code:
<li class="nav-item">
<a data-toggle="collapse" href="#annee">
<i class="far fa-calendar-alt"></i>
<p>Scholar year</p>
<span class="caret"></span>
</a>
<div class="collapse" id="annee">
<ul class="nav nav-collapse">
<li>
<a href="javascript:void(0)" wire:click="ShowReportModal('add')">
<span class="sub-item">Add year</span>
</a>
</a>
</li>
<li>
<a href="javascript:void(0)" wire:click="ShowReportModal('list')">
<span class="sub-item">Years List</span>
</a>
</li>
</ul>
</div>
</li>
Any help would be appreciated and also why is this happening?
I am trying to implement the Bootstrap dropdown for a language selection menu. I thought I followed the format Bootstrap, and other tutorials, laid out but I just end up with a button and series of links next to or underneath the button.
Firstly, I have tried a the Bootstrap 4 documentation. I have tried all similar StackOverflow answers and the tutorials at https://www.w3schools.com/bootstrap4/bootstrap_dropdowns.asp as well as some Youtube videos. For whatever reason(I'm hoping someone can enlighten me) nothing has worked.
Here's a link to my fiddle for reference. https://jsfiddle.net/rescriba/9a7bmdkf/30/
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown button</button>
<div class="dropdown-menu" id="flagDiv" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" title="English" href="#">EN</a>
<a class="dropdown-item" title="Deutsch" href="#">DE</a>
<a class="dropdown-item" title="Française" href="#">FR</a>
<a class="dropdown-item" title="Italiano" href="#">IT</a>
<a class="dropdown-item" title="Español" href="#">ES</a>
<a class="dropdown-item" title="Português" href="#">BR</a>
<a class="dropdown-item" title="русский" href="#">RU</a>
<a class="dropdown-item" title="中国" href="#">SCN</a>
<a class="dropdown-item" title="日本" href="#">JP</a>
<a class="dropdown-item" title="한국의" href="#">KR</a>
</div>
</div>
You aren't including a bootstrap CSS theme in that JSFiddle. Is that your issue?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
Don't use W3 Schools, refer to the official Bootstrap docs. https://getbootstrap.com/docs/4.0/getting-started/download/
I'm trying to use Font Awesome stacked images in a list as described in the example page http://fontawesome.io/examples/
List:
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
</ul>
Stacked images:
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
I can't get images aligned correctly, as you can see in this fiddle:
https://jsfiddle.net/uqL4aLyj/
Does anyone know how to get it aligned correctly?
Thank you in advance
Max
This is happening because the .fa-stack class applies a height, width and line-height of 2em to the stacked set of icons. A quick way to ensure non-stacked icons are aligned with stacked icons is to treat your non-stacked icons as a one-icon stack themselves.
You can achieve this by changing your current markup of:
<li>
<i class="fa fa-camera-retro"></i>
text
</li>
To:
<li>
<span class="fa-stack">
<i class="fa fa-camera-retro fa-stack-1x"></i>
</span>
text
</li>
Modified JSFiddle demo.
The examples on the fontawesome page uses stacked images outside an ordered/unordered list. Separates them with a <br> tag.
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
First item<br>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
Second item
I read the question on how to get the dropdown to open on hover which was an excellent fix, however I would like to get the nav li to keep "open" class when going down into "dropdown-menu" ul. Here is a jsfiddle http://jsfiddle.net/someyoungideas/29txm/ for my problem.
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Help</a>
<ul class="dropdown-menu">
<li>New Item</li>
</ul>
</li>
</ul>
</div>
</div>
One way to address your concern is to make use of the twitter-bootstrap-hover-dropdown plugin found on github. The plugin is also one of the answers in the old question: https://stackoverflow.com/a/12851616/538962.
Note the use of data-hover="dropdown" to call the plugin.
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown"
data-delay="1000" data-close-others="false">Help</a>
Here is a working sample:
http://jsbin.com/xuwokuva/1