In my AngularJS app, I have a service (or more technically, a provider) which contains a bunch of logic to insert DOM elements on the <body>.
It is quite cumbersome and hard to follow; for example, there are a lot of .append calls of one element into another and into another.
I would like to extract all the DOM code from the service into its own template file. The problem is, while I can find examples for how to do this with directives, I cannot figure out how this would work with a service.
NOTE that I need this to remain a service (as opposed to a directive) because I need it to overlay the entire screen and be callable from a variety of different controllers.
I've recreated my situation in a Plunkr and below, though the service's DOM logic is obviously simplified and shrunk
var app = angular.module('App', []);
app.provider('MyProvider', [function(){
this.$get = ['$window', function($window){
return function(){
var bodyElement = angular.element($window.document.body);
var myNewElement = angular.element('<div class="my-new-element">');
var someText = angular.element('<p>Here is some text<p>');
var xButton = angular.element('<button>X</button>');
xButton.on('click', function(){
myNewElement.remove();
});
myNewElement.append(someText);
myNewElement.append(xButton);
bodyElement.append(myNewElement);
}
}];
}]);
app.controller('MainController', ['$scope', 'MyProvider', function($scope, MyProvider){
$scope.amount1 = 1234.56;
$scope.symbol2 = 'USD$';
$scope.amount2 = '1234.56';
$scope.activateService = function(){
MyProvider();
}
}]);
<!doctype html>
<html ng-app="App">
<head>
<script type="text/javascript" src="https://code.angularjs.org/1.5.8/angular.js"></script>
<style>
.my-new-element {
width: 100%;
height: 50%;
background-color: green;
position: fixed;
top: 0px;
left: 0px;
}
button {
padding: 10px;
margin: 15px 0;
background-color: #bbb;
}
</style>
</head>
<body ng-app="">
<div ng-controller="MainController">
<span>Amount1: {{amount1 | currency:"USD$"}}</span><br/>
<span>Symbol2: <input ng-model="symbol2"/></span><br/>
<span>Amount2: <input ng-model="amount2"/></span><br/>
<button ng-click="activateService()">Activate The Service</button>
</div>
</body>
</html>
You could probably this into both a Directive and a Service. Say something like:
app.service('MyOverlayService', [function(...){}]);
app.directive('myOverlay', ['MyOverlayService', function(os){...}];
Where your service contained things like:
visible [boolean]
list of objects to display (menu items perhaps?)
etc
and your directive listened to those things:
Toggle display/visible based on {{os.visible}}
Listed all the data on in for example if this is a menu, you'd ng-repeat items in os.menus
You could then put your overlay directive on your highest template, and in each of your controllers inject MyOverlayService and do a:
os.setVisible(true); // or os.toggle()
I am trying to use Polymer and am struggling to figure out how to create my system in a Polymer-y way.
I'd like a left nav bar (a column on the left side), as shown in the example app docs. For the purposes of the explanation, the left nav bar shows a list of people and the main content window shows a list of books they own. When a person is selected, the main content window should be updated to show only that person's books.
Both lists should be dynamically populated via a network query and be able to be re-populated via a refresh button. It seems like this might complicate how I bind data, as the functions can't just live in a the shadowdom, as the nav bar and content lists need to be able to communicate.
From the day I've spent looking into Polymer, the nav bar (list of people) seems a natural candidate for <iron-selector>. The list of books sounds like <iron-list>. I'll need to have several instances of the book list, however--one for each person.
Should I create a <book-list> custom element for this, perhaps with <iron-list> in the template? Is it straightforward to create these <book-list> elements in response to selections made in <iron-selector>, as I won't know how to create them before querying for book owners? Any pointers on how to do this?
This sounds like a very basic use case, but I still don't know enough about Polymer to have any intuitions about the best way to do it. Any help would be much appreciated.
I eventually got this working. As a starting point, I leaned heavily on the example given in the docs that uses the app-drawer-template.
As suggested by a commenter above, using a router ended up being part of the answer. What was confusing me was that I wan't sure how to dynamically update both the <iron-selector> used in that example as well as the <iron-pages>. I wanted both to represent the same list of users. How would I keep these in sync, etc?
I ended up with three custom elements. Two were thin wrappers around <iron-selector> and <iron-pages>. The third was a <user-provider> element. The role of <user-provider> is to perform the request for the list of users and expose the result as a variable that the other two elements can interact with.
<user-provider> has only a refresh button. It has a property called users of type Array. In the ready() lifecycle callback and in response to clicking the refresh button, it updates the list of users. Note that reflectToAttribute and notify are both set to true, ensuring that it can indeed provide the list to the other elements. A stripped down version is shown below:
<dom-module id="user-provider">
<template>
<style>
:host {
display: block;
box-sizing: border-box;
</style>
<paper-fab icon="refresh" on-tap="refresh"></paper-fab>
</template>
<script>
Polymer({
is: 'user-provider',
properties: {
users: {
type: Array,
notify: true,
reflectToAttribute: true
}
},
refresh: function() {
this.refreshUsers();
},
refreshUsers: function() {
var _this = this;
// in reality I require a browserify module here
window.getUsersViaPromise()
.then(retrievedUsers => {
_this.users = retrievedUsers;
});
},
// Element Lifecycle
ready: function() {
this.users = [];
this.refreshUsers();
}
});
</script>
</dom-module>
My <user-selector> element takes an array as an argument. The thing that was stumping me here was that I didn't realize how simple it was to use a dom-repeat template inside of an <iron-selector>. I thought I'd have to wrap the repeats in a <div> or something, at which point the <iron-selector> would stop working. With dom-repeat I'm able to even use my special settings element and keep it always at the bottom of the list. The incoming variable corresponds to the element that is selected.
<dom-module id="user-selector">
<template>
<style>
:host {
display: block;
--app-primary-color: #4285f4;
--app-secondary-color: black;
}
</style>
<iron-selector
selected="{{incoming}}"
attr-for-selected="name"
class="drawer-list"
role="navigation">
<template is="dom-repeat" items="{{users}}">
<a name="view{{index}}">{{item.instanceName}}</a>
</template>
<a name="settings">Settings</a>
</iron-selector>
</template>
<script>
Polymer({
is: 'user-selector',
properties: {
incoming: {
type: String,
reflectToAttribute: true,
notify: true
},
users: {
type: Array,
reflectToAttribute: true
},
}
});
</script>
</dom-module>
<user-pages> is a thin wrapper around <iron-pages>. It works together with <user-selector> to update the content displayed in the main portion of the app.
<dom-module id="user-pages">
<template>
<style>
:host {
display: block;
box-sizing: border-box;
}
</style>
<iron-pages role="main" selected="{{incoming}}" attr-for-selected="name">
<template is="dom-repeat" items="{{users}}">
<user-summary
name="view{{index}}"
username="{{item.userName}}">
</user-summary>
</template>
<settings-view name="settings"></settings-view>
</iron-pages>
</template>
<script>
Polymer({
is: 'user-pages',
properties: {
users: Array,
incoming: {
type: String,
reflectToAttribute: true,
notify: true
},
}
});
</script>
</dom-module>
And, finally, my <my-app> element plumbs it all together.
<dom-module id="my-app">
<template>
<style>
:host {
display: block;
--app-primary-color: #4285f4;
--app-secondary-color: black;
}
app-header {
background-color: var(--app-primary-color);
color: #fff;
}
app-header paper-icon-button {
--paper-icon-button-ink-color: white;
}
.drawer-list {
margin: 0 20px;
}
.drawer-list a {
display: block;
padding: 0 16px;
line-height: 40px;
text-decoration: none;
color: var(--app-secondary-color);
}
.drawer-list a.iron-selected {
color: black;
font-weight: bold;
}
.drawer-list a.subroute {
padding-left: 32px;
}
</style>
<app-route
route="{{page}}"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-drawer>
<app-toolbar>My App</app-toolbar>
<start-app-button></start-app-button>
<user-provider users="{{retrievedUsers}}"></user-provider>
<user-selector incoming="{{page}}" users="{{retrievedUsers}}">
</user-selector>
</app-drawer>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div title>My App</div>
</app-toolbar>
</app-header>
<user-pages
incoming="{{page}}"
users="{{retrievedUsers}}">
</user-pages>
</app-header-layout>
</app-drawer-layout>
</template>
<script>
Polymer({
is: 'my-app',
properties: {
page: {
type: String,
reflectToAttribute: true
},
},
observers: [
'_routePageChanged(routeData.page)'
],
_routePageChanged: function(page) {
this.page = page || 'view1';
}
});
</script>
</dom-module>
Note in particular the way that <user-provider> is responsible for obtaining the list of users and exposing it just via a variable, allowing the other two elements to make obtain the data via basic databinding. That, along with the dom-repeat elements as immediate children of <iron-selector> and <iron-pages>, allowed this to be pretty straight forward once I started thinking of it in the Polymer way.
I'm trying to make a floating add button in my Polymer 1.0 app with pretty much similar functionality to Google Inbox's floating add button. First question then:
To achieve similar functionality, I'm currently using the paper-fab element and onmouseover and onmouseout js functions as follows:
<paper-fab id="addBtn" icon="add" class="fab red" onmouseover="hoverOver(this)" onmouseout="hoverOut(this)"></paper-fab>
<script>
hoverOver = function(srcElement) {
srcElement.querySelector("paper-material").elevation = 4;
};
hoverOut = function(srcElement) {
srcElement.querySelector("paper-material").elevation = 0;
};
</script>
Is this the recommended approach, or is there a slicker, more 'polymerized' way of accomplishing this?
You can achieve this by using css only.
paper-fab::shadow > paper-material {
#apply(--shadow-none);
}
paper-fab::shadow > paper-material:hover {
#apply(--shadow-elevation-8dp);
}
In the source code of the paper-material element, you can see that the elevation attribute is just for setting the the box-shadow style on the element. So instead of updating the attribute in js (which then sets the css), you can simply update the same thing directly in css.
<dom-module id="paper-material">
<style>
:host {
display: block;
position: relative;
#apply(--shadow-transition);
}
:host([elevation="1"]) {
#apply(--shadow-elevation-2dp);
}
:host([elevation="2"]) {
#apply(--shadow-elevation-4dp);
}
:host([elevation="3"]) {
#apply(--shadow-elevation-6dp);
}
:host([elevation="4"]) {
#apply(--shadow-elevation-8dp);
}
:host([elevation="5"]) {
#apply(--shadow-elevation-16dp);
}
</style>
Alternatively if you'd like to use html, ensure that the paper material has the attribute "animated" set to "true"
Another workaround is put in <style> directly in dom-module of your element.html
paper-button:hover{
#apply(--shadow-elevation-6dp);
}
May change the dp for elevation . Hope helps
I have no idea what this is even called so not sure where to start, hoping you all are able to point me in the right direction. I am trying to create something like this:
The idea being that when a user types something in and then separates with a comma, their input into this form field will turn into a little tag-like box that they can then delete with the x.
Any ideas on where to start?
Thanks!
Here is simple example: http://jsfiddle.net/9tzb4/
HTML:
<form>
Tags:
<div class="tag_field">
<input type="text">
<input type="hidden" name="tags">
</div>
<br>
<input type="submit" value="Submit">
</form>
CSS:
.tag_buttons {
position: absolute;
}
.tag_buttons div {
display:inline-block;
margin: 2px;
border: 1px solid #666;
padding: 1px;
}
.tag_field input[type=text] {
padding: 5px;
width: 300px;
border: 1px solid #666;
}
JavaScript:
$(".tag_field").each(function() {
var buttons = $("<div/>");
var input = $(this).find("input[type=text]");
var output = $(this).find("input[type=hidden]");
var update_padding = function() {
input.css("padding-left", buttons.width() + 2);
};
setInterval(update_padding, 300);
$(this).prepend(buttons);
buttons.addClass("tag_buttons");
buttons.css({ left: input.offset().left + 1,
top: input.offset().top + 2 });
input.bind("keyup change paste", function() {
var i = input.val().indexOf(",");
if (i >= 0) {
var new_tag = input.val().substr(0, i);
input.val(input.val().substr(i+1));
buttons.append("<div id='button'><span class='value'>"+new_tag+"</span> <span class='close'>(x)</span></div>");
}
});
var form = $(this).closest("form");
if (form.length > 0) {
form.submit(function() {
var v = [];
form.find(".tag_buttons div").each(function() {
v.push($(this).find(".value").html());
});
output.val(v.join(","));
return false;
});
}
});
$(document).on("click", ".tag_buttons span.close", {}, function(e) {
$(e.target).closest("div").detach();
});
Check this out. http://davidwalsh.name/dw-content/jquery-chosen.php This is the things I guess will perfectly suite your application.
Check out the amazing jQuery chosen, which - among other things - does exactly what you're looking for.
select2 is a similar plugin, and it also allows you to add your own tags (as well as use an AJAX source).
Update from the select2 docs:
Note that when tagging is enabled the user can select from pre-existing tags or create a new tag by picking the first choice which is what the user has typed into the search box so far.
You may find the jQuery Tags Input Library helpful. It gives you something like this
The issue:
Some of the items in the select require more than the specified width of 145px in order to display fully.
Firefox behavior: clicking on the select reveals the dropdown elements list adjusted to the width of the longest element.
IE6 & IE7 behavior: clicking on the select reveals the dropdown elements list restricted to 145px width making it impossible to read the longer elements.
The current UI requires us to fit this dropdown in 145px and have it host items with longer descriptions.
Any advise on resolving the issue with IE?
The top element should remain 145px wide even when the list is expanded.
Thank you!
The css:
select.center_pull {
background:#eeeeee none repeat scroll 0 0;
border:1px solid #7E7E7E;
color:#333333;
font-size:12px;
margin-bottom:4px;
margin-right:4px;
margin-top:4px;
width:145px;
}
Here's the select input code (there's no definition for the backend_dropbox style at this time)
<select id="select_1" class="center_pull backend_dropbox" name="select_1">
<option value="-1" selected="selected">Browse options</option>
<option value="-1">------------------------------------</option>
<option value="224">Option 1</option>
<option value="234">Longer title for option 2</option>
<option value="242">Very long and extensively descriptive title for option 3</option>
</select>
Full html page in case you want to quickly test in a browser:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dropdown test</title>
<style type="text/css">
<!--
select.center_pull {
background:#eeeeee none repeat scroll 0 0;
border:1px solid #7E7E7E;
color:#333333;
font-size:12px;
margin-bottom:4px;
margin-right:4px;
margin-top:4px;
width:145px;
}
-->
</style>
</head>
<body>
<p>Select width test</p>
<form id="form1" name="form1" method="post" action="">
<select id="select_1" class="center_pull backend_dropbox" name="select_1">
<option value="-1" selected="selected">Browse options</option>
<option value="-1">------------------------------------</option>
<option value="224">Option 1</option>
<option value="234">Longer title for option 2</option>
<option value="242">Very long and extensively descriptive title for option 3</option>
</select>
</form>
</body>
</html>
For IE 8 there is a simple pure css-based solution:
select:focus {
width: auto;
position: relative;
}
(You need to set the position property, if the selectbox is child of a container with fixed width.)
Unfortunately IE 7 and less do not support the :focus selector.
I did Google about this issue but didn't find any best solution ,So Created a solution that works fine in all browsers.
just call badFixSelectBoxDataWidthIE() function on page load.
function badFixSelectBoxDataWidthIE(){
if ($.browser.msie){
$('select').each(function(){
if($(this).attr('multiple')== false){
$(this)
.mousedown(function(){
if($(this).css("width") != "auto") {
var width = $(this).width();
$(this).data("origWidth", $(this).css("width"))
.css("width", "auto");
/* if the width is now less than before then undo */
if($(this).width() < width) {
$(this).unbind('mousedown');
$(this).css("width", $(this).data("origWidth"));
}
}
})
/* Handle blur if the user does not change the value */
.blur(function(){
$(this).css("width", $(this).data("origWidth"));
})
/* Handle change of the user does change the value */
.change(function(){
$(this).css("width", $(this).data("origWidth"));
});
}
});
}
}
Here is a little script that should help you out:
http://www.icant.co.uk/forreview/tamingselect/
For a simple Javascript-free solution, adding a title-attribute to your <option>s holding the text might be enough, depending on your requirements.
<option value="242" title="Very long and extensively descriptive text">
Very long and extensively descriptive text
</option>
This will show the cut-off text in a tool-tip fashion on hovering the <option>, regardless of the width of the <select>.
Works for IE7+.
Not javascript free i'm afraid, but I managed to make it quite small using jQuery
$('#del_select').mouseenter(function () {
$(this).css("width","auto");
});
$('#del_select').mouseout(function () {
$(this).css("width","170px");
});
Simply you can use this plugin for jquery ;)
http://plugins.jquery.com/project/skinner
$(function(){
$('.select1').skinner({'width':'200px'});
});
Small, but hopefully useful update to the code from MainMa & user558204 (thanks guys), which removes the unnecessary each loop, stores a copy of $(this) in a variable in each event handler as it's used more than once, also combined the blur & change events as they had the same action.
Yes, it's still not perfect as it resizes the select element, rather than just the drop-down options. But hey, it got me out of a pickle, I (very, very unfortunately) still have to support an IE6-dominant user base across the business.
// IE test from from: https://gist.github.com/527683
var ie = (function () {
var undef, v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i');
while (
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
all[0]
);
return v > 4 ? v : undef;
} ());
function badFixSelectBoxDataWidthIE() {
if (ie < 9) {
$('select').not('[multiple]')
.mousedown(function() {
var t = $(this);
if (t.css("width") != "auto") {
var width = t.width();
t.data("ow", t.css("width")).css("width", "auto");
// If the width is now less than before then undo
if (t.width() < width) {
t.unbind('mousedown');
t.css("width", t.data("ow"));
}
}
})
//blur or change if the user does change the value
.bind('blur change', function() {
var t = $(this);
t.css("width", t.data("ow"));
});
}
}
A different approach:
instead of a select make it an edit box, disabled so noone can enter anything manually or change contents after selection
another hidden edit to contain an id of a selected option (explained below)
make a button [..] and script it to show that div below
make a hidden div with absolute position under or near the edit box
make that div to contain a select with style size="6" (to show 6 options and a scrollbar rather than a drop-down list) and a button "select" and maybe "cancel"
Do not style width so the whole thing will assume width of the widest option or the button plus maybe some padding of your choice
script the "select" button to copy id of the selected option to the hidden edit box and it's value to the visible one, also to hide the div again.
4 simple javascript commands total.
I found a pretty straightforward fix for this. In the <select> html element add these properties:
onmouseover="autoWidth(this)"
onblur="resetWidth(this)"
So whenever user clicks on that the width will automatically expand, and user moves out of the select box, the width will be reset to original.
similar solution can be found here using jquery to set the auto width when focus (or mouseenter) and set the orignal width back when blur (or mouseleave) http://css-tricks.com/select-cuts-off-options-in-ie-fix/.
for (i=1;i<=5;i++){
idname = "Usert" + i;
document.getElementById(idname).style.width = "100%";
}
I used this way to showed the drop down list when the width is not showed correctly.
It work for IE6, Firefox and Chrome.
A full fledged jQuery plugin is available, check out the demo page: http://powerkiki.github.com/ie_expand_select_width/
disclaimer: I coded that thing, patches welcome
Why would anyone want a mouse over event on a drop down list? Here's a way of manipulating IE8 for the way a drop down list should work:
First, let's make sure we are only passing our function in IE8:
var isIE8 = $.browser.version.substring(0, 2) === "8.";
if (isIE8) {
//fix me code
}
Then, to allow the select to expand outside of the content area, let's wrap our drop down lists in div's with the correct structure, if not already, and then call the helper function:
var isIE8 = $.browser.version.substring(0, 2) === "8.";
if (isIE8) {
$('select').wrap('<div class="wrapper" style="position:relative; display: inline-block; float: left;"></div>').css('position', 'absolute');
//helper function for fix
ddlFix();
}
Now onto the events. Since IE8 throws an event after focusing in for whatever reason, IE will close the widget after rendering when trying to expand. The work around will be to bind to 'focusin' and 'focusout' a class that will auto expand based on the longest option text. Then, to ensure a constant min-width that doesn't shrink past the default value, we can obtain the current select list width, and set it to the drop down list min-width property on the 'onchange' binding:
function ddlFix() {
var minWidth;
$('select')
.each(function () {
minWidth = $(this).width();
$(this).css('min-width', minWidth);
})
.bind('focusin', function () {
$(this).addClass('expand');
})
.change(function () {
$(this).css('width', minWidth);
})
.bind('focusout', function () {
$(this).removeClass('expand');
});
}
Lastly, make sure to add this class in the style sheet:
select:focus, select.expand {
width: auto;
}
Not javascript free, I am afraid too and my solution do require a js library, however, you can only use those files which you need rather than using them all, maybe best suited for those who are already using YUI for their projects or deciding which one to use. Have a look at: http://ciitronian.com/blog/programming/yui-button-mimicking-native-select-dropdown-avoid-width-problem/
My blog post also discusses other solutions as well, one is referenced back to here on stackoverflow, why I went back to create my own SELECT element is because of simple reason, I don't like mouseover expand events. Maybe if that helps anyone else too!
The jquery BalusC's solution improved by me. Used also: Brad Robertson's comment here.
Just put this in a .js, use the wide class for your desired combos and don't forge to give it an Id. Call the function in the onload (or documentReady or whatever).
As simple ass that :)
It will use the width that you defined for the combo as minimun length.
function fixIeCombos() {
if ($.browser.msie && $.browser.version < 9) {
var style = $('<style>select.expand { width: auto; }</style>');
$('html > head').append(style);
var defaultWidth = "200";
// get predefined combo's widths.
var widths = new Array();
$('select.wide').each(function() {
var width = $(this).width();
if (!width) {
width = defaultWidth;
}
widths[$(this).attr('id')] = width;
});
$('select.wide')
.bind('focus mouseover', function() {
// We're going to do the expansion only if the resultant size is bigger
// than the original size of the combo.
// In order to find out the resultant size, we first clon the combo as
// a hidden element, add to the dom, and then test the width.
var originalWidth = widths[$(this).attr('id')];
var $selectClone = $(this).clone();
$selectClone.addClass('expand').hide();
$(this).after( $selectClone );
var expandedWidth = $selectClone.width()
$selectClone.remove();
if (expandedWidth > originalWidth) {
$(this).addClass('expand').removeClass('clicked');
}
})
.bind('click', function() {
$(this).toggleClass('clicked');
})
.bind('mouseout', function() {
if (!$(this).hasClass('clicked')) {
$(this).removeClass('expand');
}
})
.bind('blur', function() {
$(this).removeClass('expand clicked');
})
}
}
Its tested in all version of IE, Chrome, FF & Safari
// JavaScript code
<script type="text/javascript">
<!-- begin hiding
function expandSELECT(sel) {
sel.style.width = '';
}
function contractSELECT(sel) {
sel.style.width = '100px';
}
// end hiding -->
</script>
// Html code
<select name="sideeffect" id="sideeffect" style="width:100px;" onfocus="expandSELECT(this);" onblur="contractSELECT(this);" >
<option value="0" selected="selected" readonly="readonly">Select</option>
<option value="1" >Apple</option>
<option value="2" >Orange + Banana + Grapes</option>
I've got yet another contribution to this. I wrote this a while back that you may find helpful: http://dpatrickcaldwell.blogspot.com/2011/06/giantdropdown-jquery-plugin-for-styling.html
It's a jquery plugin to make a styleable unordered list backed by the hidden select element.
The source is on github: https://github.com/tncbbthositg/GiantDropdown
You'd be able to handle behaviors and styles on the UL that you can't with the SELECT. Everything else should be the same because the select list is still there, it's just hidden but the UL will use it as a backing data store (if you will).
I wanted this to work with selects that I added dynamically to the page, so after a lot of experimentation, I ended up giving all the selects that I wanted to do this with the class "fixedwidth", and then added the following CSS:
table#System_table select.fixedwidth { width: 10em; }
table#System_table select.fixedwidth.clicked { width: auto; }
and this code
<!--[if lt IE 9]>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(document).on(
{
'mouseenter': function(event) {
jQuery(this).addClass('clicked');
},
'focusout change blur': function() {
jQuery(this).removeClass('clicked');
}
}, 'select.fixedwidth');
});
</script>
<![endif]-->
A couple of things to note:
In spite of the fact that my selects are all in a table, I had to do "on" to the jQuery(document).on instead of to jQuery('table#System_table').on
In spite of the fact that the jQuery documentation says to use "mouseleave" instead of "blur", I found that in IE7 when I moved the mouse down the drop down list, it would get a mouseleave event but not a blur.
Here is a solution that actually works.
It sets the width in IE and doesn't mess up your page layout and doesn't close the dropdown when you mouse over the select options like some of the other solutions on this page.
You will need however to change the margin-right value and width values to match what you have for your select fields.
Also you can replace the $('select') with $('#Your_Select_ID_HERE') to only effect a specific select field. As well you will need to call the function fixIESelect() on the body onload or via jQuery using DOM ready as I did in my code below:
//////////////////////////
// FIX IE SELECT INPUT //
/////////////////////////
window.fixIESelect_clickset = false;
function fixIESelect()
{
if ($.browser.msie)
{
$('select').mouseenter(function ()
{
$(this).css("width","auto");
$(this).css("margin-right","-100");
});
$('select').bind('click focus',function ()
{
window.fixIESelect_clickset = true;
});
$('select').mouseout(function ()
{
if(window.fixIESelect_clickset != true)
{
$(this).css("width","93px");
window.fixIESelect_clickset = false;
}
});
$('select').bind('blur change',function ()
{
$(this).css("width","93px");
});
}
}
/////////////
// ONLOAD //
////////////
$(document).ready(function()
{
fixIESelect();
});
For my layout, I didn't want a hack (no width increasing, no on click with auto and then coming to original). It broke my existing layout. I just wanted it to work normally like other browsers.
I found this to be exactly like that :-
http://www.jquerybyexample.net/2012/05/fix-for-ie-select-dropdown-with-fixed.html
A workaround if you don't care about the strange view after an option is selected (i.e. Select to jump to a new page):
<!-- Limit width of the wrapping div instead of the select and use 'overflow: hidden' to hide the right part of it. -->
<div style='width: 145px; overflow: hidden; border-right: 1px solid #aaa;'>
<select onchange='jump();'>
<!-- '▼(▼)' produces a fake dropdown indicator -->
<option value=''>Jump to ... ▼</option>
<option value='1'>http://stackoverflow.com/questions/682764/select-dropdown-with-fixed-width-cutting-off-content-in-ie</option>
...
</select>
</div>
A pure css solution : http://bavotasan.com/2011/style-select-box-using-only-css/
.styled-select select {
background: transparent;
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}
.styled-select {
width: 240px;
height: 34px;
overflow: hidden;
background: url(http://cdn.bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg) no-repeat right #ddd;
border: 1px solid #ccc;
}
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>
Best solution: css + javascript
http://css-tricks.com/select-cuts-off-options-in-ie-fix/
var el;
$("select")
.each(function() {
el = $(this);
el.data("origWidth", el.outerWidth()) // IE 8 can haz padding
})
.mouseenter(function(){
$(this).css("width", "auto");
})
.bind("blur change", function(){
el = $(this);
el.css("width", el.data("origWidth"));
});