I am using a dojo dataGrid to render a table. I need to hide the header row.
The Dojo documentation recommended using .dojoxGrid-header { display:none; } to turn off the column header but I only saw dojoxGridMasterHeader used in the debugger.
http://dojotoolkit.org/reference-guide/1.7/dojox/grid/DataGrid.html#hiding-the-headers-of-a-grid
In order to hide the dojo dataGrid's header row, I defined this in the HTML file.
.dojoxGridMasterHeader { display:none; }
I loaded the dojo library first, and then my own CSS style.
<style type="text/css">
.dojoxGridMasterHeader { display:none; }
</style>
However, the UI still displays the header in the dataGrid. The debugger shows this code for the header
I don't understand why the CSS still go overwritten to style="display: block"
Thanks a lot.
Add !important
.dojoxGridMasterHeader {
display: none !important;
}
http://jsfiddle.net/cswing/Uy3nQ/
Related
I am trying to create a printable document using CSS in my angular project.
For my print document that runs into multiple pages I need automatically to avoid printing the date and title in the header. At the same time I want to make sure that the document is printed with some margins. To achieve this I am using the approach suggested in this answer on SO. However I am not able to get the styling to apply.
My CSS Code looks like this
#media print {
#page {
size: auto;
margin: 0;
}
body {
margin: 2cm !important;
}
}
I have tried pasting this code in both the app.component.scss file as well as the styles.scss file. Both approaches don't seem to work. Any suggestions?
You need to put the following css in your styles.css file
#media print {
#page {
size: auto;
margin: 0mm; // added mm
}
body {
margin: 2cm;
}
}
And if you need component specific styling, you can add that to your component's css file as well:
#media print {
section {
color: orange;
}
}
Here is a Stackblitz example.
You can also try to print this page (https://angular-j4ab2g.stackblitz.io), and you will see that the date from the header is gone, and my custom section has orange text.
EDIT
I think the best option to remove the footer and header is to un-check the box in the print settings
Then you do not need to add the 0mm margin to the #page selector and the 2cm margin on the body selector.
Can someone maybe help me with a few lines of css code?
I would like to my search section on my page:
http://www.virtual-forms.com/docs/
To look something like this:
https://docs.wedevs.com/
I'm new to CSS and Wordpress
Thanks, Davor 🤗
EDIT:
My latest try was with this:
/*Header search weDocs*/
.wedocs input[type="submit"],
.wedocs input[type="search"]
{
background-color: #fff !important;
color: #000;
width: 50%;
}
But no luck.
you should get on with applying correct CSS by inspecting the elements in your web browser (right-click element on site > Inspect) to find their correct classes. inspecting linked site virtual-forms.com shows that the whole search form has a parent form element with class="search-form wedocs-search-form", with child divs with classes "wedocs-search-input" for input, "wedocs-search-in" for dropdown and "search-submit" for submit-button.
I would put display: flex; on the parent element:
.wedocs-search-form {
display: flex;
}
use classes to style each individual element there
.wedocs-search-input { }
.wedocs-search-in { }
.search-submit { }
Using those classes should get you closer to getting the correct style to those elements. read up on the flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I would use flex-grow on input to make it bigger for example. Hope this gets you along.
I'm trying to make a universal CSS layout for a large application my companies working on. I ran into a problem while trying to style all asp:label's to look a certain way. I was having the same problem with buttons but I figured that out:
input[type="submit"] {
background: red;
}
that will make all the buttons have a red background....
So, does anyone know how to style asp:label's ??? Everything that I've attempted is listed below, but to no avail:
label {
background: red;
}
asp:label {
background: red;
}
input[type="label"] {
background: red;
}
Since a label just outputs a span, I would imagine that it's like this:
span { background-color:Red; }
I have 30 buttons of different sizes and I want to set the width of all at once through CSS. But I haven't been able to get it to work right.
[insert example of failed CSS code here]
But it doesn't work. For example, the following button doesn't follow the above rule:
[insert minimal, complete HTML example here that illustrates the issue]
If you need to do this explicitly, you can simply add the !important attribute, although this will guarantee that regardless of location or source, the width property will be overridden, so be sure that you definitely want to apply that style.
button {
width: XXXpx !important;
}
EDIT
To make the above style only apply to one HTML page, as per your request, you can change the HTML for that page slightly, giving an id to your <body> tag, and then targeting buttons only when they appear below that id.
HTML
<body id="page_title">
CSS
#page_title button {
width: XXXpx !important;
}
You can create a button class in your css
.button
{
width: ____px;
}
and then in your .aspx add cssClass="button" to your ASP buttons (I assume they're asp.net controls?)
For input element
INPUT[type="submit"] {
width: XXXpx;
}
For button
BUTTON {
width: XXXpx;
}
Assuming your buttons have something unique in common (ie. they're all have the class name of "buttons"), you can just use a CSS selector to set their width property. ie.
.buttons {
width:100px;
}
There are a number of different selectors you can use to target them, and keep in mind you can have multiple classnames on each html element by putting a space between them. ie. <div class='nav button'></div> will respond to both the .nav and .button definitions.
I have a page with lots of data, tables and content.
I want to make a print version that will only display very few selected things.
Instead of writing another page just for printing, I was reading about CSS's feature for "#media print".
First, what browsers support it? Since this is an internal feature, it's OK if only the latest browsers support it.
I was thinking of tagging a few DOM elements with a "printable" class, and basically apply "display:none" to everything except those elements with the "printable" class.
Is that doable?
How do I achieve this?
EDIT:
This is what I have so far:
<style type="text/css">
#media print {
* {display:none;}
.printable, .printable > * {display:block;}
}
</style>
But it hides everything. How do I make those "printable" elements visible?
EDIT:
Trying now the negative approach
<style type="text/css">
#media print {
body *:not(.printable *) {display:none;}
}
</style>
This looks good in theory, however it doesn't work. Maybe "not" doesn't support advanced css ...
Start here. But basically what you are thinking is the correct approach.
Thanks, Now my question is actually
becoming: How do I apply CSS to a
class AND ALL OF ITS DESCENDANT
ELEMENTS? So that I can apply
"display:block" to whatever is in the
"printable" zones.
If an element is set to display:none; all its children will be hidden as well. But in any case. If you want a style to apply to all children of something else, you do the following:
.printable * {
display: block;
}
That would apply the style to all children of the "printable" zone.
If you want to display some links etc. when in the browser, that you don't want to be printed. Furthermore you have some logos and letterhead info that only should go on the printed page.
This seems to work fine:
Example:
CSS:
#media print {
.noPrint {
display:none;
}
}
#media screen {
.onlyPrint {
display: none;
}
}
HTML:
<div class="noPrint" id="this_is_not_printed" >
<a href=links.html>
</div>
<div class="onlyPrint" id="this_is_only_seen_on_printer" >
<img scr=logo.png >
<img scr=letterhead.png >
</div>
A simple way:
<style>
.print-only{
display: none;
}
#media print {
.no-print {
display: none;
}
.print-only{
display: block;
}
}
</style>
I got here because I was curious about printing a chart generated by chart.js. I wanted to just print the chart directly from the page (with a button that does a 'window.print') without all of the other content of the page.
So, I got closer by using the technique from the answer here: Why can't I override display property applied via an asterisk? .
You have to apply the 'asterisk' to the 'body' element, not just by itself. So, using the example CSS that the OP (Nathan) added to the question, I changed it to this:
<style type="text/css">
#media print {
body * {display:none;}
.printable, .printable > * {
display: block !important;
}
}
</style>
Then adding that 'printable' class to the chart itself, as in
<canvas id="myChart" class="printable" width="400" height="400"></canvas>
Which removed all page elements on the printed output except the chart when the 'print' button is clicked (via this):
<script>
myChart.render();
document.getElementById("printChart").addEventListener("click",function(){
window.print();
});
</script>
So, perhaps this will help anyone that gets to this question via the googles.
Came across the same question recently and for me, this solution works just perfect:
#media print {
* {
visibility: hidden;
}
.printable {
visibility: visible;
position: absolute;
top: 0;
left: 0;
padding: 10mm;
}
.printable * {
visibility: visible;
}
}
Since visibility: hidden doesn't remove elements, as display: none does, it is possible to change it for desired elements separately.
Nearly all browsers support it. It might be advantageous to use the media attribute on the link tag.
Using display: none; in some of your rules would be an appropriate way to handle your situation.
I suggest to hide the element that you won't print:
HTML
<h1 class="no-print" >Welcome Just Screen</h1>
<div> I want print this section :)</div>
<div class="no-print">It's display only on screen</div>
CSS
#media print {
.no-print {
display: none;
}
}