I am not able to display Arabic characters inside chosen drop down list, any body can help me please?
can you provide more info or snippet of your code?
there is actually no reason for HTML to complain about Arabic or any other language, it will just show what you input.
check this fiddle for example:
`<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Display
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>السلام</li>
<li>عليكم</li>
<li class="divider"></li>
<li>كيف</li>
<li>الحال؟</li>
</ul>
</div>`
http://jsfiddle.net/n4xfcvsw/100/
Related
I have downloaded a template for my app. I have to replace the menu links of this template with my project url links.
Code block of the menu link in template page::
<a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar">
<i class="fa fa-film"></i> <span class="d-none d-md-inline">
Item 2
</span>
</a>
I have to use this with::
#Html.ActionLink("Program", "Index", "karyakramModels")
I tried with the code ::
<a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar">
<i class="fa fa-film"></i> <span class="d-none d-md-inline">
#Html.ActionLink("Program", "Index", "karyakramModels")
</span>
</a>
I am not getting the CSS design with this code. Thank You!!!
As you have icon () inside the anchor tag, I would suggest #Url.Action() to use
<a href="#Url.Action('actionName', 'controllerName')" class="list-group-item d-inline-block collapsed" data-parent="#sidebar">
<i class="fa fa-film"></i> <span class="d-none d-md-inline">
Program
</span>
</a>
I have an angular 2 application that uses bootstrap 3.3.7 and jquery 1.12.4. The code is as follows:
<div class="btn-group">
<button type="button" class="btn dropdown-toggle"
title="More actions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
>
<span class="sr-only">More actions</span>
<i class="fa fa-ellipsis-v fa-lg" ></i>
</button>
<ul class="dropdown-menu dropdown-menu-right menu" role="menu">
<li>
<button *ngIf="itemViewModel.IsCopy !== true" type="button" class="btn dropdown-button" (click)="Copy($event)" title="Copy"
>
<i class="fa fa-files-o" (click)="Copy($event)"></i>
Copy
</button>
</li>
<li>
<button type="button" class="btn dropdown-button" (click)="Move($event)" title="Move">
<i class="fa fa-arrows" (click)="Move($event)"></i>
Move
</button>
</li>
<li>
<button *ngIf="itemViewModel.IsShare !== true" type="button" class="btn dropdown-button" (click)="Share($event)" title="Share">
<i class="fa fa-share " (click)="Share($event)"></i>
Share
</button>
</li>
<li>
<button type="button" class="btn dropdown-button" (click)="removeItem($event)" title="Delete">
<i class="fa fa-trash" (click)="removeItem($event)"></i>
Delete
</button>
</li>
</ul>
</div>
The dropdown menu appears fine. But clicking on the individual buttons in the list is not invoking the associated event handler. This issue is occurring on Safari browser on iOS and Chrome on Android. However, it works perfectly on Edge and Chrome on the laptop/desktop.
I have tried various solutions provided for earlier versions of Bootstrap on stackoverflow and github, but they aren't working.
How do I get this to work?
I resolved this issue by using the dropdown from ng2-bootstrap --> https://github.com/valor-software/ng2-bootstrap
I have a button which is using angular-ui-bootstrap dropdown and a vanilla text input. Once the page loads, I can freely enter text into the input box. However, after clicking the button, I can no longer focus on the input box: focus continually jumps back to the dropdown button.
How do I fix this problem, or have I hit a bug (and I should raise an issue)?
Here is a simple example using code directly from angular-ui-bootstrap:
https://plnkr.co/edit/JbXo3WfLgrHoXcyC2If4?p=preview
<div ng-controller="DropdownCtrl">
<!-- Single button -->
<div class="btn-group" uib-dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</div>
<input type="text">
</div>
FWIW, this seems to be the offending function call: https://github.com/angular-ui/bootstrap/blob/7a1d54c8c34265e0e1b7ac1b38f58b5867a2af49/src/dropdown/dropdown.js#L108
Looks like you found an already found bug. Someone raised an issue for the ui-dropdown focus already...please check this link: https://github.com/angular-ui/bootstrap/issues/6372 and also this one which describes your issue: https://github.com/angular-ui/bootstrap/issues/6364
The following item list code is inside of a navbar with navbar-fixed-top. The code below is output that was originally written as haml code.
Why does the "Manage Teams" item close the dropdown menu, but "Add sale ..." does not?
<li class="dropdown open" id="settings-drop">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">
<span class="glyphicon glyphicon-plus"></span>
</a>
<ul aria-labelledby="settings-drop" class="dropdown-menu" role="menu">
<li role="presentation">
<a data-remote="true" href="http://localhost:3000/sales/new?referer=notifications" role="menuitem">Add sale ...</a>
</li>
<li role="presentation">
Manage Teams
</li>
</ul>
</li>
It seems like the data-remote="true" hash is somehow interfering with bootstraps ability to detect the item being clicked on and close it.
I have this bit if code on my .cshtml page.
<a href='~/AudioFiles/#item.dateOfCall.ToShortDateString()_Store_Call.mp3'
class="btn btn-xs green tooltips" target="_blank" data-container="body"
data-placement="top" data-original-title="Play">
<i class="fa fa-play"></i>
</a>
I need to change the date to be 2014-02-19
instead of 2014/02/19
Current the link breaks because it is trying to go to 2014/02/19 which is invalid in windows file naming.
You could format the date like so:
<a href='~/AudioFiles/#item.dateOfCall.ToString("yyyy-MM-dd")_Store_Call.mp3'
class="btn btn-xs green tooltips" target="_blank" data-container="body"
data-placement="top" data-original-title="Play">
<i class="fa fa-play"></i>
</a>
For a full list of options check this page out http://msdn.microsoft.com/en-us/library/8kb3ddd4(v=vs.110).aspx