At this page, I'd like to add some text above the gray box containing "ADSL Broadband 1".
I've tried using the following CSS rule, but it isn't working:
.vc_tta-panels #adsl .vc_tta-panel-body:before {
content: 'text goes here';
}
Can you see what is wrong here, please?
Your other rules override this rule, you should add display property, for example:
.vc_tta-panels #adsl .vc_tta-panel-body:before {
content: 'text goes here';
display: inline;
}
The code you have written is working fine, but at the same time, it's getting hidden by your CSS written at some other place.
vc_tta-panels #adsl .vc_tta-panel-body:before {
content: 'Hello';
display: block !important;
}
Attaching a snapshot of issue, from where it gets hidden due to display:none given.
Related
I recently encountered a.. "thing" in the land of SASS. And maybe you guys know a trick or something alike to "fix" it.
I've got this class .icon. It contains some basic styling for my icons (Used for an iconfont). These icons can then be placed in the markup whereever I want. For example in a button. But inside the button this icon needs some extra styling. So I do the following:
.icon {
// Basic styling
}
button {
.icon {
// Additional styling
}
}
It compiles to this css:
.icon {
// Basic styling
}
button .icon {
// Additional styling
}
Everything OK so far. But now I want to extend the .icon to an after-element inside of all my .foo elements like so:
.foo:after {
#extend .icon;
}
Now it compiles to this css:
.icon, .foo:after { // This is good, exactly what I want
// Basic styling
}
button .icon, button .foo:after { // But I don't need the second half of this line
// Basic Additional
}
Now the foo-element isn't just extending the "root" icon-class but also the icon-class under button and all its additional stylings. But I don't need that. I don't want that element to have that additional styling. It doesn't result in problems yet. But maybe that could happen later. So I was curious if it is possible to extend only the .icon from the root, omitting the nested .icon in the button, and possibly more nested icon-classes in other elements later on.
My first thought was to use an abstact class like %icon and extend from that, but the above mentioned icon-class, and the file that it is placed in, is generated by grunt-webfont. So I can't just change the icon-class styling 'cause its overwritten all the time.
What can I do? Is there some more to the extend function of SASS that I don't know of? Or is there a totally different way?
Thanks for any help.
SOLUTION:
Using all the awesome help and tips I found a way to avoid this problem:
Grunt-Webfont suggests to use the i-tag to display the icons. Font-Awesome does the same. So, I'm doing exactly that. And I usually don't use it for anything else.
This allows it to use the i-tag under the button for my extra styling, and not the .icon class. This way the .icon class is used only once in the generated file and then never again.
.icon {
// Basic styling
}
button {
i { // <= Previously '.icon'
// Additional styling
}
}
Have you tried doing something like this?
.icon {
//some styles from external (ie: grunt webfont)
color: red;
}
%icon {
#extend .icon;
}
button {
.ico {
#extend %icon;
//add some additional styles
}
}
.foo:after {
#extend %icon;
//add some more
}
You would then avoid generating the foo:after rule for the .icon inside the button.
EDIT2 - you'll need to create an additional class which you can use inside your styles, so there's only one .icon class defined (in your grunt-webfont generated css). Then just use the .ico class inside your styles and extend the %icon placeholder like shown above.
EDIT - have you considered solving this problem in your grunt-webfont generator?
From the documentation, it seems you can set the output to scss like so:
options: {
stylesheet: 'scss',
mixinPrefix: 'mixin-'
Then just use the mixin to define the styles of your desired classes?
I think this gets the result you're looking for? Albeit, slightly messily.
The method: make a placeholder style and extend that into .icon to begin with.
%icon-styles{
basic: styling;
}
.icon {
#extend %icon-styles;
}
.foo:after {
#extend %icon-styles;
}
button .icon {
#extend %icon-styles;
additional: styling;
}
It compiles into:
.icon, .foo:after, button .icon {
basic: styling;
}
button .icon {
additional: styling;
}
You can also use custom template with grunt-webfont. It’ll give you much more control on generated CSS.
Hello there, I just created this datepicker thingy which turned out pretty cool except that it creates some really annoying and weird looking white space below the divs when empty and appears higher, see the fiddle > http://jsfiddle.net/VtKkM/2/ Any help is greatly appreciated!
Haven't figured out the problem as of yet, but it seems that it doesn't like it when the spans are empty. One workaround, at least for now, is to replace your blank options with just a space ( ) so that there's still the illusion that it's empty but the spans still technically contain a value. This may not be a permanent solution, but it'll work for now.
To elaborate:
Line 2 of your js would go from
var days = '<option></option>',
to
var days = '<option> </option>',
and line 32 would go from }).parent().prepend('<span></span>'); to }).parent().prepend('<span> </span>');
Its for line height and your font size of page you can fix it by
Add line height style to your datePicker class like this:
line-height: 8px;
or change font-size like:
font-size: 10px;
Edit:
and for moving when you pick a some value from select you should set your span to position: absolute;
.datePicker > div > span{
position: absolute;
}
Edit2:
or you can set space value in first time in your span, change <span></span> to <span> </span>
Edit3:
i changed this lines to add space in initial between span tag, check values that add onload datepicker:
$.each(picker.children(), function () {
$(this).wrap('<div>').change(function () {
if ($(this).hasClass('month')) {
$(this).prev().html(months[$(this).val() - 1]);
} else {
$(this).prev().html($(this).val());
}
}).parent().prepend('<span> </span>');
if ($(this).hasClass('month')) {
$(this).prev().html(months[$(this).val()]?months[$(this).val()]:" ");
} else {
$(this).prev().html($(this).val()?$(this).val():" ");
}
});
Edit 4:
and css way, you can fixed it by add padding style to empty span like this:
.datePicker > div > span:empty{
padding:5px;
}
.datePicker > div {
display:inline;
position:relative;
min-width: 18px;
min-height:28px;
padding:0 5px 0 5px;
}
Just change display:inline-block to display:inline
The part about it appearing high I could fix with giving .datePicker select a 5px margin.
I have a list of <div>s. Each <div> has class zebra. Until now I've used the following to stripe the list:
.zebra:nth-child(2n) { /* colors */ }
Now I'm implementing a filtering feature, such that some of these <div>s will have a class hidden. I tried updating my css to
.zebra:not(.hidden):nth-child(2n) { /* colors */ }
But that had no effect. What am I missing? How can I combine these selectors so that only the showing .zebra <div>s are considered in the :nth-child(2n)?
Here's a fiddle of what I'm describing.
UPDATE:
there is an unknown number of .hidden elements, and an unknown total number of elements. (the list is data-driven, not static).
I'd really rather not do any of:
run a javascript every time a filter control is touched, just to re-color the showing list items.
remove an element entirely when it's hiding. this makes re-adding it non-trivial (afaict).
Instead of removing the element as Justin suggested, you could replace it with an element of a different tag. We could use details, for example:
var placemarker = document.createElement("details");
node.parentNode.replaceChild(placemarker, node);
placemarker.appendChild(node);
Then, instead of using :nth-child, use :nth-of-type.
details { display:none; }
div.zebra:nth-of-type(2n) { /* colors */ }
Unhiding the element can then be done with:
placemarker.parentNode.replaceChild(placemarker.firstChild);
See this static example.
if you don't mind delving into jquery..
$('#yourHiddenElement').remove();
will remove it so that your css shades alternate.
http://jsfiddle.net/NYvcv/1/
I would suggest using this instead of applying the class 'hidden' to the element you want to hide.
If you know there will be a limited number of .hidden items, you can do something like this:
.zebra2:nth-child(2n) {
background: lightgrey;
}
.zebra2.hidden ~ .zebra2:nth-child(2n) {
background: inherit;
}
.zebra2.hidden ~ .zebra2:nth-child(2n+1) {
background: lightgrey;
}
.zebra2.hidden ~ .zebra2.hidden ~ .zebra2:nth-child(2n) {
background: lightgrey;
}
.zebra2.hidden ~ .zebra2.hidden ~ .zebra2:nth-child(2n+1) {
background: inherit;
}
And so on. This particular example breaks if there are more than 2 hidden items.
One possible solution:
use jQuery to change the .hidden element's type to, say, <li>. Use :nth-of-type instead of :nth-child.
http://jsfiddle.net/Nb68T/1/
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".
This is probably a case of trying to run before I can walk, however... I have the following code:
<div class="hidden" id="repair_complete">
// some code
</div>
I was under the impression that if my CSS file contained:
#hidden {
display: none;
}
... then the div content wouldn't display. However, it seems to only adopt this behaviour if the CSS file contains a reference to the div id:
#repair_complete {
display: none;
}
In a book I'm working through the opposite seems to be true - the style sheet refers to the class name, not the id.
Any ideas where I'm going wrong?!
Your CSS syntax is incorrect.
If you want to access this div, you can do it like this:
/* By class: */
.hidden {
display: none;
}
/* By ID: */
#repair_complete {
display: none;
}
Note that to access an element by class you use a dot before the class name. You use a hash before the ID.
The other answers have the technical stuff right: you need .hidden, not #hidden.
Now you have to decide whether you want to attach CSS to divs by class or id. I find classes are better in the long run, unless you are really certain that there will ever really and truly be one of the thing you are making.
Also, don't forget that you can attach more than one class to an element:
<div class="red fat shallow">blah blah</div>
Then you can style this element with any of these selectors:
.red {...}
.fat {...}
.shallow {...}
.red.fat {...} /* Applies only to things that are both red and fat */
.red.fat.shallow {...} /* Very specific */
/* etc. */
A "." before the name will refer to classes, and a "#" will refer to ids:
.hidden
{
display: none;
}
You need:
.hidden{
display:none;
}
period is a class specifier, pound sign is for id's.
To use class name use the dot.
i.e.
.hidden refers to the class name
#repair_complete refers to the id.
To refer to an element's ID you use the # selector, to refer to it's class name you use the . selector.
So in your example you would use
#repair_complete {
display:none;
}
or
.hidden {
display:none;
}