JavaFX 2.2 WebEngine HTML Select Dropdown Styling - javascript

I am working on a project that I cannot change to Java 1.8 to take in the newest JavaFX, this may or may not be relevant to the issue at hand. I have been trying everything that I can find on the internet to override the default look and feel for a drop down selection within the web browser. I have tried Javascript solutions, pure CSS solutions, and even trying to build the functionality using lists and CSS. Nothing seems to work within the WebView/WebEngine on JavaFX 2.2, most of the solutions I have tried work perfectly fine within Firefox (I know its not the best comparison because Firefox doesn't utilize webkit under the hood).
Any ideas on how to style the dropdown part of the select feature with JavaFX 2.2 WebView?
List of techniques I have tried:
http://wellstyled.com/en/javascript-styleselect-jquery-plugin/
http://www.givainc.com/labs/mcdropdown_jquery_plugin.cfm
http://www.scribbletribe.com/how-to-style-the-select-dropdown/
http://cssdeck.com/labs/styling-select-box-with-css3
http://bavotasan.com/2011/style-select-box-using-only-css/
http://www.htmllion.com/default-select-dropdown-style-just-css.html
http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/

I found something that works and actually improves my interface. I was searching the UX Stack Exchange and found Chosen. Original UX Stack Exchange post

I have create JavaFX app with webview (angularjs and bootstrap).
This is how the element is rendered in Chrome
This is how select element is rendered in ubuntu jar file
I have try multiple fixes but it seams that this dropdown is rendered from the browser itself (will be rendered different in linux, macos, windows) and there is no way to style it.
Mine working solution is to use plane js library as tom-select, no dependencies.
And here how select element is rendered in chrome and in jar. Success :)

Related

Bootstrap with Internet Explorer in compability view

I'm working with a customisable software where the html code is autogenerated. The only code allowed to be written is javascript.
As the generated screens are not the most modern and responsive, I've started to include some jquery in order to manipulate the autogenerated html (I mean the DOM of course...).
A sexy idea would be to use the bootstrap framework. After some tests I've some good results with Firefox.
But I'm stuck with Internet Explorer: the web application has to be used in compatibility view (otherwise it's not usable), but the rendering of the bootstrap elements is bad (css are not applied etc etc... but working well if I'm not in compatibility view).
I tried different solutions like adding meta tags but no way, it doesn't give results.
Sure that some of you would have some ideas / advice?

How can debug Nativescript app UI?

I am new to NativeScript technology, while developing application I need to debug the UI component like why this textview is not showing, layout is overlapping with another or find out other distortion in UI
Thanks for your time.
As mentioned in the other answer you can use the debug mode. I think things have possibly changed a bit since that answer, because you CAN to an extent debug the UI.
1) run the app in your emulator
tns debug android --bundle for example
this will output link such as chrome-devtools://devtools/bundled/inspector.html?experiments=true&ws=localhost:40000
2) open the link in chrome.
Use Elements tab to view the xml tree of elements. You can alter and add attibutes to elements. example: right click on an element, click "add attribute" and add color="blue", this should change the font color to blue for the element.
<Label color="blue"...
you can view the computed CSS on the right side. However i don't think you can edit/modify the css on the right side as in web development.
here are the docs
https://docs.nativescript.org/tooling/debugging/chrome-devtools
Normally the only reason a field is off is if you are using margin with a negative value or you are putting multiple items in a absolute or grid layout cell.
To debug you can use:
tns debug ios --emulator
or
tns debug android --emulator
However using that you would be having to debug the JS code that builds the screen. You are much better off looking at the xml and understanding how layouts work to understand exactly how it lays it out. Then trying to debug what mistake you are making.

OS specific css in firefox add-on

Firefox add-on. Facing some padding problems for some XUL elements in mac os (windows, linux are okay). I wish to know if there are any css tricks to identify the OS platform and apply a style to an element only for that OS ?
From a search, some of the possible options I found are :
Create a separate stylesheet file for the OS and modify chrome.manifest to point to that.
Use some external js library and use css selectors.
Identify platform from the add-on code, and load and register a second style sheet using the style sheet service
First option requires me to duplicate everything in stylesheets. Second one brings in dependency on other libraries. Third option might work, but I want to know if there are any simpler, elegant solutions ?
Thank you!
Those three options are pretty much it. For the first option you should put all of the common css in to one css file, and load that on all platforms.

(Foundation CSS) Dropdowns are not working

So dropdowns aren't working when using foundation (not even the code copy-pasted from the foundation docs).
This Html is generated using Play! Framework, and I am viewing it using chrome. This code is running on Localhost, not a foreign server. (Maybe chrome is blocking js on localhost or something?)
The following is the code I'm using. Any help would be appreciated.
JSFiddle: http://jsfiddle.net/U7CZq/
code
There are a couple things that I see here that could be causing problems.
The first major issue is you are not including foundation.topbar.js file, which is needed to implement the dropdowns.
The other issue is you should call $(document).foundation() at the bottom of the page to allow foundations javascript components to manipulate the DOM of the topbar to add the proper elements and classes need for the topbar dropdowns.

Multiple windows in one page for bookmarks

I want a single online web page for my bookmarks. The page should include small windows which opens the following pages:
Fizy, Facebook, Guardian.
There should also be a button for adding a new window with an URL text input.
Here's an illustration of how the page should look: http://i54.tinypic.com/2hrkb48.jpg
I've built a version of this at http://bit.ly/heqEd1, but as you may see, it uses iframes under javascript windows, which can not open frame-breaking sites (like fizy.com), or Facebook.
I'll make the research and but I am not sure how to proceed. Any solution will be accepted, like HTML5, XUL, Flex, AJAX or others. A solution with a local installation(like a Firefox extension) is not preferred, but still be ok.
Note: Piro Sakura has built a Firefox extension called split-browser. There's an element of the project called "subbrowser". An AJAX window that can show a subbrowser MAY solve the problem. I know the page will only be available from Firefox, but that is ok. (Again, a solution without an installation is preferred)
Any suggestions? How should I proceed? What should I learn? Is this possible?
Thanks.
I think you should use a Javascript with iFrames to do this. I'm not too sure what you're trying to accomplish with this, but it should be possible. As for which framework you'll use, it's up to you, but there will be a lot of custom code needed to implement this.
You can make multiple draggable windows in FLEX same as you have in you app
Please check sample as Starting point Movable/Draggable window and its demo
also u knows JS-DESKTOP lib with little customization to achieve that one of them are
jsdesk
sonspring-JQuery based
also you can do this using
Hopes that helps

Categories