I have a really weird error that I'm trying to resolve. On a website I built with the visual composer, one of the buttons that leads to an internal anchor (#whatwedosmall) on the same site just wont work on the mobile layout.
This is the site: https://b8j3ssh.myraidbox.de/
I created 3 layouts (large, medium, small) and each section has a certain ID (for example the What we do section in large is named: #whatwedolarge and so on. Within the site there are buttons that lead to these sections and it works great!
However, the very first button on mobile (breakpoint smaller than 600px) just wont work at all. I tried everything but I cannot get it to work...
Can you help me?
When you inspect the page at a breakpoint < 600px you can see that your button (actually an ) is being covered by the rev_slider_1_1 so the actual can never be hovered or clicked.
If you delete that slider from the DOM in DevTools or set the height manually, then the hovering and click work. As you can see in the screenshot below, manually setting the Slider height to 850px allows me to hover and click
You need to determine how the height of that slider is being determined and fix that in your code.
Related
I'm developing new module in our application using vaadin14 components (eg https://vaadin.com/components/vaadin-date-picker). Everything worked pretty well, but after adding few components (text fields, grids, buttons, labels, notifications etc..) vaadin decided to not listen to me anymore... ;(
Everything started when I've tried to add some addon - slider (because for some reason it was removed from vaadin14). Even I tried a bounch of different addons none of them seem to work, it always lead to not displaying component(it was visible in html code when I was checking html elements on website, but size of that elements always was 0x0 - even setting its size in style didn't seem to work, because - yes it took some place on gui, but was invisible).
I thought that it might be some issue with my vaadin version or some deprecated addons and I've returned to work with default vaadin components. But this time it not seem to work as well. Currently the same issue is with IntegerField, NumberField, DatePicker, ProgressBar and I think that there is much more. There are no errors in console, no errors from server side, html elements are visible in generated html but its size is always 0x0 or not visible(eg vaadin-data-picker 0x0 data-picer 0x0).
Eg.:
html egxample
Like you can see there are no styles visible or whatsoever..
Code that should generete them looks like that(it is taken straight from vaadin example):
IntegerField integerField = new IntegerField("Age");
integerField.setSizeFull();
integerField.setVisible(true);
add(integerField);
NumberField numberField = new NumberField("Years of expertise");
numberField.setSizeFull();
numberField.setVisible(true);
add(numberField);
DatePicker labelDatePicker = new DatePicker();
labelDatePicker.setLabel("Label");
DatePicker placeholderDatePicker = new DatePicker();
placeholderDatePicker.setPlaceholder("Placeholder");
I've tried everything - using .setSizeFull(), setVisible(true), rebuilding project with mvn clean install (production and dev mode), deleting node_modules, targer, webpack.generated.js, package-lock.json(both on main directory and module directory) to let vaadin recreate them. But nothing seem to help. On different machine we was able to display NumberField after few rebuilts, but after few more it disapears again...
Thank you in advance!
EDIT:
Check the difference between working and not woring element:
Working element
Not working elements
Like you can see above in working element is bunch of stuff like shadow-root, styles, div etc. I assume that other elements also should consist such.
Try with setSizeUndefined() or use fixed sizes instead, or make absolutely sure all the parent layers also have full size.
When you use setSizeFull() you are telling the component to spread out to use all the available space, but if there is any container parent in there that has undefined size, that one will only use as much space as the contents demand -- which is nothing, if the contents are all set to full size. All the available space of nothing is nothing.
I'm new to coding JavaFX and I'm trying to create two checkboxes that will allow a user to remember his username/ password when logging in/out. Coding this isn't the problem; I'm having a hard time graying out the checkboxes (I want the password box to be grayed when the username box isn't checked). Here is a little snippit of code:
CheckBox rememberUsername = new CheckBox("Remember username?");
CheckBox rememberPassword = new CheckBox("Remember password?");
rememberPassword.setStyle("-fx-opacity: 1");
I read an online guide on getting CSS to work, and it said to extract:
/jdk1.8.x/jre/lib/ext/jfxrt.jar in C:\Program Files\Java, which I did. I'm using Eclipse, and when I load my program, it's as if there's no CSS at all.
Thanks in advance!!
When you disable a control, it will set the opacity to 0.5 (by default) and make it so that the control is not responsive. Opacity of 0.5 will look similar to a grayed out control.
rememberPassword.disableProperty().bind(
rememberUsername.selectedProperty().not()
);
This is probably what you really want to do, rather than just modifying the CSS style to gray the control out.
In the unlikely event that you don't want to disable the control when you gray it out, you can do:
rememberPassword.opacityProperty().bind(
Bindings.when(
rememberUsername.selectedProperty()
).then(1).otherwise(0.5)
);
And, in the equally unlikely event that you want to gray it out without disabling it and you want to use inline CSS for this, you can do:
rememberPassword.styleProperty().bind(
Bindings.when(
rememberUsername.selectedProperty()
).then("fx-opacity: 1;").otherwise("-fx-opacity: 0.5;")
);
In this video Google mentions using windowOverscan in the styles file. The problem is I do not have a styles file in my Android Wear module. Is there a more recent method that allows you to center text properly?
I found out through experimenting that the windowOverscan attribute is set within the style you choose in your AndroidManifest file. I was able to view the settings of each style by going to the Design tab in the layout xml then finding the style attribute and clicking the three dots and then going to the System tab. When a style is selected you can see the code at the bottom of the window.
I also read that windowOverscan is set to true by default.
My problem was actually caused by the custom font I was using and not windowOverscan. Hope this saves someone the trouble.
I'm trying to write an application using JavaFX 2.0 that includes a web browser control that allows a user to navigate through the text and images on a HTML page using only the keyboard -- basically like "caret browsing" in Internet Explorer.
The goal is to be able to select bits of text or images and copy them to a variable for further manipulation without using a mouse.
I took a look at the HTMLEditor control here:
http://docs.oracle.com/javafx/2.0/ui_controls/editor.htm#CHDBEGDD
but I don't need any editing capability cluttering up the UI, and the documentation says:
The formatting toolbars are provided in the implementation of the
component. You cannot toggle their visibility.
WebView seems like a logical choice (http://docs.oracle.com/javafx/2.0/webview/jfxpub-webview.htm), but I'm not sure how to get a cursor onto the page.
Any advice would be appreciated.
The current WebView support for caret browsing seems patchy at best to me.
Here is what I found running a quick test:
I can invoke webView.requestFocus to have the WebView request focus for responding to key presses, but it just operates on the WebView as a whole, not individual components within the WebView.
WebView does not implement a selection management API similar to TextInputControl for fine grained programmatic management of selections.
WebView does allow you to select text. However, I had to initiate the selection with a mouse drag, and after that I could use a keyboard to enlarge or shorten the selection (left or right arrow keys for a character by character selection and ctrl + left or right arrow keys for word by word selection - up and down arrows did not affect the selection).
After selecting some text in WebView I could press Ctrl-C on it (in Windows) to copy it to a clipboard and paste the text into another program. Only raw text was copied - associated style/html info and images were not copied.
To copy images I had to right click on an image and select Copy Image from a drop down menu and I could paste the image into MS Paint - I could not find a way to do this without a mouse.
In other browsers I can press TAB and Shift + TAB to go from one hyperlink to the next - in WebView, once it has focus, TAB will just go from one control (e.g. an html text field in the WebView) to the next (e.g. an html button in the text field).
The backspace key works as in other browsers (takes you to the previous page).
The above restrictions, and likely others I didn't test for, will likely make it hard to accomplish what you are trying to do. You could try stuff such as capturing keypress events using an eventfilter, then generating mouse events to initiate the selection and copy process, but that sounds difficult to me, and even then, there is currently no public API in JavaFX to generate mouse events, only an unstable com.sun api.
WebView does expose a document object model, and the document is scriptable by JavaScript. Try capturing key events with an eventfilter, listening to the document property for changes and executing JavaScript against the WebView at appropriate times to get and set the current selection. This also seems a little tricky to implement well.
Accomplish as much as you can with the current WebView control and public API and log issues at http://javafx-jira.kenai.com as and when you encounter short-comings.
I have a JCheckBox that should not be checked by the user when a certain other field is empty.
So now I want to have an error popup and then reset the checkbox (I've considered disabling the checkbox, but the connection to the other field is non-obvious, and a tooltip text IMO not visible enough).
What's the correct way to do that in Swing? Through a PropertyVetoException? Where do I throw it and where do I catch it? My first (probably ugly) idea would be to add a ChangeListener that itself shows the popup and resets the value.
Edit: The question is about Nikki (screenshot below), an app I am developing which geotags images and exports them to Google Earth's KMZ format. The checkbox is used to select the images to include in the export. But this requires the images to be gotagged first (which in turn requires either a timestamp, or manual assignment). I don't think this requirement can be made obvious through the UI layout.
(source: brazzy.de)
I would simply disable the check box and add a message explaining why the option is not available. A nice way to show the message is to display a mini exclamation mark next to the check box and put the message in a tooltip.
Poping up an exception often feels wrong because users don't read error messages. For most users an error message popup means that the application did something wrong, in your case it's the normal behavior.
Edit if you insist on letting the check box enabled, another way to show the user that some info is missing would be to flash the missing data. Eg. if latitude and longitude are missing and the user clicks on export, set a red background onto these fields for a just a second. This will clearly show the user what's missing.
In this screen, don't you want to put the mouse over the red circle to understand what's going on?
validation http://www.vogella.de/articles/EclipseDataBinding/images/validation10.gif
I don't think the Export JCheckBox should be disabled at all. Instead, the Export JButton itself should examine the current export list and display any anomalous entries in a way that allows navigation to a chosen photograph. If all entries are correct, Export would proceed as usual.
Addendum: It think you are right to keep the interface as non-modal as possible. My model for this would be unsaved files when exiting an editor or uncommitted changes when closing a project in an IDE.
If that's a status line at the bottom of the window, you might indicate the number of photographs currently selected for export, adding a count if any still need geocoding.
The field should simply be allowed to disable the checkbox. If the coupling is unintuitive then the GUI layout may have to be reconsidered.
EDIT: I ran it from your page, and I believe the issue here is that you actually have a third and fourth step in addition to select folder, select images. The third step is validate image, and fourth is select images for export. I think your problem is that this is not clearly conveyed in the current layout, and that reflects in your question.
I would suggest that you create a separate column containing the checkbox for each image, and that THAT checkbox is disabled until the image passes validation (step 3). Perhaps with an explanatory text in the column about why the image hasn't passed yet.