I am trying to dynamically create a form with AngularJS.
See the code on plunker: http://embed.plnkr.co/lgSlbQlRcY26HhPzbj63/preview.
The problem is in adding a void option inside a select: I would like to use it as a label for the field.
So I created the void option in order to bind to element label:
<option value="">{{element.label}}</option>
Everything works fine in Chrome and Firefox, but in IE (ideally from IE8) rendering is not working and option displays "{{element.label}}" (at least until I click the select).
Does someone know why or how to fix it?
Thanx
I am on a mac, with no IE. I even tried to use www.browserstack.com.
The jsFiddle I was using wouldn't even load the home page for jsFiddle in IE 8.
In www.browserstack.com I used IE 9 and it did work in the jsFiddle.
Here is the jsFiddle if you want to mess with it.
jsFiddle Link
Since I can't test in IE 8 on jsFiddle, or Plunker as they both don't load in IE 8 on www.browserstack.com, try this out and see if you can trick it to work by using another approach.
<!-- <option value="">{{element.label}}</option> gray this out -->
<option value="">Age Range</option> // just for your initial cell value
<option value="element.label"></option> // The items
Related
See this minimal demo at GitHub: https://github.com/ErikVerheul/PaletteBugDemo.git
I expected that the code line palette.add(new DefaultTheme()); would do the trick. However, it did not.
When changing the Wicket version to 6.20.0 all works fine.
Did I miss something?
help appreciated,
Erik
Short answer: Remove your paragraph <p> and use a <div> instead of the <span> for the palette.
Long answer
The p paragraph cannot contain other block elements. In Wicket 6.x the palette uses a table to layout the "Available" und "Selected" options. In Wicket 7.x divs are used for that, since tables only should be used for tabular data and not for layouting. Neither tables nor divs are allowed in a paragraph though. I guess browsers are just a bit more forgiving when using tables at wrong places, hence you are seeing a somewhat correct result with version 6.x.
Another problem is that you are using a span tag for your palette. Again, the palette is inserting either a table or several div tags, but neither of these are valid in between the span tag.
So something like this should do it:
<form>
<div class="mystyle">
<div wicket:id="palette"></div>
</div>
...
</form>
Problem SOLVED. Thank you Martin! As a Wicket novice I used a version 6 example not knowing the changes in version 7. The working version is now on GitHub.
It does work fine here: http://examples7-apachewicket.rhcloud.com/compref/wicket/bookmarkable/org.apache.wicket.examples.compref.PalettePage
Please check what is different in your app.
I'm working on a plugin(application specific), that would allow to select an image from select box(size=5) and during the onChange event would show preview aside.
I have a set of urls, that lead to different images with small size. Issue here is, that plugin is an enclosed part of the code, where list of images is outside of it and is created by current action(not static).
Any way to pass it into plugin?
Took some time, but plugin was created.
Due to some fresh issues in Chrome it was not possible to say, wether the plugin and CKEditor add some strange behaviour or is it Chrome, but with testing in FF it was confirmed to be issue of Chrome(talking about selects size attribute).
Nevertheless, the issue with passing images for select was quite simple. I'm not sure whether it is the best way or not, but I was able to do it through CKEDITOR.config.*. More specifically
<script type="text/javascript">
$(function()
{
CKEDITOR.config.pddimages_set = {{ images }};
var editor = CKEDITOR.replace( 'editor' );
});
</script>
Even more specifically {{ images }} is a json_encoded array. And that data was available to me in my plugin.
Hope that will help others who may come in contact with same question.
When rendering a select dropdown as below, the iPhone renders it blank. How can I fix this?
<select size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
The above example from http://www.w3schools.com/tags/att_select_size.asp. Their sample is http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_size
In Firefox (and all other browsers), it renders as:
However, on an iPhone, it's rendered blank. This is very bad for usability as the visitor doesn't know what's in the box (in our application, it's for selecting their address from several possibilities).
I've created a JSFiddle: http://jsfiddle.net/bqMEv/3/ The iPhone rendering is as follows; note that there's nothing shown when both:
size is greater than 1
and height is specified in CSS
and no option is selected
Removing the CSS height shows that the iPhone ignores the size attribute.
Looks like there is no standard way to do it, based on content of other topics on stack overflow:
Safari Mobile Multi-Line <Select> aka GWT Multi-Line ListBox
jquery plugin to convert a <select size="10"> to a usable list on Safari mobile (iOS)
But author of the second topic wrote a plugin that emulates that behavior: https://github.com/redhotsly/safarimobile-multiline-select
My simple fix for this, using Jquery:
$(document).ready(function(){
if(navigator.userAgent.match(/(iPhone|iPod|iPad)/i)) {
$('#my_select_box').prepend('<option value="" selected="selected" disabled="disabled">..Please select something</option>');
}
});
Works like this:
Wait for document to load
If user visits the site using an iPhone, iPod or iPad execute script
Add a selected and disabled option at the top of your select list, with the text
"..Please select something".
Does nothing in all other browsers, works great :D
If you need to display one of the options, use the following: HTML selected Attribute
Your webpage at firefox:
It appears that people here might not be fully understanding the issue. The problem is that the iOS browser will not render the label for the unselectable first field, which would typically be a "Please select ..." type indicator. If it is not selected, iOS renders it as blank. This is not desirable, because there are choices for the user to make, but the field appears as blank.
You cannot also set it programatically selected to get the "Please select" to display, because if the field is required, the form validation no longer works, as the browser considers the first field as selected, even though it is flagged as unselectable.
The "Bug" is that iOS browser will not display the label for the first field, when it is set as unselectable.
I don't know what to look at on this. I have a Rails 3.2.8 application, and I have a page where all of my Coffeescripts are firing except one.
My controller is called "apps", and my Coffeescript file is app.js.coffee. Here is a the call that is not firing:
$("#products_id").change ->
alert "hello"
The item in my view renders as follows:
<select id="products_id" class="select required" name="products[id]">
<option value=""></option>
<option value="1368">015-0761</option>
<option value="1752">030-237</option>
</select>
I am using Firefox and Firebug to debug. I have verified that the apps.js script is indeed loaded with my changes. I'm getting no activity on the select box when I choose different things.
I have also moved the call around inside the apps.js.coffee file, and I'm using TextMate to view the invisible characters to make sure I don't have any bad whitespace.
Doh! That element doesn't exist when the page is rendered, it's displayed later. Therefore, I needed to change the call to this:
$("#products_id").live "change", ->
alert "hello"
That works!
So I have a <select> element on my page, and it worked fine in all browsers until IE8 came along. I've seen all the literature about the IE7 compatibility view and how to use <meta> to force the browser into that mode. But the question still remains: why the heck does IE8 fail to display a simple <select> properly? Has anyone figured this out yet? Here are two URLs that demonstrate the problem. The first one displays properly in IE8, but only because I'm using the <meta> tag to force it into IE7 compatibility mode. The second one is identical to the first, except that I'm not forcing IE7 compatibility.
http://www.currensys.com/mhw.php
http://www.currensys.com/mhf.php
Anyone have any ideas?
Apparently, IE8 doesn't like one of your CSS styles.
SELECT { display: table }
Removing the above style displays the drop down list.
Update: more information from W3School, the value of "table" is not supported by IE.
You have a css property setting display: table on select elements. This seems to be the problem.
I ha d the same problem, not solved with the display:table thing, but it was an issue with the font-family...seems that you have to use standard font only (i used fontface for my site...)
so change the font family to a standard one and should be ok(i don't know why but it worked for me)