I am not sure if this issue is really solved. The fact that now an icon is being shown does not make sense to me. A webview is typically different from a simple data item, it typically includes a larger web element. It should be possible to completely disable the rendering of an icon. For example, when one only links to a URL and not to an item, then no icon should be shown. Is there a way to accomplish this?
Create a transparent icon and display that instead.
For information, here is a link to the change done last Augoust.
Interesting idea. Will try this workaround.
Well, I tried a transparent icon with 64x1 size, yet while this makes the visual icon disappear, the empty line for the icon still persists. Is there any way to also get rid of this empty line?
Can we see?
You can define the height of the webview in the sitemap.
i’m not quite sure if that’s really the solution?
The webview now comes like any other item.
Therefore it reserves a “slot” in the basic UI where usually the items definition comes (like ON/OFF for switches and the item label).
I think that’s the white gap we’re seeing in the picture above, but i can’t tell if that was the same in OH 2.3
Resizing the Webview would just expand it more to the bottom
The height of the webview item refers to the whole thing, not to the one line that I am trying to get rid of. If I would set it to height=1 then I would only see the empty line, and nothing of the embedded web elements.
Ok, it was worth trying…
I think raising an issue on gitHub looks like the way forward
Just found this https://github.com/eclipse/smarthome/issues/6640 while looking around for this behaviour. To me it’s actually a bug that should be fixed since it made the behaviour worse compared to before.
I’m migrating from 2.1 to 2.4 and after the time consuming migration from KNX1 to KNX2, i’am also struggeling with this empty line in webviews.
Any ideas how to solve this?
There is an issue on gitHub about this already.
For anyone struggling with this I have a temporary fix. @trant @Sascha_Billian @isenberg
Include the following in the head of the page you are loading in the webview.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(parent.document).find('.mdl-form__row.mdl-form__row--height-auto.mdl-cell.mdl-cell--12-col').prev().css("display", "none");
</script>
I should add while this works for my use case, I’ve not fully tested it and may have not spotted a side effect.
Chris
2 Likes
Would it maybe even work to to produce an additional html document with just these scripts and to include this in addition to any webview one already has? Then the change would only be an additional (yet invisible) webview per hierarchy level in the sitemap that has a webview in it, one would not have to mess with the existing html pages (some of which may not even be under our control). I have not tried this yet since I do not have the time, but this may be an idea … (I’ll try it later)
Quite possibly.
You will want to also hide the webview. Make sure it’s the last thing on the page and use this code from @patrik_gfeller
// Hide the last web element of the page ...
_webViewElements = window.parent.document.body.getElementsByClassName("mdl-form__row mdl-form__row--height-auto mdl-cell mdl-cell--12-col ");
_lastWebViewElement = _webViewElements[_webViewElements.length - 1];
_lastWebViewElement.style.display = "none";
I didn’t get it to work. As soon as a different hierarchy level is selected the script is no longer carried out. I do not speak enough JavaScript to have an idea how to address this problem. I also do not see how the css injection approach you mentioned worked in the first place since it should face the very same problem: the injection script is only executed when the hierarchy level is shown that has the webview with the injection. Anyway, what works is an additional icon buster Webview as the last item in each hierarchy level that one wants to treat. The following has the code for the icon buster Webview that worked for me:
<head>
<style>
</style>
</head>
<body>
<script type="text/javascript">
// Hide the last web element of the page ...
_webViewElements = window.parent.document.body.getElementsByClassName("mdl-form__row mdl-form__row--height-auto mdl-cell mdl-cell--12-col ");
_lastWebViewElement = _webViewElements[_webViewElements.length - 1];
_lastWebViewElement.style.display = "none";
_lastWebViewElement.previousElementSibling.style.display = "none";
// hide the Webview icon for all Webview instances
Array.prototype.forEach.call(_webViewElements, function(element) {
element.previousElementSibling.style.display = "none";
});
</script>
</body>
If anyone comes up with a better solution (i.e., only a single icon buster Webview in the entire sitemap) please let us all know.
Hello,
I managed to get a working solution using JQuery. I tried to make it flexible and no too generic in the elements targeting.
In fact, the space on top of the iframe is reserved for the icon AND the label of the Webview, so my solution hides this space (the entire <div> element) if no icon and no label are defined.
If no icon is defined but a label is, the icon <img> element will be hidden to prevent printing of unknown icon by the browser.
All the logic resides in the following html document, which must be embedded in the sitemap as the last Webview element (self-destructing) :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="jquery-3.4.1.slim.min.js"></script>
<script>
$(parent.document).ready(function() {
const iconImg = $("img[data-icon='webview']", parent.document);
iconImg.hide();
iconImg
.parent()
.siblings("span.mdl-form__label")
.text(function(i, t) {
return $.trim(t);
})
.filter(":empty")
.parent()
.hide();
$("div[data-control-type='webview']", parent.document)
.last()
.parents("div.mdl-cell")
.remove();
});
</script>
</head>
</html>
1 Like
I’ll give this a try, seems like a nice sollution.