I am trying to add css class in existing razor dropdownList. Here is my code
var webHelper = EngineContext.Current.Resolve<IWebHelper>();
var currencies = Model.AvailableCurrencies.Select(x => new SelectListItem
{
Text = x.Name,
Value = webHelper.ModifyQueryString(Url.RouteUrl("ChangeCurrency", new { customercurrency = x.Id }), "returnurl=" + HttpUtility.UrlEncode(HttpContext.Current.Request.RawUrl), null),
Selected = x.Id.Equals(Model.CurrentCurrencyId)
});
#Html.DropDownList("customerCurrency", currencies, new { onchange = "setLocation(this.value);" })
I have to make the dropdown list a bootstrap dropdownlist like this...
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="#">USD
<i class="fa fa-angle-down pull-right"></i>
</a>
<ul class="dropdown-menu">
<li>
<a>USD</a>
</li>
<li>
<a>BDT</a>
</li>
<li>
<a>EU</a>
</li>
</ul>
</li>
What can i do?
Does this work?
#Html.DropDownList("customerCurrency", currencies, new { onchange = "setLocation(this.value);", #class="dropdown-menu" })
Taking a short look at the Bootstrap documentation for dropdowns, it appears that you need to apply the class dropdown. However, the dropdown rendering of the default Html helper might not correspond to the dropdown rendering required by the Bootstrap dropdown, hence your class does not have the desired effect.
EDIT (following your MVC4 comment):
To mimic the functionality of the Bootstrap dropdown, you could try using this:
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="#">USD
<i class="fa fa-angle-down pull-right"></i>
</a>
<ul class="dropdown-menu">
#foreach(var currency in Model.AvailableCurrencies)
{
<li>#currency.Name</li>
}
</ul>
</li>
You could also try to use Html.ActionLink instead of the "static" a element.
Related
i have a side bar, where in it remains active if im on the screens first tab, if i switch to second tab, the url changes and the sidebar label wont be active.
How can this be solved. Please help.
HTML:
Side bar Code:
<a routerLink="/my-health/my-health-history" [ngClass] = "{'active' : true}" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}" class="list-group-item list-group-item-action justify-content-between"
id="nav-link-1" aria-haspopup="true" aria-expanded="false" aria-controls="nav-submenu-1">
<span><i class="icon-heart g-pos-rel g-top-1 g-mr-8"></i>{{ 'DashboardModule.MYHEALTH' | translate }}
</span>
</a>
TAbs code redirected to pages on click of side bar link:
<div class="myhealth mt7">
<ul class="nav nav-tabs menu">
<li>
<a class="active-link" routerLink="/my-health/my-health-history" routerLinkActive="active-link"
[routerLinkActiveOptions]="{exact: true}">myHealthHistory
</a>
</li>
<li>
<a routerLink="/my-health/my-lifestyle" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">myLifeStyle
</a>
</li>
<li>
<a routerLink="/my-health/my-family-health-history" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">myFamilyHistory
</a>
</li>
</ul>
</div>
If i am in myHealth History tab, then side bar will be active, if i shift to other 2 tabs then side bar wont be active
Using [ngClass] = "{'active' : true}" in tag.
The condition are:
Differ your current URL based on tab change.
ex1: http://test.com/tab1 and http://test.com/tab2
ex2:http://test.com/#tab1 and http://test.com/#tab2
Read url and find string like "tab1 or tab2"
add "Active" class based on this condition
You can check for the current active link in the sidebar component.
Sidebar html
<a routerLinkActive="active-link" [ngClass]="{'active-link': isActive()}" class="list-group-item list-group-item-action justify-content-between"
id="nav-link-1" aria-haspopup="true" aria-expanded="false" aria-controls="nav-submenu-1">
<span><i class="icon-heart g-pos-rel g-top-1 g-mr-8"></i>{{ 'DashboardModule.MYHEALTH' | translate }}
</span>
</a>
Sidebar ts
constructor(private router:Router) {
}
isActive(){
return ["/my-health/my-health-history","/my-health/my-lifestyle","/my-health/my-family-health-history"].includes(this.router.url);
}
Note : the code is written directly to Stackoverflow editor so there could be typo or syntatical error. Please correct yourself.
I am trying to add a bootstrap menu to my angular 6 project. This is the code
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">User</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Customer</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">OL User</a>
</div>
</li>
</ul>
The issue is, when I click customer link, URL redirect to the localhost:4200/#
and submenu is not opening. below code techniques, I used to project:
app.component.ts
import {HashLocationStrategy, LocationStrategy} from '#angular/common';
app.routing.module.ts
#NgModule({
imports: [RouterModule.forRoot(routes,{useHash: true})],
exports: [RouterModule],
})
Local redirects in Angular are usually done by using routerLink:
From the DOCS
<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" queryParamsHandling="merge">
link to user component
</a>
More information about Angular routing
You can use href if you want. But the biggest issue is that you haven't associated a component with a route.
Take a look at this example
I have used angular bootstrap dropdown successfully link.
But the problem it that the dropdown opens on the right side.
How can i make it to open on left?
Here is the markup and js i used from the given link.
Markup:
<div ng-controller="DropdownCtrl">
<!-- Single button with keyboard nav -->
<div class="btn-group" uib-dropdown keyboard-nav>
<button id="simple-btn-keyboard-nav" type="button" class="btn btn-primary" uib-dropdown-toggle>
Dropdown with keyboard navigation <span class="caret"></span>
</button>
<ul uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav">
<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>
</div>
js:
angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function ($scope, $log) {
$scope.items = [
'The first choice!',
'And another choice for you.',
'but wait! A third!'
];
$scope.status = {
isopen: false
};
$scope.toggled = function(open) {
$log.log('Dropdown is now: ', open);
};
$scope.toggleDropdown = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.isopen = !$scope.status.isopen;
};
$scope.appendToEl = angular.element(document.querySelector('#dropdown-long-content'));
});
please help
Add the class dropdown-menu-right to your <ul uib-dropdown-menu>.
By default, the drowpdown opens aligned to the left side of the parent and growing towards right side. When added the class dropdown-menu-right it will open aligned on the right side.
EDIT:
Angular Bootstrap with Bootstrap 4 allows a more fine-tuned placement of the dropdown, using the placement attribute (w/ possible choices of bottom-right, right or top-right).
Source: https://ng-bootstrap.github.io/#/components/dropdown/api
Vue-Bootstrap provides the right attribute (boolean).
Source: https://bootstrap-vue.js.org/docs/components/dropdown/#bd-content
React-bootstrap calls the attribute pullRight (boolean)
Source: https://react-bootstrap.github.io/components/dropdowns/#btn-dropdowns-right
How do you add a span tag inside of an a tag using Html.ActionLink? Is something like this at all possible?
I am using ASP.NET MVC 4 together with Twitter Bootstrap version 3.
I have a drop down menu and the HTML looks like this:
<ul class="nav navbar-nav">
<li class="#(Model.Equals("Home") ? "active" : "")">
<a href="#">
<span class="glyphicon glyphicon-home"></span> Home
</a>
</li>
</ul>
I was wanting to do the link like this:
<li>#Html.ActionLink("Home", "Index", "Home")</li>
But there is a span tag in the mix of things which makes it a bit more complex.
I can probably also use the following:
<a href="#Url.Action("Index", "Home")">
<span class="glyphicon glyphicon-home"></span> Home
</a>
Curious to know if the above is possible?
Your variant with Url.Action("Index", "Home") is correct and possible. Url.Action returns the url, so it can be used in a href.
For a new application we are using Bootstrap v3.0, which has the navigation menu defined as follows:
<div id="sidebar">
<ul>
<li class="active"><i class="icon-home"></i> <span>Dashboard</span></li>
<li class="submenu">
<i class="icon-beaker"></i> <span>UI Lab</span> <i class="arrow icon-chevron-right"></i>
<ul>
<li>Interface Elements</li>
<li>jQuery UI</li>
<li>Buttons & icons</li>
</ul>
</li>
<li class="submenu">
<i class="icon-th-list"></i> <span>Form elements</span> <i class="arrow icon-chevron-right"></i>
<ul>
<li>Common elements</li>
<li>Validation</li>
<li>Wizard</li>
</ul>
</li>...
This is currently sitting in a shared _Layout.cshtml, and don't currently see a need to move this into its own shared view.
The layout template consists of several static files with <li class="active"> hard coded for the corresponding menu item within that file.
Since I'm building this with MVC4, I would like to know how to dynamically set this, based on the view being displayed.
Not sure best practice on this. You could try something like this:
<li class="#( RouteVariable.CurrentController.Equals("Home") ? "active" : "")">
Or RouteVariables.CurrentAction may be of use.