I'm using polymer's paper-card (I can't use paper-dialog because of this issue). How can I make it scrollable?
For example, in this code I would like to be able to scroll the card when it gets too large for the screen. Right now it just makes some of the content unreachable.
<paper-card>
<h2>[[someMessage]]</h2>
<div id="someReallyLongStuff"></div>
<paper-button raised on-click="doSomethingAndCloseCard">OK got it:)</paper-button>
</paper-card>
I've tried limiting the paper-card's size with max-height but that doesn't help.
EDIT
Here are photos of another example to clarify my problem:
In the first photo I have a small paper-card that fits the screen, but when it gets bigger it doesn't become scrollable, but goes out of page boundaries to make some of the content unreachable
window with small paper-card
window with longer paper-card that is too big for the page
I'm looking for something like paper-dialog-scrollable only for paper-card
!!!Update with code example at the bottom!!!
Paper-dialog
However, I used to work around that backdrop problem, related to the paper-dialog, with this answer that I found somewhere. I used this in a Polymer 1 project so I am not certain if it will still work in version 2. You definitely have to adapt the function.
<paper-dialog with-Backdrop on-iron-overlay-opened="patchOverlay"></paper-dialog>
// Fix with-backdrop for paper-doalog (Polymer1)
// https://github.com/PolymerElements/paper-dialog/issues/7
patchOverlay: function (e) {
if (e.target.withBackdrop) {
e.target.parentNode.insertBefore(e.target.backdropElement, e.target);
}
}
Paper-Card
If you are still looking to work with the paper-card Element and find yourself unable to change the width read further.
I have never tested that code but a presume that you will have to use the Polymer mixin for the paper-card. I don't think max-length is valid CSS better would be to use max-width or max-height.
paper-card {
--paper-card: {
max-width: 500px;
};
}
Update
I have added a code example using the basic paper-card provided by Polymer here
Long story short, I gave the text container a fixed height and added overflow auto to it. This way scroll bars will be added as soon as the text doesn't fit in it's container. This can be improved by adding the overflow only to the y-axes with "overflow-y: auto;"
// Load webcomponents.js polyfill if browser doesn't support native Web Components.
var webComponentsSupported = (
'registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')
);
if (webComponentsSupported) {
// For native Imports, manually fire WebComponentsReady so user code
// can use the same code path for native and polyfill'd imports.
if (!window.HTMLImports) {
document.dispatchEvent(
new CustomEvent('WebComponentsReady', {bubbles: true})
);
}
} else {
// Load webcomponents.js polyfill
var script = document.createElement('script');
script.async = true;
script.src = 'https://cdn.rawgit.com/StartPolymer/cdn/1.8.1/components/webcomponentsjs/webcomponents-lite.min.js';
document.head.appendChild(script);
}
paper-card {
--paper-card: {
width: 100px;
box-sizing: border-box;
};
}
.card-content {
width: 200px;
height: 100px;
overflow: auto;
}
<!-- <base href="https://gitcdn.xyz/cdn/StartPolymer/cdn/v1.11.0/components/"> -->
<!-- <base href="https://cdn.rawgit.com/StartPolymer/cdn/v1.11.0/components/"> -->
<base href="https://rawcdn.githack.com/StartPolymer/cdn/v1.11.0/components/">
<link rel="import" href="iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="paper-card/paper-card.html">
<style is="custom-style">
</style>
<paper-card heading="Emmental" image="http://placehold.it/200x100/FFC107/000000" alt="Emmental">
<div class="card-content">
Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
</div>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>
<script>
window.addEventListener('WebComponentsReady', function() {
});
</script>
Related
I think i got myself entangled in a CSS maze. I notice a horizontal scroll on my site in desktop browsers (firefox and chromium), when in responsive mode. Tested in android, and it seems ok.
The website is cv.pixyz.net
To debug it, I tried all of the following:
Looking for elements getting bigger than the parent's space.
I thought the container with #id was the problem, because web developer toolbar shows that closer to the edges of the screen, but removing that, didn't solve this
Used this to see if anything gets out of bounds. some elements stand out, but still can't solve the scroll
I tried these 2 snippets:
// snippet 1
var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
document.querySelector('body *'),
function(el) {
console.log(el);
// console.log(el.offsetWidth);
// console.log(docWidth);
if (el.offsetWidth > docWidth) {
console.log(el);
}
}
);
// snippet 2
var all = document.getElementsByTagName("*"), i = 0, rect;
for (; i < all.length; i++) {
rect = all[i].getBoundingClientRect();
if (rect.right < 0) all[i].style.outline = "1px solid green";
}
but there's no effect either: no logs registered, no border changed
started removing other elements in the page. Even doing this, I still get scroll:
<!DOCTYPE html>
<!-- domActual = <?php echo $ambiente; ?> -->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Sobre mim... # Luis Aguiar</title>
</head>
<body>
<nav class="container">
<h2 class="nome">Sobre mim... / Luis Aguiar</h2>
<a class="dominio" href="http://www.cv.pixyz.net">cv.pixyz.net</a>
<ul>
<li>
ID
</li>
<li>
Dev
</li>
</ul>
</nav>
<footer>
<p>Todos os direitos reservados # Luis Aguiar</p>
</footer>
</body>
</html>
I also tried this to check abnormal widths: (http://wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/):
* {
outline: 1px solid blue!important;
opacity: 1 !important;
visibility: visible !important;
}
Does anyone know what is causing this, or have any other idea for debugging?
The problem appears to be the following line :
<section id="dev">
[...]
<li class="job"> /* 2nd li element */
[...]
<p class="url">https://www.demarca.eu/</p> /* <- This line */
The URL has no breaking spaces, so once the window reaches the width of the URL string it can't wrap the string and therefore the scrollbar gets added.
The options you have are:
Shorten the text:
Consider whether you need to display the full URL including https:// - maybe instead include it as a link? e.g.:
<p class="url">www.demarca.eu</p>
Use lowercase: the CSS changes the text to uppercase, which adds to the width of the string.
Wrap the URL: forcing the string to wrap is often the best option, but it doesn't suit a url so well because urls can't have spaces. However if you do want to make it wrap, you can create the following CSS class and add it to the element:
.wrap { word-wrap: break-word; }
I don't really know what it was, but after reboot, was ok (... but i cleaned the cache!). The situation persisted even without css and barebones HTML. After this, i did what you said, just in case (and because it looks nicer!). Thanks for the support!
I'm currently using Bootstrap, using the following template they provide:
Bootstrap Dashboard Template
I like the header/navbar, and the sidebar. I have removed all the content in the "main space" div, leaving it blank. This is the div's code (ignore the border; it's there for me to visualize what the div is doing):
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"
id="maps_canvas" style="border:2px solid red">
<!-- a Google Maps embed would be here -->
</div>
My goal is to embed Google Maps in this whitespace. To do this, I need to create a div that fills the entire whitespace. Ideally, I would like the div to bind to the edges of the window, so it doesn't overflow / create any scrolling. I found that by hard-setting my height, it would result in overflow if I resized my Chrome window for example. Is there a way to do this?
For example, look at http://www.renthop.com/. They have a map that does what I'm looking to do - it locks to the bottom right of the screen.
EDIT: This is a jquery problem. Problem now is, I can't seem to get both these functions to run. when I remove my $(document) function, the google function works no problem. When I include it, the entire thing falls over:
/*$(document).ready(function() {
/* confirm("im here");
/*$('#map_canvas').css({'height': (($(window).height()) - 114)+'px'});
$(window).resize(function(){
$('#map_canvas').css({'height': (($(window).height()) - 114)+'px'});
});
});*/
function initialize(){
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(40.749623,-73.9618013),
zoom:12,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
I mad some changes to your HTML and CSS, one problem is because bootstrap floats items they do not like to fill a height 100%. You need to make the float container positioned absolute and its parent as relative to maintain it. http://jsfiddle.net/RZb2D/3/
#maps_canvas {
padding:0px;
height:100%;
position:absolute;
}
.row {
height:100%;
position:relative;
}
I want to assign a div to the tooltip content. One way is to have a inline div as given in the example in website:
$(document).ready(function() {
$('#my-tooltip').tooltipster({
content: $('<span><img src="my-image.png" /> <strong>This text is in bold case !</strong></span>')
});
});
However what I want is to have div seperately define like:
<span id='abc'><span><img src="my-image.png" /> <strong>This text is in bold case !</strong></span></span>
and then define content as
$(document).ready(function() {
$('#my-tooltip').tooltipster({
content: $($('#abc').html())
});
});
The reason I want to do this is because I am making dynamic css changes to '#abc' and everytime the tooltipster shows I want recent css changed to be incorporated.
thanks
$('#my-tooltip').tooltipster({
functionBefore: function(origin,continueTooltip){
origin.tooltipster('content',origin.children().html());
continueTooltip();
}
});
For me worked that improved version :)
$('#my-tooltip').tooltipster({
functionBefore: function(origin,continueTooltip){
origin.tooltipster('content',origin.next().contents());
continueTooltip();
}
});
That is even better! :) But make sure your tooltip content is just after your selector here .tip follows after div#my-tooltip and also is its child.
In addition to having the content be separately defined, I wanted the content for the tooltip to be nested inside the element that is clicked/hovered. I found the functionBefore option worked for me.
The markup might be:
<div id="my-tooltip">
click/hover me to show a tooltip
<div class="tip" style="display:none">
tooltip<br>content
</div>
</div>
And the js:
$('#my-tooltip').tooltipster({
functionBefore: function(origin,continueTooltip){
origin.tooltipster('content',origin.find('.tip'));
continueTooltip();
}
});
I'm using <a href> element along with :target css selector to show a <div> which by default is set to display:none. Problem is, that when I click on the link to show that <div>, it is automatically scrolling down my site towards that <div>.
Is there a way to stop the screen movement?
Unfortunately I am not yet proficient in anything besides CSS and HTML.
You can use event.preventDefault() to avoid this. Something like this:
$('a.yourclass').click(function(e)
{
//your code
e.preventDefault();
});
OR:
link
in the link enter:
Link here
You'll need JS anyway:
// (in jQuery)
$el.on('click', function(e) {
// find current scroll position
var pos = document.body.scrollTop || document.documentElement.scrollTop;
// let normal action propagate etc
// in the next available frame (async, hence setTimeout), reset scroll posiion
setTimeout(function() {
window.scrollTo(0, pos);
}, 1);
})
I don't know if this will flicker the screen. It might. It's a horrible hack either way.
In my Chrome, there's no flicker: http://jsfiddle.net/rudiedirkx/LEwNd/1/show/
There are two ways to tell the browser we don't want it to act:
The main way is to use the event object. There's a method
event.preventDefault().
If the handler is assigned using on (not by
addEventListener), then we can just return false from it.
Example:
Click here
or
here
This is a bit of a hack but you could use a basic css work around:
CSS only Example
#div1 {
height: 0;
overflow:hidden;
}
#div1:target {
height: auto;
margin-top: -110px;
padding-top: 110px;
}
#div2 {
background:red;
}
Click to show
<div id="div1">
<div id="div2">Content</div>
</div>
If you need it to be a little more flexible you can add some js...
More Flexible Example with JS
$('a').click(function () {
$('#div1').css({
'margin-top': 0 - $('#div1').position().top + $(window).scrollTop(),
'padding-top': $('#div1').position().top - $(window).scrollTop()
});
});
Basically you're pulling the top of div1 up with the negative margin and then pushing div2 back down with the padding, so that the top of div1 rests at the top of the window... Like I said its a hack but it does the trick.
Those links are anchor-links and by default made for those jumps :) You could use JS to prevent the default behaviour in some way. For example using jQuery:
$('a').click(function(e){e.preventDefault();});
or by default add return false; to the links
Avoid using :target all together and just use onclick event.
function myFunction()
{
document.getElementById('hiddenDiv').style.display = 'block';
return false;
}
I'd like to show you an image of my page content so you'd understand what am I talking about:
Now, I have two main divs on a page: the wrapper (the red one) and the purple:
<div id="purple" style="position:fixed; z-index:0; left:0; top:0; width:100%; height:100%; filter:alpha(opacity=50); opacity:0.5; cursor:pointer;" onclick="javascript:alert('purple clicked');"></div>
<div id="wrapper"></div>
The wrapper contains many controls and other divs, and the purple is basically supposed to be clickable and perform some event, lets say alert('purple clicked');
The thing is that when I press inside the wrapper it also fires the purple event.
So what I did was to add the following code:
<script type="text/javascript">
$("#purple").click(function (e)
{
window.event.cancelBubble = true;
e.stopPropagation();
})
</script>
I understood that through this code I'll manage to click on the purple area and get the alert fire, the problem is that when I click inside the red area this alert is fired also - and this is not what I wanted!
So, eventually, if you haven't given up yet reading this post, here's the question:
How to avoid the "purple events" fire when clicking the red zone?
p.s.
I must have the purple div be like - this can't be changed:
width:100%; height:100%
There is no direct way to prevent bubbling down. You have to use event.target.id to differentiate the purple div with others,
Try this,
$("#purple").click(function(e){
if(e.target.id == "purple")
{
alert("purple clicked.!");
}
});
DEMO
Note: Just realized your purple div does not encapsulate red/green divs. This answer won't solve your problem in that case. It relies on the nested div structure as per the included example below. I'll leave this answer in case someone else comes across it with a similar issue. Maksym Stepanenko's answer below regarding z-index is the most correct one.
There are two properties of the event object: currentTarget and target.
currentTarget is the current element in the event bubbling phase.
target is the element that is responsible for initiating the event.
Within the purple click event handler you could test to see if that element was the target in the event chain:
$('#purple').click(function(e) {
if ( e.currentTarget == e.target ) {
console.log('clicked purple',Date.now());
}
});
$('#red').click(function(e) {
console.log('clicked red',Date.now());
});
This is helpful when:
you don't want to constrain the event phasing to only the red object
you don't want to have to remember to put e.stopPropagation in every click handler whose element is a child of #red/#purple
Here's a complete working example:
<!doctype html>
<html>
<head>
<title>Bubble Test</title>
<style type="text/css">
#purple {border:3px solid #3c1e40;background:#b459bf;}
#red {margin:auto;width:958px;border:3px solid #400Aa0a;background:#ff2829;}
.green {margin:20px;padding:30px;border:3px solid #1c401c;background:#54bf55;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#purple').click(function(e) {
if ( e.currentTarget == e.target ) {
console.log('clicked purple',Date.now());
}
});
$('#red').click(function(e) {
console.log('clicked red',Date.now());
});
});
</script>
</head>
<body>
<div id="purple">
<div id="red">
<p class="green">Hello World</p>
<p class="green">Lorem ipsum dolor sit amet.</p>
</div>
</div>
</body>
</html>
You could take this a step further and also compensate for #red:
$('#purple').click(function(e) {
if ( e.currentTarget == e.target ) {
console.log('clicked purple',Date.now());
}
});
$('#red').click(function(e) {
if ( e.currentTarget == e.target ) {
console.log('clicked red',Date.now());
}
});
$('.green').click(function(e) {
console.log($(this).text(),Date.now());
});
This should solve your problem:
CSS
#wrapper
{
z-index:1;
margin: 0 -50px;
left:50%;
position:absolute;
}
Fiddle
You have a problem because your purple div overlays the red one, the reason for that is:
z-index only works on positioned elements (position:absolute,
position:relative, or position:fixed).
you should read more about it Z-index