I have created a WebBrowser control in the xaml,
and bind some html via string to it. It's working fine .
But the WebBrowser will never auto adjust its height.
<phone:WebBrowser
HorizontalAlignment="Stretch"
Margin="0,6,0,0" Name="myWebView"
VerticalAlignment="Top" />
private void WebBrowser_OnLoaded(object sender, RoutedEventArgs e)
{
String htmlTags = "<html><head><meta charset='UTF-8'/><meta name=\"viewport\" content=\"width='480', initial-scale='1'\"></head><body><center>{0}</center></body></html>";
myWebView.NavigateToString(String.Format(htmlTags, getHTMLContent());
}
public string getHTMLContent()
{
StringBuilder htmlBody = new StringBuilder();
htmlBody.Append("<table cellpadding=\"0\" cellspacing=\"0\" width=\"704\" height=\"484\" background=\"https://known.com/img/back/123456.jpg\" style=\"background-repeat: no-repeat; background-position: center;\">");
htmlBody.Append("<tr>");
htmlBody.Append("<td valign=top>");
htmlBody.Append("<div style=\"position: absolute;\">");
htmlBody.Append("<div style=\"position: absolute; display: table; width: 132px; height: 132px; top: 44px; left: 44px; z-index:0;\">");
htmlBody.Append("<img src=\"https://known.com/img/icon/87654.jpg\" width=\"100%\" height=\"100%\"/>");
htmlBody.Append("</div>");
htmlBody.Append("<div style=\"position: absolute; display: table; width: 704px; height: 484px; top: 0px; left: 0px; z-index:0; \">");
htmlBody.Append("<img src=\"https://known.com/img/icon/234255.jpg\" width=\"100%\" height=\"100%\"/>");
htmlBody.Append("</div>");
htmlBody.Append("<div style=\"position: absolute; display: table; width: 440px; height: 264px; top: 184px; left: 184px; z-index:0; font-family:times; font-size:14px; color:#FFFFFF; \" align=\"center\">");
htmlBody.Append("<div style=\"display: table-cell;vertical-align: middle;\">");
htmlBody.Append("</div>");
htmlBody.Append("</div>");
htmlBody.Append("</div>");
htmlBody.Append("</td>");
htmlBody.Append("</tr>");
htmlBody.Append("</table>");
return htmlBody.ToString();
}
What I want the WebBrowser to be
1) Auto adjust its height depends on the HTML String. If i pass only one image mean, it should auto adjust depends on the image.
It there is no content mean, browser should hide itself.
2) Should not scrollable, because the WebBrowser already stretch its height to fit the content.
How can I make it? Please let me any idea to resolve my problem.
You need to use javascript to get the height of the rendered html and set it to your WebBrowser control.
Here is an implementation of this.
Related
I'm trying to play a video in my C# WinForm.
Here is what I have so far:
I have a webViewer control in my form, and the following code:
// Play YouTube video in webBrowser1
string url = "https://www.youtube.com/watch?v=5aCbWqKl-wU";
string html = "<html><head>";
html += "<meta content='IE=Edge' http-equiv='X-UA-Compatible'/>";
html += "<iframe id='video' src='https://www.youtube.com/embed/{0}' style=\"padding: 0px; width: 100%; height: 100%; border: none; display: block;\" allowfullscreen></iframe>";
html += "</body></html>";
webBrowser1.DocumentText = string.Format(html, url.Split('=')[1]);
Here is what it looks like when I run my app:
The problem is that the video does not fill up the entire webViewer (which is the white part in the image).
I have the webViewer1.Anchor property set to all, so when I resize the form, the webViewer resizes based on the form.
Note:
When the user clicks the fullscreen button the problem is fixed. But this is a bad solution for me because it's a bad experience for the user. Plus, the user may not know that they need to click the fullscreen button. This is what that looks like:
How do I make the video take up the entire webViewer without the user having to click the fullscreen button?
Also, as a side-question, when the user clicks the "YouTube" button, it opens Internet Explorer, and not the default browser. How do I fix this?
You need to fix the styling of your page:
// Play YouTube video in webBrowser1
string url = "https://www.youtube.com/watch?v=5aCbWqKl-wU";
string html = "<html style='width: 100%; height: 100%; margin: 0; padding: 0;'><head>";
html += "<meta content='IE=Edge' http-equiv='X-UA-Compatible'/>";
html += "</head><body style='width: 100%; height: 100%; margin: 0; padding: 0;'>";
html += "<iframe id='video' src='https://www.youtube.com/embed/{0}' style=\"padding: 0px; width: 100%; height: 100%; border: none; display: block;\" allowfullscreen></iframe>";
html += "</body></html>";
webBrowser1.DocumentText = string.Format(html, url.Split('=')[1]);
This ensures that the HTML and BODY tags occupy 100% of the page, and that allows the child iframe to occupy 100% of the page. That generates this HTML:
<html style='width: 100%; height: 100%; margin: 0; padding: 0;'>
<head>
<meta content='IE=Edge' http-equiv='X-UA-Compatible'/>
</head>
<body style='width: 100%; height: 100%; margin: 0; padding: 0;'>
<iframe id='video' src='https://www.youtube.com/embed/5aCbWqKl-wU' style="padding: 0px; width: 100%; height: 100%; border: none; display: block;" allowfullscreen></iframe>
</body>
</html>
I think you need to set up an Aspect Ratio.
Checkout the document here
https://www.w3schools.com/howto/howto_css_responsive_iframes.asp
I am using vs2019. I don’t know why. After trying it, it is in a black state and does not display the video.
I am working with telerik ui combobox and enabled its checkbox property. Also I a using my custom skin.
My problem is that I am not able to change the style of checkbox. I wanted to change how the checkbox style as per my requirements especially the background colour of checkbox and its shape.
enter image description here
First, I advise that you check out the w3schools that explains how CheckBoxes can be styled at How TO - Custom Checkbox.
And now, inspect the Telerik ComboBox to understand how it is rendered. As you can see, this HTML structure differs a little bit from the one presented in the 3wschools tutorial.
Don't you worry, you can adjust that. Use your JavaScript/jQuery skills and imagination to bend the structure to your will.
Attach the OnClientLoad event to the ComboBox
<telerik:RadComboBox ID="RadComboBox1" runat="server"
RenderMode="Lightweight" CheckBoxes="true"
OnClientLoad="OnClientLoad">
<Items>
<telerik:RadComboBoxItem Text="Item 1" />
<telerik:RadComboBoxItem Text="Item 2" />
<telerik:RadComboBoxItem Text="Item 3" />
<telerik:RadComboBoxItem Text="Item 4" />
</Items>
</telerik:RadComboBox>
When this event fires, make some changes to the HTML structure similar to the example from w3schools:
function OnClientLoad(sender, args) {
// get reference to the ComboBox Items
var $comboItems = $(sender.get_dropDownElement()).find('.rcbItem');
// Loop through each item
$comboItems.each(function () {
var $item = $(this);
// add the container class to the items
$item.addClass('container');
// render a span element inside the item
$item.find('label').append('<span class="checkmark"></span>');
})
}
You should now have a similar structure the CSS could work with:
You can now re-use the CSS from the w3schools tutorial with a slight change, that is by making the selectors more specific (stronger):
/* The container */
.RadComboBoxDropDown .container {
display: block;
position: relative;
padding-left: 35px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.RadComboBoxDropDown .container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.RadComboBoxDropDown .container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.RadComboBoxDropDown .container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.RadComboBoxDropDown .checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.RadComboBoxDropDown .container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.RadComboBoxDropDown .container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
More details on CSS Specificity
Specifics on CSS Specificity;
CSS Specificity: Things You Should Know;
Specificity - CSS | MSDN;
CSS !important: Don’t Use It. Do This Instead
The final Result of the Telerik ComboBox with customized CheckBox design
I tried to keep my answer as short as possible. Hope it will prove helpful ;)
I need to create two buttons in the bottom of the page with a list view. So I create two stacks in the body of the page and put listview and buttons to them like below:
<z-place inside="Body">
<Stack Direction="Vertical">
<Stack Id="top">
</Stack>
<Stack Id="bottomMenu" Direction="Horizontal">
<Button Text="Btn1" CssClass="btmButton1"></Button>
<Button Text="Btn2" CssClass="btmButton2"></Button>
</Stack>
</Stack>
</z-place>
And the stylesheet like this:
//Android.scss
.btmButton1 {
background: linear-gradient(to bottom, #039795, #196e6d);
color: #ffffff;
height: 52px;
margin: 0;
border-radius: 0;
}
.btmButton2 {
background: linear-gradient(to bottom, #5c0eb3, #3f1968);
color: #ffffff;
height: 52px;
margin: 0;
border-radius: 0;
}
#top {
height: calc("(Zebble.Device.Screen.Height - view.ActualHeight)-140");
background: #dadada
}
#bottomMenu {
width: calc("Zebble.Device.Screen.Width");
margin-top: calc("(Zebble.Device.Screen.Height - view.ActualHeight)-140");
position: fixed;
}
But, when I set the #top height buttons was hidden.
To make button bar on the bottom of navigation bar page, you can use this css role in common.scss for all platforms.
.btmButton1 {
background: linear-gradient(to bottom, #039795, #196e6d);
color: #ffffff;
height: 52px;
margin: 0;
border-radius: 0;
}
.btmButton2 {
background: linear-gradient(to bottom, #5c0eb3, #3f1968);
color: #ffffff;
height: 52px;
margin: 0;
border-radius: 0;
}
#top {
height: calc("(Zebble.Device.Screen.Height - 116)");
background: #dadada
}
#bottomMenu {
width: calc("Zebble.Device.Screen.Width");
height:52px;
}
And your body of main page view code is:
<z-place inside="Body">
<Stack Direction="Vertical">
<Modules.ContactsList Id="top" />
<Stack Id="bottomMenu" Direction="Horizontal">
<Button Text="Btn1" CssClass="btmButton1"></Button>
<Button Text="Btn2" CssClass="btmButton2"></Button>
</Stack>
</Stack>
</z-place>
There is a notice in above code which is the list view, in list view, you should use scroll view that you able to scroll your list up and down.
I have the following situation:
I've got a header, content, and a footer.
Now the header and footer have a fixed height and are always on the screen.
css for footer and header:
#footer {
background-color:#e6e6e6;
width:100%;
height:46px;
bottom:0;
left:0;
position:fixed;
border-top:1px solid #7F8C8D;
z-index:101;
}
#header {
border-bottom:1px solid black;
height:45px;
background-color:#828282;
color:#FFF;
position:absolute;
top:0;
left:0;
right:0;
z-index:105;
width:100%;
box-sizing:border-box;
}
As for the content i have the following:
#content {
background: #9cbbe3 url(../img/backgr.gif) repeat-x;
right:0;
left:0;
background-size:auto;
position: absolute; top: 0px; bottom: 0px;
overflow: auto;
}
Now this works! at first...
But then i go and maximize and minimize the window, and i end up with two scroll-bars.
When i refresh the page the problem is fixed. and re-sizing works as far as I've noticed. but when maximizing and restoring the window i end up with two scroll-bars.
How can i solve this preferably using CSS?
Maybe this works out for you:
html, body { overflow: hidden; }
Try changing your overflow
overflow: auto;
to:
overflow: hidden;
When I do the following:
<asp:Label CssClass="someField" runat="server">*</asp:Label>
<asp:Label ID="someID" runat="server" Text="SomeText" AssociatedControlID="someACID"></asp:Label>
Or:
<span class="someField">*</span>
<asp:Label ID="someID" runat="server" Text="SomeText" AssociatedControlID="someACID"></asp:Label>
Css someField:
span.someField {
color: #CC0000;
font-weight: 600;
}
Css for label:
form label {
clear: left;
cursor: pointer;
display: block;
float: left;
font-size: 1em;
margin: 0 3px 4px 0;
padding: 4px 0 4px 5px;
width: 200px;
}
the output I get is
SomeText*
When what I want is
*SomeText
Anyone know why this is happening?
By setting float:left on the label you are taking it out of the flow of the document and causing it to render before the span. You need to either set the span to be a block layout and float it left as well or remove the float from the label.
UPDATE:
There's a good description of what floating does to elements and some considerations here: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
Another option
form label:after {
content: "*";
}