I am making a web browser in electron, and I have an issue where the page I open in my webview doesn't resize to the window's size and goes outside of the bounds.
Here is a picture of the issue:
If someone knows how to help me, I would really appreciate that.
Add this CSS to your window.html page:
/* make sure that the body fills the entire window */
body {
width:100vw;
height:100vh;
margin:0px;
}
/* make sure that the webview element fills the entire body*/
webview {
height:100%;
width:100%;
}
Related
I'm having a hard time figuring out how to make my footer stick to the bottom of the screen, even when the page is smaller than the screen.
www.test-domain.sk
I'm guessing it's something to do with the container length, but I'm honestly completely unsure.
Any help would be appreciated. :)
This concept is something known as a sticky footer. The Mozilla Developer Network has a page here illustrating a few ways to accomplish it. In the example of your www.test-domain.sk page, I believe you can add the following css to make your footer stick to the bottom of the viewport (screen).
html {min-height:100%)
body {100vh}
div#page {min-height:100vh; display:grid; grid-template-rows: auto 1fr auto}
Assuming you are looking for something like this, but if not, be more specific. As in post the code you already have.
footer {
position: fixed;
bottom: 0;
}
I want to make a ionic popup blinks after a timeout. I just don't know how to change background color dynamically, after opened.
Someone has any idea?
You can assign your popup a custom CSS class as described in the official documentation:
$ionicPopup.show({
cssClass: "blink-popup",
...
});
And then you can style your popup using CSS:
.blink-popup.popup-container .popup {
background-color: green;
}
Code found here: https://forum.ionicframework.com/t/how-to-use-custom-css-in-popup/22414/5
And some more details on customizing your popup: http://www.codeandyou.com/2015/08/How-to-customize-color-and-theme-of-ionic-popup.html
I am new to Chrome extension development.
I have a browser action with a default popup as an html page.
now the problem is that I am providing a height and width to its body but still the popup is coming to be very small.
Add width and height to the body, using the following CSS:
body{
width:500px;
height:500px;
}
Link a Style Sheet style.css to your popup HTML page and then customize it as you wish.
I have parsed html content to display in a webview.
There are phone numbers which are detected by webview by default, but those links are displayed in blue color, I want to change it to white color, how is it possible?
If anyone know please tell me..
Thanks in advance.
According to this question all you need to do is to set the a (hyperlink) CSS properties. See the answer of David Thomas. Specifically, he proposes this solution for just phone URLs:
a[href^=tel] { /* css */ }
You can change style color of your html content on server side or in client side.
For doing it from client side you must get first the elementId or class of your html content (you can do it from chrome with right mouse click on the link and selecting inspect element)
Then on your uiwebview (once it finished being loaded) you execute javascript for changing element color:
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
NSString *javascripString = [NSString stringWithFormat:#"document.getElementById(\"linkId\").style.color=\"white\";", m_studyId];
[uiwebview stringByEvaluatingJavaScriptFromString:javascripString];
}
The iPhone uses the current color setting in the a:link property. It uses that value even if the phone number is plain text and not enclosed with the hyperlink tag. If no CSS definition is set, iPhone uses the default. For those who may not know, you can set the values like this.
<head>
<style>
a:link {
color:#FFCC14;
text-decoration:underline;
}
</style>
</head>
If you do not have a CSS style setting for hyperlink then add it or Change the color to the color that works best for your webpage.
Try DarkDust solution. From client side it would be something like that:
- (void)webViewDidFinishLoad:(UIWebView *)webView{
NSString *javascripString = [NSString stringWithFormat:#"document.createElement('meta');meta.name='format-detection';meta.content='telephone=no';document.getElementsByTagName('head')[0].appendChild(meta);"];
[webView stringByEvaluatingJavaScriptFromString:javascripString];
}
Hey guys I'm currently having trouble with my CSS linking. Basically I want the colour of my links to change when I hover over them, and click on them and such. But for some reason it is not working when I view it on a browser. Below is my HTML code and my CSS code, they are seperate files and are linked togather. Thanks in advance. (I apologise if the codes are not appearing correctly but it is all there)
EDIT: Don't worry its fixed now :D thanks for the help
from what I see, you don't have a:hover,a:vistied, or a:active defined anywhere, which is what controls the behavior you're looking for.
Are you coding by hand or using Dreamweaver as a WYSIWYG?
NOTE: This could be because the files aren't formatted well in your question, so Markdown could have dropped some characters from the display.
From what I can see, the CSS file isn't written correctly. I'm going to give one example for you which fits for the whole file:
content {
width: 510px;
float: left;
}
This snippet above looks for the <content> tag in the HTML, and when it finds that tag, it will give it a width of 510px and floats it to the left. The problem here is that there are no <content> tags in your HTML page OR in HTML 4.01 itself. What you need to do is change it to this:
.content {
width: 510px;
float: left;
}
By adding the '.' before 'content' in the CSS, it changes 'content' from <content> to finding a tag that has class="content" as an attribute.
Also, to get the <a> tags to change on hover, etc, use the pseudo-elements (pseudo-attributes?) of :hover, :active, and :visited, for when a user hovers over a link, clicks on a link, and has previously visited a link, respectively.
Example:
a {
color: blue;
}
a:hover {
color: red;
}
In this example, a link will display as blue unless the user has their mouse on the link.