There is no way to set the image size that you assign to an element’s pseudo like ::before. But do not fret. There is a workaround.
User David Vasquez of StackOverflow provided a solution for this. See sample CSS.
|
1 2 3 4 5 6 7 8 9 |
.element::before { display: inline-block; width: 16px; height: 16px; margin-right: 5px; content: ''; background: url('my_image.svg') no-repeat 0 0; background-size: 100%; } |
When I used a bootstrapped 3.0 template together with Angular JS, I found out that the height of the DIV layer where ng-view resides does not change its height to fill the window viewport height if its content height is small.
I have not found any solution in any forum regarding this problem so what I did was to create a directive and added it to the HTML element where ng-view is located.
My template contains only a horizontal bar at the top, while the bottom is occupied by the content where ng-view is.
This is my HTML:
|
1 2 3 4 5 6 7 |
<body ng-controller="AppCtrl"> <div id="main_navbar" class="navbar"> .... </div> <div class="container-fluid-full" ng-view resize> </div> </body> |
This is my directive:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
AppIndex.directive('resize', function ($timeout) { return { restrict: 'A', link: function(scope, elem, attrs, controller) { angular.element(document).ready(function () { $(window).resize(); $timeout(function() { if (($(elem).height() + $('#main_navbar').height()) < $(window).height()) { $(elem).css('height', ($(window).height() - $('#main_navbar').height()) + 'px'); } }); }); } }; }); |
What the code does, is that once the ng-view works its magic and populates the HTML contents to the DIV layer, the Angular JS Directive will wait for the DOM till it is ready. Angular JS also has its own way to detect if a DOM is ready the same way JQuery does, but with a different syntax.
Once it is ready, I call on the $(window).resize() function to simulate a window viewport resize, then do the formula to adjust the height of the DIV content layer to fill the extra height of the window viewport.
Without calling the resize() function the height adjustment will not work when, say, you have a tab element and one of those tabs contains small content.
If you have a footer at the top, then simply add the footer height to the computation.
Share the post "How To Fit WebView Height Based On Its Content In Java FX 2.2"
There is no way in the API to do this. However, Frode Johansen made a custom class that inherited Region and placed a WebView control inside it, then adjusting its height based on the document height after it has loaded its content by executing a Javascript one-liner code in order to retrieve the height value.
A very big thank you because considering that the Label control cannot display formatted HTML content, the only way to work around this limitation is to create a custom class of it. Luckily, he has saved us all the trouble of making one.
Here is the custom class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
public final class WebViewFitContent extends Region { final WebView webview = new WebView(); final WebEngine webEngine = webview.getEngine(); public WebViewFitContent(String content) { webview.setPrefHeight(5); widthProperty().addListener(new ChangeListener<Object>() { @Override public void changed(ObservableValue<?> observable, Object oldValue, Object newValue) { Double width = (Double)newValue; webview.setPrefWidth(width); adjustHeight(); } }); webview.getEngine().getLoadWorker().stateProperty().addListener(new ChangeListener<State>() { @Override public void changed(ObservableValue<? extends State> arg0, State oldState, State newState) { if (newState == State.SUCCEEDED) { adjustHeight(); } } }); webview.getChildrenUnmodifiable().addListener(new ListChangeListener<Node>() { @Override public void onChanged(Change<? extends Node> change) { Set<Node> scrolls = webview.lookupAll(".scroll-bar"); for (Node scroll : scrolls) { scroll.setVisible(false); } } }); setContent(content); getChildren().add(webview); } public void setContent(final String content) { Platform.runLater(new Runnable(){ @Override public void run() { webEngine.loadContent(getHtml(content)); Platform.runLater(new Runnable(){ @Override public void run() { adjustHeight(); } }); } }); } @Override protected void layoutChildren() { double w = getWidth(); double h = getHeight(); layoutInArea(webview,0,0,w,h,0, HPos.CENTER, VPos.CENTER); } private void adjustHeight() { Platform.runLater(new Runnable(){ @Override public void run() { try { Object result = webEngine.executeScript("document.getElementById('mydiv').offsetHeight"); if (result instanceof Integer) { Integer i = (Integer) result; double height = new Double(i); height = height + 20; webview.setPrefHeight(height); webview.getPrefHeight()); } } catch (JSException e) { } } }); } private String getHtml(String content) { return "<html><body>" + "<div id=\"mydiv\">" + content + "</div>" + "</body></html>"; } } |
