I have a simple webview tag on my xml file, like this:
<WebView src="{{ content }}"/>
I've tried set the background-color to 'transparent' in the css file, also using inline css, but I can't get the webview background set to transparent.
More info about the project:
- nativescript version: 2.2.1
- I have a list of ticket's movements (like incidences about a particular case) on a support system app. This movements usually are html emails (with images, styles and so)... that's because I'm using a webview instead of an htmlview. As you can see in the image, the webview's background is white.
There's my xml snippet:
<!-- Repeat ticket's movs-->
<Repeater items="{{ movs }}">
<Repeater.itemTemplate>
<StackLayout>
<StackLayout class="{{ movClass }}" visibility="{{ id != -1 ? 'visible' : 'collapsed' }}">
<Label class="date" text="{{name + ' #' + dateValue}}"/>
<WebView src="{{ content }}"/>
</StackLayout>
</StackLayout>
</Repeater.itemTemplate>
</Repeater>
In the js file, I fetch the movements from an url and populate the array.
If you need more info, please tell me and I upload it.
Thanks!
BACKGROUND-NOT-TRANSPARENT-WEBVIEW
To make WebView with transparent background color you could use native code. For Android you could use setBackgroundColor method for Android to make background color transparent. For iOS you should use UIColor.clearColor() to remove the webView background color. You could review the below attached sample code. In regard to that you should also add tns-platform-declarations plugin in your project, that would allow you to use some native methods in your typescript code.
main-page.xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
<GridLayout rows="* 70 70" columns="*" backgroundColor="green" >
<WebView row="0" loaded="wvloaded" id="wv" class="webviewStyle" src="
<html style='background-color: transparent;'>
<body style='background-color: transparent;'>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>" />
<Label row="1" text="{{email}}" textWrap="true" />
<Label row="2" text="{{password}}" textWrap="true" />
</GridLayout>
</Page>
main-page.ts
import { EventData } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { HelloWorldModel } from "./main-view-model";
import {WebView} from "tns-core-modules/ui/web-view";
import {isIOS, isAndroid} from "tns-core-modules/platform"
var Observable = require("data/observable").Observable;
var user = new Observable({
email: "user#domain.com",
password: "password"
});
// Event handler for Page "navigatingTo" event attached in main-page.xml
export function navigatingTo(args: EventData) {
// Get the event sender
var page = <Page>args.object;
page.bindingContext = user;
}
export function wvloaded(args:EventData){
var newwv:WebView =<WebView> args.object;
if(isAndroid){
newwv.android.setBackgroundColor(0x00000000);//android.graphics.Color.TRANSPARENT);//
newwv.android.setLayerType(android.view.View.LAYER_TYPE_SOFTWARE, null);
}
if(isIOS){
newwv.ios.backgroundColor = UIColor.clearColor;
newwv.ios.opaque=false;
}
}
Related
I am trying to bind a popover to display the line item data based on what was clicked. I am working on a header and detail ODATA set. I am able to display the popover, just having an issue displaying the clicked value. Details below. Thank you in advance.
What I want to achieve: Display 100000 in the popover when clicked.
Popover Controller code:
viewDetails: function(oEvent) {
var oEve = oEvent.getSource();
var oCtx = oEvent.getSource().getParent().getBindingContext("mAggingData");
if (!this._oEditAddPopover) {
this._oEditAddPopover = sap.ui.xmlfragment("Viewcustomeroptions", "Z_AR_AGING.view.ViewCustomerOptions",
this);
}
this.getView().addDependent(this._oEditAddPopover);
this._oEditAddPopover.bindElement(oCtx.getPath().split('/')[2]);
this._oEditAddPopover.openBy(oEve);
},
Data Path:
rows="{ path:'mAggingData>/VendorDetails', hierarchyLevelFor : 'Heirarchy', parameters: {arrayNames:['categories']} }"
View.xml Code:
<Column width="8rem" id="id_level0" sortProperty="Customer" filterProperty="Customer" class="sortingProp">
<m:Label text="Customer" id="CustomerNum"/>
<template >
<m:Link id="customerDetails" text="{mAggingData>Customer}" wrapping="false" class="applyRowHighlight" press="viewDetails"/>
</template>
</Column>
View Customer Options Pop Over - {Customer} not outputting the data in the popover:
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<Popover id="myPopover" title="{Customer}" class="sapUiPopupWithPadding" placement="Right" initialFocus="action">
<footer>
<Toolbar>
<ToolbarSpacer/>
<Button id="action" text="View Customer Details" press="navToCustomer"/>
</Toolbar>
</footer>
</Popover>
</core:FragmentDefinition>
F12 Debugger Output of SPath
Update:
Binding from HeaderSet, but it still does not give the expected output from mAggingData > VendorDetails > categories:
Output
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<Popover id="myPopover" title="{mAggingData>Customer}" class="sapUiPopupWithPadding" placement="Right" initialFocus="action">
<content>
<List id="listPopover" items = "{/CustHeadSet}">
<StandardListItem title="{Customer}"/>
</List>
</content>
<footer>
<Toolbar>
<ToolbarSpacer/>
<Button id="action" text="View Customer Details" press="navToCustomer"/>
</Toolbar>
</footer>
</Popover>
</core:FragmentDefinition>
Prefix the binding in the popover with the model name (i.e. title="{mAggingData>Customer}").
I have an Electron WebView. I want to take a screenshot of its content and display it somewhere in my application.
I have tried using the webview.capturePage method, which returns a Native Image.
How can I add that image to the DOM and thus display it on my app? I'm unsure how to convert it.
You can use image.toDataURL for this purpose (as #Mikaeru suggested) An example could be
<html>
<body>
<webview id="view" src="https://www.github.com/" style="width:320px; height:240px">
</webview>
<button id="capture">Capture</button>
<img id="show" src="" />
<script>
const wv = document.getElementById('view')
const b = document.getElementById('capture')
const i = document.getElementById('show')
b.addEventListener('click', () => {
wv.capturePage((img) => {
i.src = img.toDataURL()
})
})
</script>
</body>
</html>
I have a html page with a changing div block.
When new text appears in this block, the font size begins to decrease,
so that the entire text fits in the WebView.
I want the font size to remain unchanged, but instead a scroll bar appears in WebView.
Problem is reproduce on mobile device only.
Code of Html page:
<!DOCTYPE html>
<html>
<head>
<title>Problem with Page</title>
</head>
<body>
<script>
AddText = function (v) {
var div = document.getElementById('TextContainer');
div.innerHTML = div.innerHTML + v;
};
</script>
<div style="font-size: 250%;" id="TextContainer"></div>
<input type="submit" value="button" onClick="AddText(this.value)">
</body>
</html>
Code of Xaml Page:
<Page
x:Class="EvidentCalculator.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:EvidentCalculator"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<WebView Margin="3,0,3,0" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Top" Height="150" x:Name="WebContainer"/>
<Button Grid.Row="1" Content="Invoke script!" Click="BtnClick"/>
</Grid>
</Page>
Code behind:
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
InitializeComponent();
Loaded+=OnLoad;
}
private async void OnLoad(object sender, RoutedEventArgs e)
{
//TODO Need some code to load html into WebView!!!
}
private async void BtnClick(object sender, RoutedEventArgs e)
{
await WebContainer.InvokeScriptAsync("AddText", new[] { "Some test text" });
}
}
I have tested your code and reproduced your issue. The problem is your div block was stretched when you added "button" text, and it did not wrap automatically. In order that the div block can work well, you could create the style with word-break:break-all.
<body>
<script>
AddText = function (v) {
var div = document.getElementById('TextContainer');
div.innerHTML = div.innerHTML + v;
};
</script>
<div style="font-size: 250%; word-break:break-all" id="TextContainer"></div>
<input type="submit" value="button" onClick="AddText(this.value)" />
<button id="btnClick" type="button" value="Some test" onclick="AddText(this.value)">Click Me </button>
</body>
If you need the text in ONE row with scroll bar in WebView and keep text font size, you could add overflow-y:scroll to the style.
<div style="font-size: 250%; overflow-y:scroll" id="TextContainer" ></div>
I have a this structure in my NativeScript page:
<ListView #listView [items]="summaryData" row="0">
<Template let-item="item">
<GridLayout columns="180, *, auto" rows="auto, *">
<Label [text]="item.name" col="0" class="summary"></Label>
<Label [text]="item.value" col=1 class="summary"></Label>
</GridLayout>
</Template>
</ListView>
For the iOS side I'd like to use the native disclosure indicator for the table view cell. I was able to remove the separator lines by using the following code:
#ViewChild("listView") listView: ElementRef;
ngOnInit() {
this.summaryData = this._summaryService.load();
if (this._page.ios) {
let iosListView = <ListView>this.listView.nativeElement;
iosListView.ios.separatorStyle = 0; // Removes the separator lines.
}
}
But I can't seem to figure out how to get to the individual rows aka UITableViewCell to set the accessoryType value. Is this possible with NativeScript?
You need to subscribe to the itemLoading of the ListView and then change the accessoryType there. So your html should be something like:
<ListView #listView [items]="summaryData" (itemLoading)="onItemLoading($event)" row="0">
<Template let-item="item">
<GridLayout columns="180, *, auto" rows="auto, *">
<Label [text]="item.name" col="0" class="summary"></Label>
<Label [text]="item.value" col=1 class="summary"></Label>
</GridLayout>
</Template>
</ListView>
And then in your component to have:
import {ItemEventData} from "ui/list-view";
onItemLoading(args: ItemEventData) {
if (args.ios) {
// args.ios is instance of UITableViewCell
args.ios.accessoryType = 1; // UITableViewCellAccessoryDisclosureIndicator
}
}
I have a WebView inside a HubSection in a Hub control:
<HubSection x:Name="details_section" ...>
<!-- ... -->
<DataTemplate>
<WebView x:Name="webView" VerticalAlignment="Stretch" Margin="0" Height="300" />
</DataTemplate>
</HubSection>
The problem is that, when I make it navigate to an HTML string, it does not render the content.
// I adjusted and simplified the code
WebView wv = elem.FindName("webView") as WebView;
if (wv != null) {
wv.NavigateToString(detailTemplate);
}
Of course I debugged to see that the method actually gets called. Moreover, the LoadCompleted event gets called as well.
The problem is not due to bad HTML code as I tested with plain "<html><body>hello</body></html>".
I solved this issue by using the following extension: https://github.com/timheuer/callisto/blob/master/src/Callisto/Extensions/WebViewExtension.cs
Use:
<ns:MyPage
xmlns:ns="using:mylib"
xmlns:ext="using:WSLibrary.Extensions" ...>
<!-- ... -->
<HubSection x:Name="details_section" ...>
<!-- ... -->
<DataTemplate>
<WebView ext:WebViewExtensions.HtmlSource="{Binding MyHtmlString}" ... />
</DataTemplate>
</HubSection>
<!-- ... -->
</ns:MyPage>
Set HorizontalContentAlignment and VerticalContentAlignment of HubSection to Stretch.
<HubSection x:Name="details_section"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch">