I was trying to figure out how to apply horizontal space between elements using ReactJS when I noticed a discrepancy that I can't explain.
SSCCE below: (also in jsfiddle)
<!doctype html>
<html>
<body>
<span>foo</span>
<span style='display:inline-block; width:30px'></span>
<span>bar</span>
<div id='div0'></div>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"> </script>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script>
<script type='text/javascript'>
var rce = React.createElement.bind(React);
var x = (rce('div', {}
, rce('span', {}, 'foo')
, rce('span', {style: {display: 'inline-block', width: '30px'}})
, rce('span', {}, 'bar')));
ReactDOM.render(x, document.getElementById('div0'));
</script>
</body>
</html>
The above code produces on the output:
Given that the DOM elements are identical (except for the presence of the data-reactid attributes):
Why then, this discrepancy in the spacing ?
That's because of spacing in your HTML code between inline html elements. React removes it by default.
<span>foo</span><span style='display:inline-block; width:30px'></span><span>bar</span>
DEMO
Same result can be achieved with commenting space in your HTML code.
<span>foo</span><!--
--><span style='display:inline-block; width:30px'></span><!--
--><span>bar</span>
DEMO
Also the code actually does differ. As you can notice there is no whitespace in React's generated HTML.
How to change the CSS file of yammer share button? I want to add my own CSS for the alignment for WordPress.
You can tell it to use a custom element and then style that element as you wish.
Source: https://developer.yammer.com/docs/share-button
<script type="text/javascript" src="https://c64.assets-yammer.com/assets/platform_social_buttons.min.js"></script>
<script type="text/javascript">
var yammer_options = {
customButton : true,
classSelector: 'my-custom-yammer-share-button'
};
yam.platform.yammerShare(yammer_options);
</script>
I cannot edit the html code, is the question below possible using only "CSS" code?
How do you add a text just like a placeholder or something to an inputbox?
Here's the input text box code:
<input id="isn_email_address" type="text" name="user" size="40" maxlenth="90">
You can't set placeholders using CSS for all browsers. The only browser that supports it at the moment is webkit.
Using jQuery you can achieve this : Working DEMO
Note : you will need latest jquery library you can download from here jQuery Library
Try this code :-
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type = "text/javascript">
$(document).ready(function()
{
$('#isn_email_address').attr("placeholder", "Type your text here");
});
</script>
</head>
If you don't want to use placeholder,obviosly there is other way.I don't know wheather it's possible with css alone.But using javascript and css you can definitely do that.
You could use some pseudo elements, assuming you're not supporting IE7 and below.
#isn_email_address {
position: relative;
}
#isn_email_address:after { /*could use :before if you wanted too*/
content: "Type your text here";
display: block;
}
#isn_email_address:focus #isn_email_address:before {
display: none;
}
You'll probably need to do some z-index adjustment to make sure that you're able to select the textfield. Additionally, some css *left: /my value here/* to make sure it's in the right spot.
I am using ASP.NET MVC 3 with the Razor engine together with the newest version of the Telerik MVC controls.
In telerik.webblue.min.css there are 2 styles, namely t-button and t-state-default. It is implemented on a button element like this:
<button class="t-button t-state-default" type="submit">Apply</button>
I don't want to use a class attribute to specify which styles to use, I want to specify it in my own stylesheet that all button elements must use these 2 styles. I tried the folowing in my stylesheet but it doesn't work:
button,.t-button,.t-state-default{}
So all that I want to have in my markup is:
<button type="submit">Apply</button>
How would I do this?
UPDATE
When I view source this is what I see:
<link href="/Assets/yui_2.9.0/yui/build/reset-fonts-grids/reset-fonts-grids.css" rel="stylesheet" type="text/css">
<link href="/Assets/telerikaspnetmvc/2011.2.712/Content/telerik.common.min.css" rel="stylesheet" type="text/css">
<link href="/Assets/telerikaspnetmvc/2011.2.712/Content/telerik.webblue.min.css" rel="stylesheet" type="text/css">
<link href="/Assets/Stylesheets/hbf.css" rel="stylesheet" type="text/css">
In Firebug when I select the button it shows the top most style for this button as:
button, .t-button, .t-state-default {
}
hbf.css (line 26)
This should work.
However, you could place all the styles from
.t-button,.t-state-default {}
into a single rule labeled
button {}
EDIT
I think I see the problem, based on your update. (If I understand it correctly)
This
button, .t-button, .t-state-default {
}
appears in your hbf.css
However, it is styling nothing. button is not able to reference the other styles that way.
The .t-button, .t-state-default are still receiving styles from the telerik.webblue.min.css stylesheet.
In order to make it work, you need to add button to the telerik.webblue.min.css stylesheet.
Updated:
button,
.t-button,
.t-state-default {
border: 1px solid red;
background: #ccc;
width: 100px;
height: 25px;
}
See Demo: http://jsfiddle.net/rathoreahsan/Q2JwE/
I have a link on my webpage to print the webpage. However, the link is also visible in the printout itself.
Is there javascript or HTML code which would hide the link button when I click the print link?
Example:
"Good Evening"
Print (click Here To Print)
I want to hide this "Print" label when it prints the text "Good Evening". The "Print" label should not show on the printout itself.
In your stylesheet add:
#media print
{
.no-print, .no-print *
{
display: none !important;
}
}
Then add class='no-print' (or add the no-print class to an existing class statement) in your HTML that you don't want to appear in the printed version, such as your button.
Bootstrap 3 has its own class for this called:
hidden-print
It is defined like this:
#media print {
.hidden-print {
display: none !important;
}
}
You do not have to define it on your own.
In Bootstrap 4 and Bootstrap5 this has changed to:
.d-print-none
The best practice is to use a style sheet specifically for printing, and set its media attribute to print.
In it, show/hide the elements that you want to be printed on paper.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Here is a simple solution
put this CSS
#media print{
.noprint{
display:none;
}
}
and here is the HTML
<div class="noprint">
element that need to be hidden when printing
</div>
CSS FILE
#media print
{
#pager,
form,
.no-print
{
display: none !important;
height: 0;
}
.no-print, .no-print *{
display: none !important;
height: 0;
}
}
HTML HEADER
<link href="/theme/css/ui/ui.print.css?version=x.x.x" media="print" rel="stylesheet" type="text/css" >
ELEMENT
<div class="no-print"></div>
You could place the link within a div, then use JavaScript on the anchor tag to hide the div when clicked. Example (not tested, may need to be tweaked but you get the idea):
<div id="printOption">
<a href="javascript:void();"
onclick="document.getElementById('printOption').style.visibility = 'hidden';
document.print();
return true;">
Print
</a>
</div>
The downside is that once clicked, the button disappears and they lose that option on the page (there's always Ctrl+P though).
The better solution would be to create a print stylesheet and within that stylesheet specify the hidden status of the printOption ID (or whatever you call it). You can do this in the head section of the HTML and specify a second stylesheet with a media attribute.
#media print {
.no-print {
visibility: hidden;
}
}
<div class="no-print">
Nope
</div>
<div>
Yup
</div>
The best thing to do is to create a "print-only" version of the page.
Oh, wait... this isn't 1999 anymore. Use a print CSS with "display: none".
The accepted answer by diodus is not working for some if not all of us.
I could not still hide my Print this button from going out on to paper.
The little adjustment by Clint Pachl of calling css file by adding on
media="screen, print"
and not just
media="screen"
is solving this problem. So for clarity and because it is not easy to see Clint Pachl hidden additional help in comments.
The user should include the ",print" in css file with the desired formating.
<link rel="stylesheet" href="my_cssfile.css" media="screen, print"type="text/css">
and not the default media = "screen" only.
<link rel="stylesheet" href="my_cssfile.css" media="screen" type="text/css">
That i think solves this problem for everyone.
If you have Javascript that interferes with the style property of individual elements, thus overriding !important, I suggest handling the events onbeforeprint and onafterprint. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint
As Elias Hasle said, JavaScript can override !important. So, I extended his answer with a theoretical implementation.
This code identifies all elements with the class no-print, hides them with CSS before printing, and restores the original style after printing:
var noPrintElements = [];
window.addEventListener("beforeprint", function(event) {
var hideMe = document.getElementsByClassName("no-print");
noPrintElements = [];
Array.prototype.forEach.call(hideMe, function(item, index) {
noPrintElements.push({"element": item, "display": item.style.display });
item.style.display = 'none'; // hide the element
});
});
window.addEventListener("afterprint", function(event) {
Array.prototype.forEach.call(noPrintElements, function(item, index) {
item.element.style.display = item.display; // restore the element
});
noPrintElements = []; // just to be on the safe side
});