Before continue reading:
This is a polymer 0.5 question and has been deprecated after 1.0 release.
I'm trying to have a toolbar always shown at the top of the web. Then, split the container in a core-drawer-panel, but this element is being displayed always at the top of the web, overwriting the toolbar.
Using the polymer designer: I want to achieve something like this:
If I get the code from the designer, I have:
<core-toolbar id="core_toolbar"></core-toolbar>
<core-drawer-panel transition id="core_drawer_panel" touch-action>
<section id="section" drawer></section>
<section id="section1" main>
<core-field id="core_field" icon="search" theme="core-light-theme" center horizontal layout>
<core-input id="core_input" flex></core-input>
</core-field>
</section>
</core-drawer-panel>
But if I just use that code, the core-drawer goes to top, hiding the toolbar, resulting in something like:
Any idea about how to "move" the core-drawer-panel if there's a toolbar?
Keep in mind I don't want to have a toolbar in the drawer as in the example, but one for the whole app.
Of course, I know I could achieve it by using CSS, but I'm wondering if I'm setting wrong the polymer elements structure.
Just use core-header-panel in order to host your core-toolbar and core-drawer-panel. It will prevent core-drawer-panel of overlapping core-toolbar as you pictured in your example. Here is a jsfiddle and snipped:
http://jsfiddle.net/kreide/ehwa3w1n/
html, body {
height: 100%;
margin: 0;
}
core-header-panel {
height: 100%;
}
[drawer] {
box-shadow: 1px 0 1px rgba(0, 0, 0, 0.1);
}
[main] {
height: 100%;
background-color: rgb(231, 238, 238);
}
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-elements/paper-elements.html">
<link rel="import" href="http://www.polymer-project.org/components/core-elements/core-elements.html">
<body fullbleed layout vertical>
<core-header-panel flex>
<core-toolbar>
<div>Hello World!</div>
</core-toolbar>
<div class="content">
<core-drawer-panel>
<section drawer>Left</section>
<section main>Right</section>
</core-drawer-panel>
</div>
</core-header-panel>
</body>
The solution by kreide doesn't work for Polymer 1.0
To affix paper-drawer-panel in 1.0 add a css style = "position:relative" to the drawer tag.
Related
I am using b-tooltip tags of BootstrapVue to show information. I want to increase the width of b-tooltip (for long text message), text alignment, etc . How can i do it (basically how can i style it)?
<b-button id="tooltip-target-1">
Hover Me
</b-button>
<b-tooltip target="tooltip-target-1" triggers="hover">
I am tooltip <b>component</b> content!
</b-tooltip>
If you're using SCSS in your project, then the easiest way for a global solution would be to modify the SCSS variables to your liking.
If you want to only apply styles to a specific tooltip, or apply something there isn't a variable for. You can use the custom-class prop on b-tooltip to supply it with a custom class, which allows you to style it to your liking.
If you're placing this CSS in a scoped style tag <style scoped> you will need to use a deep selector to target the subcomponents such as .tooltip-inner.
new Vue({
el: '#app',
})
.custom-tooltip > .tooltip-inner{
/* Removes the default max-width */
max-width: none;
/* Apply whatever other styles you want */
font-size: 150%;
padding: 10px;
}
/* This styling is just for the example */
#app {
display: flex;
height: 100vh;
width: 100vw;
align-items: center;
justify-content: center;
}
<link href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue#2.14.0/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.14.0/dist/bootstrap-vue.js"></script>
<div id="app">
<div>
<b-button id="tooltip-target-1">
Hover Me
</b-button>
<!-- Use the variant prop to use your theme colors -->
<!-- If you want a custom color, you can use CSS -->
<b-tooltip target="tooltip-target-1" variant="primary" custom-class="custom-tooltip" triggers="click">
I am tooltip <b>component</b> content!
</b-tooltip>
</div>
</div>
The trick to change styles of bootstrapvue tooltip.
<style>
.tooltip-inner {
max-width: 800px;
}
</style>
Don't use scoped in style because the component render the html of tooltip outside of app so if you put scoped your css will not work.
I'm trying to make a custom infowindow in CartoDB Editor. From the docs, it should be possible to use a <style> block to specify or override the default styles. But it seems like the whole block get's ignored. When I look at the Chrome Dev Tools, my styles are not present at all. They don't get overridden, they are just not there. Inline styles work fine, though.
The markup for the info window popup:
<style type="text/css">
div.cartodb-popup.v2.custom {
background: #666;
}
div.cartodb-popup.v2.custom:before {
border-top: 14px solid #666;
}
div.cartodb-popup.v2.custom h4 {
color: #fff;
}
div.cartodb-popup.v2.custom p {
color: #ff0;
}
</style>
<div class="cartodb-popup v2 custom">
x
<div class="cartodb-popup-content-wrapper">
<h4>{{boroname}}</h4>
<p>Borough code: {{borocode}}</p>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
Any ideas what I could be doing wrong? I already tried it with and without the custom class, but I left it in there, because i thought some extra specifity won't do any harm. I'm pretty sure this <style> approach worked a year ago.
I could do most styling using inline styles, but that's very cumbersome and doesn't work for pseudo elements, like the small popup arrow.
Any way to do this on the web interface, or do we need to host this on our own servers to edit the .js scripts, etc?
This is my map: https://stekhn.cartodb.com/viz/a2534c80-87b0-11e5-a2ef-0e787de82d45/embed_map
The example above is outdated and <style> blocks in the infowindow editor are not allowed any more. You can only use CSS inline styles in the CartoDB frontend editor. To get full control over the infowindow and the tooltip appearance, use cartoDB.js. In this example I'm changing the popup background color to grey:
<link rel="stylesheet" type="text/css" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css">
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<style type="text/css">
div.cartodb-popup.v2.custom {
background: #666;
}
div.cartodb-popup.v2.custom:before {
border-top: 14px solid #666;
}
div.cartodb-popup.v2.custom h3,
div.cartodb-popup.v2.custom p {
color: #fff;
}
</style>
<section id="map"></section>
<script type="infowindow/html" id="template">
<div class="cartodb-popup v2 custom">
x
<div class="cartodb-popup-content-wrapper">
<h3>{{name}}</h3>
<p>{{description}}</p>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
</script>
<script type="text/javascript">
cartodb.createVis('map', 'https://your-accout.cartodb.com/api/v2/viz/477bdfc0-8210-11e5-936b-0e787de82d45/viz.json', {
tiles_loader: true,
center_lat: 48.6,
center_lon: 11.4,
zoom: 7
})
.done(function(vis, layers) {
var subLayer = layers[1].getSubLayer(1);
// Select template from dom
subLayer.infowindow.set('template', $('#template').html());
});
</script>
Weirdly, I was able to get my infowindow to dynamically get taller without using any script tags. I set the width of the window using the web interface, and then added this to the infowindow custom HTML by clicking the button near the top.
{{mtrsrc}} is a column in my table.
Here's my code:
<div class="cartodb-popup v2 custom_infowindow">
x
<div class="cartodb-popup-content-wrapper">
<div class="row">
<div class="label"></div>
<div class="info">
<img height="300" src="http://pesticideresearch.com/fum/{{mtrsrc}}.png" />
</div>
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
I've been using Polymer for a website redesign. I want to display an image that is bound to an element as a background-image. A fairly simple task, but unfortunately I'm having some issues.
I made a running sample of the code for easy testing: click me.
<polymer-element name="album-card" attributes="image">
<template>
<style>
:host{
display: block;
position: relative;
background-color: #99182c;
width: 200px;
}
.description{
padding: 10px;
color: white;
}
.circular{
width: 200px;
height: 200px;
background: url({{image}}) no-repeat;
background-color:green;
}
</style><link rel="stylesheet" href="default_styles.css">
<paper-shadow z="{{shadowValue}}" animated="true"></paper-shadow>
<div class="album-header" vertical layout>
<paper-ripple class="recenteringTouch" fit></paper-ripple>
<div class="circular">
<!--<img src="{{image}}" />--><!-- this does work -->
</div>
<div class="description">
<content select="h2"></content>
<content select="h4"></content>
</div>
</div>
</template>
<script>
Polymer('album-card');
</script>
</polymer-element>
The issue is in the css styling. For some reason the image doesn't diplay in the following line: background: url({{image}}) no-repeat;. However, when using {{image}} in the body somewhere else (in the <div class="circular">, the image does display.
Replacing the {{image}} inside the styling with the direct link also works.
What am I doing wrong?
This looks like a bug. The {{}} are being interrupted literally instead of being parsed by the template engine. Replacing them with [[]] one time bindings works: http://jsbin.com/yocokire/4/edit
However, you should avoi using data-binding inside of <style> if possible (see https://github.com/Polymer/polymer/issues/270#issuecomment-24683309). There are perforamnce concerns and issues under the polyfill. Instead, use a style attribute on the element and do your binding there: http://jsbin.com/riqizige/1/edit
<html>
<head>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>
I am pretty new to CSS, I have a simple case like the above. I would like to make the "title" and "some url" clickable but want to make description as non-clickable. Is there any way to do that by applying some CSS on the span so that whatever inside that span, it is not clickable.
My constraint is that, I do not want to change the structure of the div, instead just applying css can we make a span which is inside an anchor tag, not clickable ?
Actually, you can achieve this via CSS. There's an almost unknown css rule named pointer-events. The a element will still be clickable but your description span won't.
a span.description {
pointer-events: none;
}
there are other values like: all, stroke, painted, etc.
ref: http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/
UPDATE: As of 2016, all browsers now accept it: http://caniuse.com/#search=pointer-events
UPDATE: As of 2022, browsers behavior may have changed, another option can be:
a {
pointer-events: none;
}
a span:not(.description) {
pointer-events: initial;
}
Not with CSS. You could do it with JavaScript easily, though, by canceling the default event handling for those elements. In jQuery:
$('a span:nth-child(2)').click(function(event) { event.preventDefault(); });
CSS is used for applying styling i.e. the visual aspects of an interface.
That clicking an anchor element causes an action to be performed is a behavioural aspect of an interface, not a stylistic aspect.
You cannot achieve what you want using only CSS.
JavaScript is used for applying behaviours to an interface. You can use JavaScript to modify the behaviour of a link.
In response to piemesons rant against jQuery, a Vanilla JavaScript(TM) solution (tested on FF and IE):
Put this in a script tag after your markup is loaded (right before the close of the body tag) and you'll get a similar effect to the jQuery example.
a = document.getElementsByTagName('a');
for (var i = 0; i < a.length;i++) {
a[i].getElementsByTagName('span')[1].onclick = function() { return false;};
}
This will disable the click on every 2nd span inside of an a tag.
You could also check the innerHTML of each span for "description", or set an attribute or class and check that.
This is the simplest way I would have done it. Without bordering about CSS or javascript :
<html>
<head>
</head>
<body>
<div>
<p>
<a href="http://www.google.com">
<span>title<br></span>
</a>
<span>description<br></span>
<a href="http://www.google.com">
<span>some url</span>
</a>
</p>
</div>
</body>
</html>
You can replace the tag with anything you want.
Yes you can....
you can place something on top of the link element.
<!DOCTYPE html>
<html>
<head>
<title>Yes you CAN</title>
<style type="text/css">
ul{
width: 500px;
border: 5px solid black;
}
.product-type-simple {
position: relative;
height: 150px;
width: 150px;
}
.product-type-simple:before{
position: absolute;
height: 100% ;
width: 100% ;
content: '';
background: green;//for debugging purposes , remove this if you want to see whats behind
z-index: 999999999999;
}
</style>
</head>
<body>
<ul>
<li class='product-type-simple'>
<a href="/link1">
<img src="http://placehold.it/150x150">
</a>
</li>
<li class='product-type-simple'>
<a href="/link2">
<img src="http://placehold.it/150x150">
</a>
</li>
</ul>
</body>
</html>
the magic sauce happens at product-type-simple:before class
Whats happening here is that for each element that has class of product-type-simple you create something that has the width and height equal to that of the product-type-simple , then you increase its z-index to make sure it will place it self on top of the content of product-type-simple. You can toggle the background color if you want to see whats going on.
here is an example of the code
https://jsfiddle.net/92qky63j/
CSS relates to visual styling and not behaviour, so the answer is no really.
You could however either use javascript to modify the behaviour or change the styling of the span in question so that it doesn't have the pointy finger, underline, etc. Styling it like that will still leave it clickable.
Even better, change your markup so that it reflects what you want it to do.
Using CSS you cannot, CSS will only change the appearance of the span. However you can do it without changing the structure of the div by adding an onclick handler to the span:
<html>
<head>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span onclick='return false;'>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>
You can then style it so that it looks un-clickable too:
<html>
<head>
<style type='text/css'>
a span.unclickable { text-decoration: none; }
a span.unclickable:hover { cursor: default; }
</style>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span class='unclickable' onclick='return false;'>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>
I (absolute beginner) would like to put an image into a box with a little margin around. I tried with padding and so, didn't work. Then I tried this:
<div style="border:1px solid #CC6699; width:11em; height:5.5em;">
<img style="align:center; width:10em; height:5em;" src="path">
</div>
But instead the image gets stuck in the upper left corner.
Couple of ways to do this:
My usual is to set a background image instead.
In your css:
div#img_container {
background: url(images/myImage.png) center center
}
In your html:
<div id="img_container"></div>
Or to just put some padding around it in your CSS
img#myImage {
padding: 20px;
}
and the HTML
<img id="myImage" src="images/myImage.png" />
Try this:
<html>
<head>
<style>
#wrap {
width: 500px;
text-align: center;
}
.pic {
padding: 5px;
border: 2px solid #000;
}
</style>
</head>
<body>
<div id="wrap">
<img src="logo.gif" class="pic">
</div>
</body>
</html>
CSS level 2 doesn't have a property for centering things vertically. There will probably be one in CSS level 3. But even in CSS2 you can center blocks vertically, by combining a few properties. The trick is to specify that the outer block is to be formatted as a table cell, because the contents of a table cell can be centered vertically.
<div style="border:1px solid #CC6699; width:11em; height:5.5em;text-align:center;vertical-align:middle;display:table-cell;">
<img style="width:10em; height:5em;" src="path">
</div>
EDIT
As rpflo suggests, using the background-position property is especially great if the container happens to be smaller than the image. Just remember to include the "background-repeat:none" style if you don't want the image to be tiled.
Use the following small jQuery plugin. It centers the loading image in the middle of the specified container (vertically and horizontally):
http://plugins.jquery.com/project/CenterImage
Demo site:
http://www.demosites.somee.com/demos/centerimage.html
Usage: This plugin positions a loading image centrally over a specified html container (div, span...).
Currently available configuration settings:
{ path: "../Images/ajax.gif", overlayColor: 'green', opacity: 0.2, zindex: 2000, isrelative:true }
Minimum configuration for initialization:
$('.4th').CenterImage({ path: "../Images/ajax-bar.gif" });
Call this, in order to remove the loading image (and the overlay)
$('.4th').CenterImage('remove');