Hi I created my first React Project and I want to hide this 'side-menu' section in mobile screens. Is there a way to do this using css?
<div className='side-menu'>
<SiderComponent />
</div>
If you want to hide this div in all the devices that have a max-width of 768px, just use this,
#media (max-width: 768px){
.side-menu {
display: none;
}
}
at the same time if you want to hide a div on large screens (width is larger than 768px), use the below one
#media (min-width: 768px){
.your-class {
display: none;
}
}
You can use media queries like that :
#media screen and (max-width: ...px){
.side_menu{
display: none;
}
}
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
We have been working on a project where the contents in the html page needs to be printed in the dot matrix printer using a JavaScript print function. The issue we are facing is that there is blank space after the contents are printed.
The page settings is A4 / Legal as there cannot be a definite height since the height of the contents printed may vary.
We have tried using the following CSS:
.page-break {
display: none; /**Added only this on 18-12-2018*/
page-break-after: always;
}
html {
height: 99%;
}
##media all {
.page-break {
visibility: hidden;
}
}
##media print {
body * {
display: none;
height: 0;
}
}
You can try adding space between ## and media like so ## media. There is a bug like that with .NET Razor.
You could also use #page to manipulate margins, size and page breaks.
MDN: The #page CSS at-rule is used to modify some CSS properties when printing a document. You can't change all CSS properties with #page. You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.
Or you can also try this
<style type="text/css">
.page-break {
display: none; /**Added only this on 18-12-2018*/
page-break-after: always;
}
html {
height: 99%;
}
</style>
<style type="text/css" media="all">
.page-break {
visibility: hidden;
}
</style>
<style type="text/css" media="print">
body * {
display: none;
height: 0;
}
</style>
I have a fiddle which is working perfectly fine in desktop view. On desktop view, it is working in a way that on click of any product item (as shown in the screenshot below), the description box gets displayed at the bottom.
In mobile view I am seeing all the description boxes gets displayed at the bottom without being clicked at the top.
The snippets of CSS codes which I have used for the mobile view:
#media only screen and (max-width: 767px)
{
.product-all-contents
{
overflow-x: auto;
}
.product-contents .product{
min-width: 50.795%;
margin: 0 2%;
padding-top: 3.91%;
padding-left: 3.91%; padding-right: 3.91%;
}
}
Problem Statement:
At the moment. I am seeing all the the boxes getting display at the bottom even it is not clicked.
I have feeling that I am using display: inline-block !important which is overriding display:none from the html
#media only screen and (max-width: 767px)
{
div.goal-setting, div.customization-tools, div.custom-invoicing, div.lead-tracking, div.email-marketing, div.royalty-calculator, div.brand-control,
div.franchisehubtv, div.cloudbasedtextipad, div.business-analytics,div.tech-support, div.employee-management, div.order-management, div.white-label {
display: inline-block !important;
}
}
I am wondering what changes I should make in the CSS codes so that I can apply display: inline-block !important only to one product item instead of all items.
Just add this jquery for all the sections
$(window).resize(function(){
if ($(window).width() <= 767) {
$("#franchisehub").click(function(){
$(".franchisehubtv").css('display', 'inline-block');
});
//add this condition for all sections
}
});
And remove this css :
#media only screen and (max-width: 767px)
{
.goal-setting, .customization-tools, .custom-invoicing, .lead-tracking, .email-marketing, .royalty-calculator, .brand-control,
.franchisehubtv, .cloudbasedtextipad, .business-analytics, .tech-support, .employee-management, .order-management, .white-label {
display: inline-block !important;
}
}
You are setting all the boxes in the bottom to display:none except for the one thats active in your click handler. In that case you don't need the below css at all. I tried your fiddle and removed this css style and it works as you need in screen widths less than 767px as well
#media only screen and (max-width: 767px)
{
div.goal-setting, div.customization-tools, div.custom-invoicing, div.lead-tracking, div.email-marketing, div.royalty-calculator, div.brand-control,
div.franchisehubtv, div.cloudbasedtextipad, div.business-analytics,div.tech-support, div.employee-management, div.order-management, div.white-label {
display: inline-block !important;
}
}
When you use !important in your css (external or internal) it overrides the inline style. So though you are setting it to display:none inline using jQuery , the internal style with !important overrides the inline style.
You can add a class like 'active-category' to the div thats selected instead of setting the display:inline-block and a class 'default-category' to all the default ones instead of setting display:none every time. And then target the active-category class in your css and set the style
eg.
#media only screen and (max-width: 767px) {
div.active-category {
display: inline-block;
}
div.default-category {
display: none;
}
}
Just add jquery as below:
$("#franchisehub").click(function(){
$(".franchisehubtv").css('display', 'inline-block');
});
//add for all items
Try if it works.
Hope this is what you want.
Without using:
<style type="text/css">
body {
overflow:hidden;
}
</style>
How can I hide the scroll bar?
Note - I need overflow for other elements.
This works for webkit:
#element::-webkit-scrollbar {
display: none;
}
If you want all scrollbars hidden, use:
::-webkit-scrollbar {
display: none;
}
For Chrome and Safari browsers, use:
.element::-webkit-scrollbar { width: 0 !important }
There is also a CSS rule that can hide scrollbars in IE 10+.
.element { -ms-overflow-style: none; }
But the overflow:hidden is still most popular.
Have you tried overflow-x and overflow-y?
http://www.w3schools.com/cssref/css3_pr_overflow-x.asp
http://www.w3schools.com/cssref/css3_pr_overflow-y.asp
I have a need to print pages from a web app on to 8" x 4" index cards. IE doesn't save print settings from one print to the next, so is there a way to programmatically force the print set up?
Look at this CSS3 examples from http://www.w3.org/TR/css3-page/#size:
/* style sheet for "A4" printing */
#media print and (width: 21cm) and (height: 29.7cm) {
#page {
margin: 3cm;
}
}
/* style sheet for "letter" printing */
#media print and (width: 8.5in) and (height: 11in) {
#page {
margin: 1in;
}
}
/* A4 Landscape*/
#page {
size: A4 landscape;
margin: 10%;
}
You can do this in CSS using the #media print directive, no js required. You'll have to calculate what sizes relate to a 4x8 index card and do all the positioning yourself, but it will work. Also, since this is CSS2 it won't work in IE6. (see Joel's comments)
#media print {
body {
width: /*width of index card*/
height: /*height of index card*/
}
/* etc */
}