Develop Reference

Semantic overriding my dropdown menu making it big

I have a drop down menu that semantic-ui overrides as a semantic-ui drop down menu although i removed every class related to semantic-ui. It inserts a div to contain the whole and apply semantic styling.
My problem is that semantic drop down is wide and i need it to be small, so I tried many workarounds to change the size or remove semantic's control all together. The only thing that seemed to work was using Jquery to remove the elements that semantic inserts. Which is a lousy way to do it, and which also my team condemned.
To give you some context, I am changing the navbar to make it responsive, that's why i'm removing semantic classes from the navbar and using custom css classes and I'm using it with Vue.js
Here's the source drop down code:
<a style="padding:6px 0px !important;">
<select class="language-select" id="locale-dropdown" v-model="locale">
<option value="en">En</option>
<option value="ar">ع</option>
</select>
</a>
Below is the actual code i got by using inspect in chrome:
<a data-v-65731896="" style="padding: 6px 0px !important;">
<div class="selection ui dropdown" tabindex="0">
<select data-v-65731896="" id="locale-dropdown" class="language-select">
<option data-v-65731896="" value="en">En</option>
<option data-v-65731896="" value="ar">ع</option>
</select>
<i class="dropdown icon"></i>
<div class="text">En</div>
<div class="menu" tabindex="-1">
<div class="item active selected" data-value="en">En</div>
<div class="item" data-value="ar">ع</div>
</div>
</div>
</a>
Jquery code used to remove elements:
mounted () {
$('.ui.search.dropdown.selection').removeClass('ui search dropdown selection')
$('.search').remove()
$('.text').remove()
$('.menu').remove()
$('.dropdown.icon').remove()
}
css that should be applied -but doesn't-:
.language-select{
background-color:#fff;
padding: 5px 5px;
width: 20px;
}

The solution I found is as follows. The solution is to put the drop down menu inside a div with certain height and give the a class of 'fluid' to fill the container's size. And this would make it resizable.
<a style="padding:6px 0px !important;">
<div style="width: 70px">
<select style="background-color:#e3e3e3; padding: 5px 5px;" id="locale-dropdown" class="fluid" v-model="locale">
<option value="en">En</option>
<option value="ar">ع</option>
</select>
</div>
</a>
Credits go to Tarek AlQaddi

Foundation - Prevent dropdown from closing when clicking a select tag

I am using the foundation dropdown that comes out of the box and I have a select tag so a user can choose a language.
But when a user clicks on the select tag foundations dropdown menu closes not allowing them to pick a language.
so ideally I'd like them to be able to select a country and language then when they click on the button to then close the menu and obviously this will cause a refresh of the page.
I've looked into using the aria-autoclose attr in the documentation but I can't get my head round how or where to use it.
<li>
<a href="">
UK
<i class="icon-arrow_down"></i>
</a>
<ul class="menu country-selector">
<li class="country-selector__item">
<h6 class="country-selector__heading">Your Country</h6>
<select name="" id="" aria-autoclose="false">
<option value="">Germany</option>
<option value="">United Kingdom</option>
<option value="">France</option>
<option value="">Spain</option>
<option value="">Belgium</option>
</select>
</li>
<li class="country-selector__item">
<h6 class="country-selector__heading">Your Language</h6>
<select name="" id="" aria-autoclose="false">
<option value="">German</option>
<option value="">English</option>
<option value="">Italiano</option>
<option value="">Dansk</option>
<option value="">Norsk</option>
</select>
</li>
<li class="country-selector__item">
<button type="submit" class="small expanded button" aria-autoclose="true">CHANGE</button>
</li>
</ul>
Let me know if I need to explain anything in a better way.

/*
* Language Select Tag
*/
$('.country-selector select').on('click', function(event) {
event.stopPropagation()
})
I just needed to stop the event from bubbling on the element that I wanted to not close for anyone else wondering how to do this

Bootstrap navbar dropdown table without dropdown

How do you create the bootstrap dropdown without the actual button? I want to use this feature somewhere else.
Without bootstrap (from http://www.w3schools.com/tags/tag_select.asp):
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
I want what you get when you click on the button, but not the button. Bootstrap styling would be a plus.
image from: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_dropdown-menu&stacked=h

You basically want to trigger the dropdown without manually having to click on it. So you need to make use of window.onload in javascript to trigger the dropdown on page load.
I have also taken the liberty to use the Bootstrap dropdown as you wanted.
HTML
<div class="dropdown">
<!-- the id is important here -->
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" id="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
JavaScript
window.onload = function () {
$("#dropdown").dropdown('toggle')
};
Updated Codepen here

Why relative url ./ to home page not working

I modified my asp.net 2.0 website to be mobile friendly. On desktops and tablets, the navigation menu is a horizontal bar styled with the class mobilemenu, and on all other devices it is a dropdown menu, styled with class mobiledropdown. Everything works except on mobile devices with the dropdown menu, the home page menu item does nothing when selected, but all the other dropdown items navigate correctly. In both cases the url for home page is "./" but I also tried hardcoding it with the full http://www plus my domain and that also works for mobilemenu but not mobiledropdown.
I am thinking it must be related to the javascript which is used only for the dropdown.
The code is below. it is contained in an include file. the css hides or shows the appropriate menu based on media queries and that all works great.
The first div element is for larger devices and is the code that has been used for several years without any issues. I added the mobilemenu class for hiding it on smaller devices. I added the second div for showing the dropdown on smaller devices.
<div class="mobilemenu" style="width:90%; margin-left:5%; margin-right:5%; margin-top:0%; margin-bottom:1%; padding:0px;">
<div id="menu" style="text-align:center;width:100%;height:22px; padding:0px;">
<ul id="nav" style="line-height: 22px; width:100%; margin:0px; padding:0px;">
<li style="width:15%;">
<a class="custom" href="./">Home</a>
</li>
<li style="width:20%;">
<a class="custom" href="Order.aspx" >Order</a>
</li>
<li style="width:15%;">
<a class="custom" href="Company.aspx" >Company</a>
</li>
<li style="width:20%; ">
<a class="custom" href="Download.aspx" >Downloads</a>
</li>
<li style="width:15%; ">
<a class="custom" href="Blog.aspx" >Blog</a>
</li>
</ul>
</div>
<div id="menu2" style="text-align:left">
<select class="mobiledropdown" onChange="window.location=this.value">
<option value="./" selected="">Home</option>
<option value="Support.aspx">Support</option>
<option value="Order.aspx" >Order</option>
<option value="Company.aspx" >Company</option>
<option value="Download.aspx" >Downloads</option>
<option value="Blog.aspx" >Blog</option>
</select>
</div>
</div>

Remove the dot (.):
<select class="mobiledropdown" onChange="window.location=this.value">
<option value="/" selected="">Home</option>
{rest of your code goes here}
</select>

I found a solution, although I do not understand why it works so maybe someone could explain.
I changed the html code for the dropdown menu by inserting a "Menu" option as the first option and removed the selected attribute on the Home option. It seems illogical that I have to add a menu item that I dont want.
<div id="menu2" style="text-align:left">
<select class="mobiledropdown" onChange="window.location=this.value">
<option>Menu</option>
<option value="./">Home</option>
<option value="Support.aspx">Support</option>
<option value="Order.aspx" >Order</option>
<option value="Company.aspx" >Company</option>
<option value="Download.aspx" >Downloads</option>
<option value="Blog.aspx" >Blog</option>
</select>
</div

Hosting a select list within a Twitter BootStrap nested dropdown (IE 9 Specific)

I have a nested dropdown list created using the latest version of Twitter BootStrap. I need to have a select list containing many elements in the nested dropdown. I am able to get the nested dropdown working fine and the select option shows up no problem. Unfortunately in IE9 after clicking into the select list, moving the mouse over any item causes the dropdown to close. This problem does not manifest in other browsers. What's even more unlucky is that I must support IE7+ as part of this work.
There is a jsfiddle of the error at: http://jsfiddle.net/GtbSE/2/
Can anybody shed any light?

From your example I can change it to allow the dropdown within the 'channel' menu option in IE with a few minor changes to your fiddle: http://jsfiddle.net/amelvin/XxSTF/ - but you'll need to re-style.
I wonder if bootstrap was getting confused by the dropdown-menu items.
<span class="dropdown" id="filter-add">
<a href="#filter-add" id="addFilter" class="dropdown-toggle" data-toggle="dropdown" >
More
</a>
<ul id="Channels" class="nav nav-pills">
<li class="dropdown">
Channel
<ul class="dropdown-menu">
<li>
<select>
<option value="1" >LIst Item 1</option>
<option value="2" >LIst Item 2</option>
<option value="3" >LIst Item 3</option>
<option value="4" >LIst Item 4</option>
<option value="5" >LIst Item 5</option>
<option value="6" >LIst Item 6</option>
</select>
</li>
</ul>
</li>
<li><a>Cancel</a></li>
</ul>
</span>
$('.dropdown select').click(function(e) { e.stopPropagation(); });
$("#Channels").hide();
$("#addFilter").click(function() { $("#Channels").show(); });