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!
Related
Help, trying to print a calendar using html table, prints fine on mac but windows, all browsers, it's putting a 3" margin at top no matter what the CSS print settings. Client wants calendar to print full bleed. I can get it to print full size if I adjust the print settings on the browser to not be shrink to fit and then set it to 110% but that solution screws up the type and messes with the characters in the calendar. Is there any way to do it using straight CSS?
Add this simple Javascript code to print the calendar
<script language="javascript">
function Clickheretoprint()
{
var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=400, height=400, left=100, top=25";
var content_vlue = document.getElementById("print_content").innerHTML;
var docprint=window.open("","",disp_setting);
docprint.document.open();
docprint.document.write('<html><head><title>Print</title>');
docprint.document.write('</head><body onLoad="self.print()" style="width: 800px; font-size:12px; font-family:arial;">');
docprint.document.write(content_vlue);
docprint.document.write('</body></html>');
docprint.document.close();
docprint.focus();
}
</script>
Print
<div id="print_content" style="width: 100%;">
Calendar/html table goes here
</div>
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>
Is it possible to fix the position of a table, such that it "scrolls along" with the page, but only after a certain value?
What I'm trying to achieve is similar to the header on this site: http://tf2trends.com/ (click show all, then scroll down)
This can be done using JavaScript and CSS with any type of element:
Have a div cling to top of screen if scrolled down past it
http://css-tricks.com/snippets/jquery/persistant-headers-on-tables/
Try this:
//keep element in view
(function($)
{
$(document).ready( function()
{
var elementPosTop = $('#floatguy').position().top;
$(window).scroll(function()
{
var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
//if top of element is in view
if (wintop > elementPosTop)
{
//always in view
$('#floatguy').css({ "position":"fixed", "top":"10px" });
}
else
{
//reset back to normal viewing
$('#floatguy').css({ "position":"inherit" });
}
});
});
})(jQuery);
html:
<div>
Content before floating text<br/>
Content before floating text<br/>
Content before floating text<br/>
</div>
<div id="floatguy">
<span>Floating Header</span>
</div>
<div id="longguy">
Other text <br/>
Other text <br/>
Other text <br/>
</div>
jsFiddle example
Here is the method used by the website referenced in the question, implemented without using frameworks (and with excessive comments to try to explain what's going on). This is not the best/easiest/simplest method to get the effect, but I hope it is useful to see that website's approach in pure js from a learning standpoint. (Only tested in Chrome 19.0 and Firefox 13.0, both on a mac.)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Table With Scrolling Head</title>
<style type='text/css'>
#scrollTable{
margin-top:100px; /* not necessary for scrolling, just to give a little padding */
}
#scroller {
z-index: 100; /* this number needs to be larger than any other z-index on the page */
}
</style>
</head>
<body>
<table id='scrollTable'>
<thead id='scroller'>
<tr>
<th>I don't leave the screen</th>
</tr>
</thead>
<tbody>
<tr><td>I do!</td></tr>
<tr><td>I do!</td></tr>
<!-- ... add more <tr><td>I do!</td></tr> lines to make the page long enough to scroll -->
<tr><td>I do!</td></tr>
</tbody>
</body>
<script type='text/javascript'>
function getDistFromTop(e){
/* get the offset of element e from the top (including the offset of any elements it is nested in)*/
y = e.offsetTop;
e = e.offsetParent;
while (e != null){
y = y + e.offsetTop;
e = e.offsetParent;
}
return y;
}
function scroll() {
var scroller = document.getElementById('scroller');
var tab = document.getElementById('scrollTable');
if (window.pageYOffset > getDistFromTop(tab)){ /* if the page has been scrolled farther than the distance the table is from the top... */
scroller.style.position = 'fixed'; /* fix the position of scroller so it doesn't move with the page */
scroller.style.top = '0px'; /* put scroller on the top of the page */
tab.style.paddingTop = '20px'; /* add padding to the top of the table; this is done to make the table body stay where it is expected (otherwise it would move because scroller, the table header, has become fixed) */
} else { /* if the page scrolls back so that the whole table is on the page, reset everything to their original values so the page behaves "normally" */
scroller.style.position = 'relative';
scroller.style.top = '';
tab.style.paddingTop = '0px';
}
}
window.onscroll = scroll;
</script>
</html>
Yes, you can easily achieve this functionality by using some CSS class and jQuery or JavaScript programming.
You have to call a function in a certain scroll value, which you will get easily by jQuery and then change the CSS for your table or div which is called position:fixed;top:0;
Working example: http://jsfiddle.net/JVVcA/
HTML:
<fieldset id="data-page">
<legend>data-page</legend>
<button rel="page1">Highlight page one</button>
<button rel="page2">Highlight page two</button>
<div data-page="page1">
<h1 id="page1">Page one</h1>
<h1 id="page2">Page two</h1>
</div>
</fieldset>
<fieldset id="class">
<legend>class</legend>
<button rel="page3">Highlight page three</button>
<button rel="page4">Highlight page four</button>
<div class="page3">
<h1 id="page3">Page three</h1>
<h1 id="page4">Page four</h1>
</div>
</fieldset>
CSS:
fieldset { border: 1px solid #aaa; padding: 5px; }
h1 { background-color: white; }
div[data-page="page1"] h1#page1 { background-color: pink; }
div[data-page="page2"] h1#page2 { background-color: pink; }
div.page3 h1#page3 { background-color: cyan; }
div.page4 h1#page4 { background-color: cyan; }
JS:
$('#data-page button').click(function(){
var rel = $(this).attr('rel');
$(this).siblings("div").attr('data-page', rel);
});
$('#class button').click(function(){
var rel = $(this).attr('rel');
$(this).siblings("div").attr('class', rel);
});
Initial load:
After clicking "Highlight page two" and "Highlight page four" in Webkit (specifically, Google Chrome stable Windows 7):
After doing the same in Firefox:
As you can see, the data-page selector works fine on the initial rendering of the of the page, but when the DOM is manipulated on the fly, styles defined by the [data-page="???"] CSS selector are not affected accordingly. Compare this to the situation with the class selectors. When classes are changed on the fly, the styles change as expected.
A possibly related note is that I've encountered cases while using this attribute selector in conjunction with CSS transitions where a similar lack of responsiveness happens, but on those cases, clicking elsewhere on the page, waving your mouse around, or just waiting for a bit eventually results in the expected change going through.
So is there a way around this other than to just throw up your hands and not use data-page-style attributes?
It's the same issue that's applied for the ~ or multiple + selectors and pseudo-classes in webkit: this kind of selectors are rendered only once and the last time I checked the relevant bug reports in webkit's tracker, they stated that it works like intended.
But, some people had found the fix, but it's really is overhead: to add always-reflowing property to body, so it's must be added only to those elements, where something changes, the divs inside field sets for your example.
So, there is a fixed fiddle: http://jsfiddle.net/JVVcA/2/
And these are the styles for fixing such problems:
/* The `fixing` animation */
#-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }
.anElementToFix { -webkit-animation: bugfix infinite 1s; }
Note that you must add the fix to the element whose attribute is can be changed, not the targeted by selector elements.
My version of workaround.
$('#data-page button').click(function(){
var rel = $(this).attr('rel');
var my_div = $(this).siblings("div");
my_div.attr('data-page', rel);
var my_html = my_div.html();
my_div.html(my_html);
});
$('#class button').click(function(){
var rel = $(this).attr('rel');
$(this).siblings("div").attr('class', rel);
});
Running an animation seems overly expensive.
Thanks to Zoltan Olah, I found a much more elegant, concise, and efficient workaround.
Simple toggle a nonsense class on the body. This will cause contained selectors to be re-evaluated.
You don't even have to define this class in CSS. Just applying it forces Safari to hunt through the page re-evaluating things.
Every time you change the attribute in question, toggle this class on or off to force the re-evaluation.
// change some attribute
$(".blah").attr("state", "otherState"); // example of changing an attribute (your app will be different)
$('body').toggleClass('zoltan'); // THIS IS THE LINE YOU MUST ADD EVERY TIME YOU CHANGE THE ATTRIBUTE
I have a form with some text areas that allow a scroll bar when the text exceeds the text box. The user would like to be able to print the screen, and this text is not visible. How do I make all of the text visible for just printing? Am I better of making a print to pdf link or something?
You cannot solve this problem with CSS alone.
Why Pure-CSS Solutions are Insufficient (with demo)
Let me convince you the answers involving print stylesheets and overflow: visible are insufficient. Open this page and look at the source. Just what they suggested, right? Now print preview it (in, say, Chrome 13 on OS X, like me). Note that you can only see a line or two of the note when you attempt to print!
Here’s the URL for my test case again: https://alanhogan.github.io/web-experiments/print_textarea.html
Solutions:
A JavaScript link that opens a new window and writes the contents of the textarea to it for printing. Or:
When the textarea is updated, copy its contents to another element that that his hidden for screen but displayed when printed.
(If your textarea is read-only, then a server-side solution is also workable.)
Note that textareas treat whitespace differently than HTML does by default, so you should consider applying the CSS white-space: pre-wrap; in the new window you open or to your helper div, respectively. IE7 and older do not understand pre-wrap however, so if that is an issue, either accept it or use a workaround for them. or make the popup window actually plain text, literally served with a media type text/plain (which probably requires a server-side component).
The “Print Helper” Solution (with code + demo)
I have created a demo of one JavaScript technique.
The core concept is copying the textarea contents to another print helper. Code follows.
HTML:
<textarea name="textarea" wrap="wrap" id="the_textarea">
</textarea>
<div id="print_helper"></div>
CSS (all / non-print):
/* Styles for all media */
#print_helper {
display: none;
}
CSS (print):
/* Styles for print (include this after the above) */
#print_helper {
display: block;
overflow: visible;
font-family: Menlo, "Deja Vu Sans Mono", "Bitstream Vera Sans Mono", Monaco, monospace;
white-space: pre;
white-space: pre-wrap;
}
#the_textarea {
display: none;
}
Javascript (with jQuery):
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
function copy_to_print_helper(){
$('#print_helper').text($('#the_textarea').val());
}
$('#the_textarea').bind('keydown keyup keypress cut copy past blur change', function(){
copy_to_print_helper(); // consider debouncing this to avoid slowdowns!
});
copy_to_print_helper(); // on initial page load
});
</script>
Again, the successful JavaScript-based demo is at https://alanhogan.github.io/web-experiments/print_textarea_js.html.
Loop through each of your text areas and move the content to a holder
window.onbeforeprint = function () {
$('.print-content').remove();
$('textarea').each(function () {
var text = $(this).val();
$(this).after('<p class="well print-content">' + text + '</p>');
});
}
And use the following CSS
.print-content {
display: none !important;
}
#media print {
.print-content {
display: block !important;
}
textarea {display: none !important;}
}
I recently ran into the same issue. My solution was to duplicate the content into form controls for editing and into divs for printing.
In my Head I put a print stylesheet.
<link rel="stylesheet" href="printform.css" type="text/css" media="print" />
In printform.css I put the following
.screenOnly { display: none; }
.printOnly { display: inline-block; }
For textareas (and other field types that were causing problems) I used the following code
<textarea class="screenOnly" name="myTextArea"><?php echo (htmlspecialchars ($_POST ['myTextArea'])); ?></textarea>
<div class="printOnly"><?php echo (htmlspecialchars ($_POST ['myTextArea'])); ?></div>
When displayed on screen the textareas are shown and the divs duplicating their content are hidden. When printing the opposite applies.
I know you already picked an answer to this question but while using the print stylesheet is a good idea it didn't describe a specific solution. Setting overflow:visible on the textarea (my first idea) didn't work so I ended up going with the solution above. If you're still having difficulties I hope this helps you out
Just encourter the problem recently too. Thanks for Alan H's posts. It works perfect with Chrome and Safari. However, with IE and Firefox, the issue is that the last several pages(page elements after textarea) will be missing from printing(FF), missing pages and overlapped layout(IE9).
Another finding that will be helpful to solve the issue is, you can set textarea's rows properties correctly as the control's height says to make it work with CSS overflow:visable stuff. All browsers seems to respect the rows property while printing.
This seems to work for applying to all elements that have overflowing content:
$("textarea").each(function () {
var Contents = $(this).val();
if ($(this)[0].scrollHeight > $(this).height()) {
$(this).after("<div class='print-helper'>" + Contents + "</div>");
$(this).addClass("no-print");
}
});
This is an easy fix with CSS, given that most users aren't really bothered about printing a bit of extra blank space. Just target a minimum height for textareas when printing:
#media print {
textarea {
min-height: 500px;
}
}
Tag that onto the end of your CSS with a min-height that is comfortably enough when you look at it in Print Preview.
With the usage of pure CSS it is not possible to prepare the textarea for printing.
It is necessary to add some javacript magic to the text area or add a hidden field.
There are a couple of solutions, that have been mentioned here:
Hidden paragraph or div
Using Javascript to extent the size of the textarea
1. Hidden paragraph or div
HTML & CSS:
<textarea>Sample Text</textarea>
<div class="hidden-div">Sample Text</div>
<style>
.hidden-div{display: none;}
#media print{
.hidden-div{display:block;}
}
</style>
2. Javascript
You could use a js library e.g https://github.com/thomasjo/jquery-autoresize
$(function() {
$("textarea").autoResize()
})
Adding onto Alan's answer above, if you have multiple instances of this problem on the same page, then you can use data-* attributes to handle all at once. Sample:
var $printOnlyArr = $('.print-only');
for (var i = 0; i < $printOnlyArr.length; i++) {
var $printOnly = $($printOnlyArr[i]);
var textSource = $printOnly.data('textsource');
if (textSource) {
$printOnly.text($("#" + textSource).val());
}
}
.print-only {
display: none;
}
#media print {
.print-only {
display: block;
}
.no-print {
display: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="form-control no-print" maxlength="2000" id="txtAdditionalComments"></textarea>
<div class="print-only" data-textsource="txtAdditionalComments"></div>
I had this same problem. My project is React, I was a semnaticUi TextArea component. The Text that could only be seen by scrolling down in the Textarea aka the "overflow" could not be seen in the print view when I press the print screen button.
Solution :)
I just used a normal paragraph tag instead and set css white-space: pre-wrap on a div that enclosed the p tag.
Worked for me!
try this using jQuery. Redefine height of all textareas based on quantity of lines.
Attention: this code change the textarea on screen too
window.onbeforeprint = function () {
$('textarea').each(function () {
var lines = Math.round($(this).val().split('\n').length * 1.6) ; //multiply to 1.6 to consider spacing between lines
$(this).height(lines+'em');
});
}
Define a separate CSS for print media like this <link rel="stylesheet" href="print.css" type="text/css" media="print" /> and for the text area, define the overflow attribute as
overflow: visible;
I use this in my styling:
PRE.print {
display:none;
}
#media print {
TEXTAREA {
display:none;
}
PRE.print {
display:block;
width:90%; /* fixes margin issues in some funky browsers */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
font-family:monospace,sans;
}
}
Then, after every TEXTAREA, I use a PRE with class "print" like so:
<textarea id="message" name="message" rows="10" cols="80" onblur="updatePrint('#message')"><?= $MESSAGE ?></textarea>
<pre id="message-print" class="print">
<?= $MESSAGE ?>
</pre>
...note the PHP I used -- you can switch with your programming language. And then this code above needs the following function, assuming you have jQuery library loaded:
<script type="text/javascript">
function updatePrint(sID) {
$(sID + '-print').text($(sID)[0].value);
}
</script>
The way this all works
The way this works is that I'm basically loading content twice into the page, but using the stylesheet to hide content not suitable for the printer like the TEXTAREA.
You can change the PRE styling as you wish. However, I use monospace in case someone was wanting to print HTML code that they typed into the field and wanted it to format nicely.
The onblur event helps capture a need to update the related PRE.
Note you can also do the stylesheet stuff via the media attribute on a link rel in the HEAD section of your HTML, using things like media="all not print" and media="print".