Language switcher with bootstrap

Question

I am trying to build a language switcher inside the navbar.

My code is the following (in _LoginPartial.cshtml)

using ( Html.BeginForm( "SetCulture", "Home", FormMethod.Post ) ) {
    @Html.AntiForgeryToken()
    <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                <img src="@selectedImgSrc" alt="@culture" />
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
                <li role="presentation"><a href="#" class="language" rel="it-IT"><img src="~/assets/images/i18n/it-IT.png" alt="Italiano" /></a></li>
                <li role="presentation"><a href="#" class="language" rel="en-US"><img src="~/assets/images/i18n/en-US.png" alt="English" /></a></li>
            </ul>
        </li>
    </ul>
}
<ul class="nav navbar-nav navbar-right">
    <li>@Html.ActionLink( "Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" } )</li>
    <li>@Html.ActionLink( "Sign in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" } )</li>
</ul>

@selectedImgSrc value is ~/assets/images/i18n/en-US.png

@culture value is en-us

However this code produce the following result

Which has a couple of problems:

• On the nav the image is not showed but only the text (en-US)
• The dropdown is too large and I dont like it. Is there any way to make it smaller?

Answer 1

On the nav the image is not showed but only the text (en-US)

I really can't see why the image isn't be shown on the nav, but I would suggest to you first check if it's included in the solution, then, inspect with your preffered developer tool what's the Html generated, and if it's properly generated, check the request about that image. If it's successfully requested, then your problem is in CSS.

Update:
Ok, I don't know exactly why I didn't see it before, but your images are using the tilde at the start of its path. While it's exactly what you need to specify for Asp.net that the path is absolute, in plain Html paths, it's just a common character, so it's looking for "http://example.com/~/assets/images/ ..." and not in the root of your domain. (There are some browsers/WebServers that can recognize it, but it's not a standard in URLs. Take a look in the most upvoted answer here: what is the use of "~" tilde in url? and also here: use of tilde (~) in asp.net path).

Also, It's a best practice to replace the hardcoded url with a Razor Helper like @Url.Content("~/assets/images/i18n/en-US.png"). Note that now I used the tilde, because the ASP.Net will translate to the correct absolute path.
*(I assumed that You are using razor because of @Html.ActionLink)

The dropdown is too large and I dont like it. Is there any way to make it smaller?

There is a rule for class "dropdown-menu" (.dropdown-menu), which has the property min-width set to 160px (min-width: 160px;).
So, it's just override this property with a new rule like:

Html:

<ul class="dropdown-menu UlLanguageMenu" role="menu">

In your CSS layout file:

ul.dropdown-menu.UlLanguageMenu{
    min-width: auto;
}