I'm going crazy here. I thought I had a handle on Polymer styling, but alas.
I've got:
<my-app>
<sign-in>
<core-overlay>
In sign_in.css I style:
core-overlay {
background: red;
}
But it doesn't work!
My sign_in.html is:
<link rel="import" href="../../../../../../../packages/polymer/polymer.html">
<link rel="import" href="../../../../../../../packages/core_elements/core_overlay.html">
<polymer-element name="sign-in">
<template>
<link rel="stylesheet" href="sign_in.css">
<core-overlay id="overlay" class="overlay" layered backdrop opened="false" transition="core-transition-center">
<span id="message">Please sign in to comment.</span>
<button class="signin-btn" id="facebook-signin" on-click="{{signInWithFacebook}}">Sign in with Facebook</button>
</core-overlay>
</template>
<script type="application/dart" src="sign_in.dart"></script>
</polymer-element>
The backdrop and core-overlay elements are created dynamically as child of <body>. To style it you add the following css to your entry page CSS
backdrop
<style>
body div.core-overlay-backdrop {
background: red;
}
</style>
overlay
* /deep/ core-overlay {
box-sizing: border-box;
-moz-box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
-webkit-user-select: none;
-moz-user-select: none;
overflow: hidden;
background: green;
padding:30px 42px;
outline: 1px solid rgba(0,0,0,0.2);
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
The overlay css is copied from https://github.com/Polymer/core-overlay/blob/master/demo.html#L38-L49.
The core-overlay demo uses a custom Polymer element x-dialog to encapsulate the core-overlay and the CSS.
Related
Here is the part of my code in which I have problems. I can't understand why the Placeholders are not seen. It's not the problem of the browser (I open another HTML here and placeholders work). Please, hint what can be wrong.
<form id="form" action="https://jsonplaceholder.typicode.com/posts" class="contacts__form">
<input name="Имя" type="text" placeholder="Имя*" data-validate-field="name"
class="contacts__form-input form-name" autocomplete="off" id="name">
<input name="tel" type="tel" class="contacts__form-input form-phone" placeholder="Телефон*"
data-validate-field="tel" data-validate-rules="phone" autocomplete="off" id="tel">
<button class="btn-reset contacts__form-btn" id="submit-btn">Заказать обратный звонок</button>
</form>
Head:
<link rel="shortcut icon" href="img/flavicon.png" type="image/png">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="https://unpkg.com/simplebar#latest/dist/simplebar.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.css" />
<link rel="stylesheet" href="css/choices.min.css">
<link rel="stylesheet" href="css/accordion.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/media.css">
<script src="https://unpkg.com/simplebar#latest/dist/simplebar.min.js"></script>
<script src="js/choices.min.js"></script>
<script src="js/dropdown.js"></script>
<script src="js/scroll.js"></script>
<script src="js/painters-buttons.js"></script>
<script src="https://unpkg.com/just-validate#latest/dist/just-validate.production.min.js"></script>
<script src="js/inputmask.min.js"></script>
<script src="https://api-maps.yandex.ru/2.1/?apikey=ваш API-ключ&lang=ru_RU" type="text/javascript"></script>
<script src="js/ymaps.js"></script>
scripts at the end of the body:
<script src="js/focus-visible.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.js"></script>
<script src="js/slider.js"></script>
<script src="js/select.js"></script>
<script src="js/accordion.min.js"></script>
<script src="js/accordion.js"></script>
<script src="js/validation.js"></script>
<script src="js/validation-rules.js"></script>
CSS:
.contacts__form-input {
width: 270px;
height: 50px;
border: 1px solid #333333;
border-radius: 100px;
}
.form-name, .form-phone {
margin-right: 20px;
}
::-webkit-input-placeholder {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 32px;
color: var(--dusty-gray-color);
}
::-moz-placeholder {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 32px;
color: var(--dusty-gray-color);
}
:-moz-placeholder {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 32px;
color: var(--dusty-gray-color);
}
:-ms-input-placeholder {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 32px;
color: var(--dusty-gray-color);
}
.contacts__form-btn {
margin-right: 69px;
padding: 12.5px 35px;
padding-right: 36px;
font-weight: 700;
font-size: 18px;
line-height: 25px;
color: var(--amethyst-color);
border: 2px solid var(--amethyst-color);
border-radius: 100px;
}
I tried to change font-family, changed var to normal bright color, and even inserted the code from another HTML, where the placeholders are seen. Nothing works.
The problem turned out to be simple. I have already used placeholder for the a search input above in the code. This link helped Multiple styles for input placeholder text
All is solved.
I have a webview in my UWP application, that shows some text. Some of the text is clickable (). I have tried adding the following CSS and including that in the HTML, but it does not seem to work.
a:hover {
color: red;
}
Does webview support hover in a UWP application? I have been unable to find any information regarding this.
EDIT:
Here is the HTML.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
<style>
body {
font-family: 'Segoe UI';
font-size: 10pt;
color: #FFFFFF;
}
.link {
text-decoration: none;
color: #FFFFFF;
}
.link:hover {
background-color: red;
}
.linenumber {
display: inline-block;
width: 50px;
min-width: 50px;
margin-right: 10px;
}
</style>
</head>
<body>
<a class='link'>
<div>
<div class='linenumber'>1</div>
Alpha
</div>
</a>
<a class='link'>
<div>
<div class='linenumber'>2</div>
Beta
</div>
</a>
<script type='text/javascript'>
for (var i = 0; i < document.links.length; i++) {
document.links[i].onclick = function() {
window.external.notify(this.href);
return false;
}
}
</script>
</body>
</html>
}
UWP Webview: CSS :hover support?
UWP Webview support css :hover tag, you could place style in the html like the following. and load html with ms-appx-web uri scheme.
Html
<!DOCTYPE html>
<style>
a:hover{
color:red;
}
</style>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Hello Html</title>
</head>
<body>
<a href="https://www.google.com" >Click Me</a>
</body>
</html>
Xaml
<Grid>
<WebView Source="ms-appx-web:///TestPage.html"/>
</Grid>
Update
<style>
body {
font-family: 'Segoe UI';
font-size: 18pt;
color: #FFFFFF;
}
.link {
text-decoration: none;
color: #000000;
}
.link:hover{
color:red;
}
.linenumber {
display: inline-block;
width: 50px;
min-width: 50px;
margin-right: 10px;
}
</style>
I've learned how to create a jquery ui tab, thanks to http://jqueryui.com/tabs, and customized the look of it. I've been searching the web on how to highlight a selected tab by changing it's background color when someone clicks on it. So far, it's been frustrated and unsuccessful.
Here's the HTML Code Use:
<!DOCTYPE html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<title>Jquery Tab Test</title>
</head>
<body>
<div id="tab-wrapper">
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<br class="clearboth" />
<div id="tabs1" class="tab-content">
Content 1
</div>
<div id="tabs2" class="tab-content">
Content 2
</div>
<div id="tabs3" class="tab-content tabs3">
Content 3
</div>
</div>
</div>
</body>
and CSS:
body, html {
height: 101%;
}
body {
font-family: arial;
}
.clearboth {
clear: both;
padding: 0;
margin: 0;
}
#tab-wrapper {
background-color: #f00fff;
border: solid 1px #909090;
padding: 5px;
width: 330px;
}
#tabs {
overflow: hidden;
}
#tabs ul li,
#tabs ul {
margin: 0;
padding: 0;
list-style: none;
}
#tabs ul a {
float: left;
padding: 5px;
display: block;
width: 100px;
text-align: center;
text-decoration: none;
color: #000000;
height: 20px;
line-height: 20px;
font-size: 10pt;
font-weight: bold;
background-color: #cccccc;
}
#tabs ul a:hover {
background-color: #f1f1f1;
}
#tabs .tab-content {
padding: 5px;
display: block;
background-color: #f1f1f1;
font-size: 10pt;
height: 300px;
border-top: solid 1px #000000;
}
Please help if anyone can.
Jquery assigns the selected tab the class="ui-tabs-active" so to style it simply hook your css into it as follows:
#tabs .ui-tabs-active {
background: yellow;
}
This works for me:
#tabs .ui-tabs-active {
background: yellow;
}
but the above answer did not - the order in the css file is important - the above is after hover.
I have a position absolute div in the body of an html file. I want it to obey the body-margins. Find my code at http://jsfiddle.net/vHApr.
The following is my code:
<html>
<head>
<style type="text/css">
body{
margin: 50px;
background-color: #ddd;
color: #222;
font: 11px "Helvetica Neue",Helvetica,Arial,sans-serif;
min-width: 1080px;
padding-top: 50px;
}
div.test{
position:absolute;
right:0px;
top:55px;
}
</style>
</head>
<body>
<div class="test">
TEST
</div>
</body>
</html>
Add position:relative for body – then the absolute descendant element will be aligned to the edges of body, and not to the viewport (which happens for absolutely positioned elements with no positioned ancestors).
try this
div.test{
position:absolute;
}
Updated jsFiddle http://jsfiddle.net/vHApr/3/
I am having a bit of trouble with IHtmlElementCollection used from Delphi XE2. My document looks something like this, and I load it into TWebBrowser.
<!DOCTYPE html>
<html>
<head>
<title>Test av skjema</title>
<script type="text/javascript" src="Header.js" ></script>
<style>
body{ font-family: 'Segoe UI'; font-size: 9pt; }
table{ background-color: silver; width=98%; }
td{ background-color: white; vertical-align: top; padding: 2px; }
.fullWidth{ width: 100%; border: 0px solid white; }
.noFrame{ border: 0px solid white; overflow: hidden; width=100%; }
.Header{ font-weight: bold; }
.Question{ font-size: 9pt }
.HelpText{ font-size: 8pt; color: navy; }
</style>
</head>
<body>
<form>
...
</form
</body>
</html>
When I try to iterate over all elements in the document using the IHtmlDocument2 interface, the "all" property will only contain the elements up to the script, for a total of 5 IHtmlElement objects. After that, there are no more elements to find.
However, when I remove the tag:
<script type="text/javascript" src="Header.js" ></script>
the iterator will once again find all elements of the file, which is a great deal more. Does anyone know why this happens?