In IE the dropdown list is coming upward inspite of coming downward when you click on it because of more number of values in it. In mozilla its working fine. Any suggestions? how to bring it downward. Also i am using IE8.
<s:select theme="simple" key="" id="" value="12" list="#{'1':'1','2':'2','3':'3'
,'4':'4','5':'5','6':'6','7':'7','8':'8','9':'9','10':'10','11':'11','12':'12','13':'13','14':'14','15':'15','16':'16','17':'17','18':'18','19':'19','20':'20','21':'21','22':'22','23':'23','24':'24','25':'25','26':'26','27':'27','28':'28','29':'29','30':'30','31':'31','32':'32','33':'33','34':'34','35':'35','36':'36'}"/>
Unfortunately this is something that seems to be handled by the browser explicitly, even after your html/javascript code.
Meaning that if IE detects that's it's a select and has the ability to make it an updrop due to little space, it will.
Alternatively you can use a custom dropdown control which will not actually render as a select, therefor you will have more control on how it works. There are many that can be found on-line using JavaScript/jQuery.
Personally I think it might be too much trouble for such a feature.
Related
Chrome has a feature as did firebug before it went defunct to break on an element's changes. Chrome however, only breaks on 3 types of changes and Firebug no longer works on new versions of Firefox and the tool to replace doesn't have the ability to break on changes to an element.
I have tried all three break on events for chrome and none enter the debugger. I have a select list like:
<select id="someid">
<option value="">Choose</option>
<option value="12"> Some Text with bad formatting and <span>in it for some reason</span>
<option value="13"> Other text with <span>etc</span> in it</option>
</select>
What I have found happens is that some JS on load will replace all the bad option text with valid html after load. Why does magento2 do this? I don't know. But it makes it a pain for me and is likely tied to a core feature as the spans have ids to products and more in it.
I append text to the options but it gets removed by this other replace procedure. I ended up writing setTimeout to check every 1000ms if the newer option text is there, and add my changes. But it's not a good fix it's a work around that is prone to break for a multitude of reasons, and slow besides.
My question is, in this gigantic huge program of software I never wrote how can I easily find what arbitrary javascript is changing the option text on load? Chrome won't persist on load, and even if I quickfinger Mcgee it and hit f8 to pause loading just as it starts, then find the element, then set it to break on changes, it doesn't actually break.
So I tried Mutation Observers, but then found out via another stack overflow answer to someone else's question, that you can never have the call stack visible using mutation observers. So now I'm looking at watch(), but I doubt it will solve my issue either?
Why isn't breaking on changes to element or it's children or it's text from JS a default easy to use feature this is a CONSTANT issue in development to find out which chunk of code in thousands and thousands of lines is actually causing a behavior you don't want, or you wish to run other javascript after it runs.
I don't have reputation to comment, but based on what you said:
What I have found happens is that some JS on load will replace all the bad option text with valid html after load. Why does magento2 do this?
i was thinking if magento doesn't have a function to show raw input ? maybe it's the root of your problems...
https://magento.stackexchange.com/questions/569/how-to-escape-output-data
In Chrome and as for now the Datalist only appears when typing or double clicking on the input element, e.g. http://jsfiddle.net/r7Y4v/
I'm trying to make the datalist appear sooner. Ideally I would put a little "dropdown arrow" next to the input that when clicked would make the Datalist appear.
I'm looking for a webkit solution.
I can't find anything in the specification how to do this.
Also I noticed that the implementation in current browsers seem to vary quite a bit (click vs dbl-click, arrow-key's, full versus filtered list and how filters match the partial input, etc).
To me, it seems that for now there is still no properly working combo-box and the data-list seems to be in it's infancy.
So it appears you'd currently be better of to roll your own or use a ready library.
It seems to me the 'minimul datalist' library is rather popular (good link to read to).
On that page is a link to it's GitHub code and a demo page.
Side-note: I'd love that some-one gives a better answer! Also, at first I thought it was a good idea to leave out the arrow-button so people could have better styling-options for a drop-down button if they wanted one that they could hook-up to the datalist/autocomplete/combobox. I'm surprised all this still seems unspecified and not natively supported. Please, spec-writers, give us the simple native combo-box (that is overdue for so long) and then add spice like filters!
Edit: There is an open Feature request since August 2012 on the Chromium project that asks for a drop-down functionality:
Issue 152375: Add drop down toggle on input tag with datalist
How about something like this? Since Chrome does place an icon on hover I placed this image so that it would be in the same spot.
input[list]{
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAJCAYAAADtj3ZXAAAAB3RJTUUH3wMHFxkH6cbPfQAAAAlwSFlzAAALEgAACxIB0t1+/AAAAARnQU1BAACxjwv8YQUAAABaSURBVHjaY2RgYDAA4jkMxIEsID6FLrgOiP8TwNNwmSgNxJ/xaDwPxGz4nJSDQ+MHIFYn5B9mqA3omsOJDA9w4P1B0jiTWI0wMIFYf2IDPEB8gxh/4jOAIAAAbfwl/FxzevIAAAAASUVORK5CYII=');
background-repeat:no-repeat;
background-position:right;
background-origin: content-box;
}
I am working on a ASP.NET/C# Web Application
I have a check box. and I want that check box to simulate a button click when checked/unchecked
I used javascript to do it
<input id="filtercheck" runat="server" type="checkbox" value="Filter" onclick="document.getElementById('Button1').click();"/>
Button1 is a normal button
<asp:LinkButton ID="Button1" runat="server" OnClick="Button1_Click"/>
So when I click on the checkbox, it is the same as if I clicked on the Button1.
Everything works fine on firefox and internet explorer. but this is not working on Google Chrome and smartphone browsers
How can I fix this problem?
in addition there are some few other javascript and Jquery scripts that are working on internet explorer and firefox but not on Google Chrome and smartphone browsers.
What can I do to make sure my website is fully compatible on all browsers?
Thanks a lot for any help
Edit: Yep, it was this first thing. Chrome was choking on the linkButton and not rendering it as expected.
I was going to ask. Is that ID the same as the HTML id attribute? How does an asp "LinkButton" render as HTML?
Edit: I'll leave the rest here in case it's helpful to anyone else having trouble with asp.net shenanigans.
Have you validated your HTML. What you're doing isn't particularly crazy. HTML breakage might be the cause.
Also, try just firing that function once through other means in Chrome.
One thing that's helpful though. Get your JavaScript off the page and put it in a linked file. Do NOT let any Microsoft product tell you anything about making js easier by doing it their way. The best thing they ever did was .net MVC which just gets the hell out of your way.
edit: Wait. Are you using webforms? That might be your problem. In that case you might have to fire focus and then click at the stupid thing. Some MS engineers safeguard against people finding an easy way to daisy-chain around their tomfoolery. I waded through a lot of horrendous JS to figure that one out a while back.
Probably you need Button1 ClientID?
document.getElementById('<%= Button1.ClientID %>').click()
Fully compatible on all browsers? The short answer? No fancy stuff.
A slightly longer answer is just to do what is allowed by the standards set forth by w3c and hope all browsers are compliant. They never will be 100%.
If you can use jQuery, I'd recommend that you use the trigger method
EDIT: as Koste pointed out, you might also want to use the ClientID instead of the actual id.
I'm having an issue where, periodically, I am unable to type into any input/textareas on Internet Explorer. I'm working primarily with IE9 at the moment.
When I click on an input, the JS click handler (which empties placeholder text) runs, and the active css is applied. However, the cursor does not appear and I can't type. If I tab to an input field, and start typing, everything starts working again.
I have a fair bit of JS running, but no errors running. I suspected TinyMCE had something to do with it, but it also happens when there are no editors on the page, so that doesn't seem to be it either. If you don't have an answer, I'd love an idea of what could be happening here that I could look into more, since I'm a bit stumped.
I eventually solved this. It was a strange and nasty issue with TinyMCE, where TinyMCE was being destroyed while the cursor was inside the main window. Fix was to explicitly focus out before it gets destroyed.
I had a similar issue once with I.E. where I was using .split to make sure the input box was not empty when gaining focus. However, I.E. did not support .split and would crash my js. I had to write my own and it ended up working out. Not sure if this in any way applies to what you are doing, but I thought I would just throw it out there.
Since you have lots of javascript on the page, a likely reason would be either a naming conflict or even more likely a js crash. Traverse your code for the 200th time.
(Yes, I know there is a similar question on SO, but it's 8 months old -- since then IE8 RTM has come out -- and not very illuminating)
Is it possible to disable IE8's 'Accelerators' on my site? When highlighting text, I have a small popup box that appears beside the cursor (similar to Office 2007) which is being obstructed by them.
I understand there's a method of disabling highlighting on specific elements of the site using jQuery, but this isn't ideal as I need to preserve the highlighting.
Note: I am not asking how to disable IE8 accelerators on my local copy of Internet Explorer. Instead, I would like accelerators to not appear when anyone visits my site using IE8.
Sorry, this is deliberately not supported.
Please see http://blogs.msdn.com/ieinternals/archive/2009/06/03/slowing-down-disabling-accelerators.aspx for discussion on this topic.
You can mark the parent element as either contentEditable (http://msdn.microsoft.com/en-us/library/ms537837(VS.85).aspx) or as unselectable (http://msdn.microsoft.com/en-us/library/ms537840(VS.85).aspx)
Either one should prevent the accelerator button from appearing.
You could prevent highlighting on the section. Then wrap the selection that would have been highlighted in a span that has some CSS applied to it, mimicking the highlight. It might take a bit of work, but it would achieve your goals.
As someone says, wrap around selection with some span (ex. span class='selected' - to retrive it latter), and delete the selection with:
if (document.selection)//ie -> prevent showing the accelerator menu
{
document.selection.empty();
}