I have a lot of DIVs having some data in my web page & I want to print a data of a specific div by using "window.print()" without opening any popup. What should I do?
You must use CSS Media Types like this:
#media print {
#printable {
display:block;
overflow: visible;
}
#nonprintable {
display:none;
}
}
#media screen {
body, table, tr, td { font:12px Arial, Helvetica, sans-serif; }
.divStyles {
width:850px;
height:150px;
border: 1px solid #000;
background-color: #ccc;
padding: 15px;
}
}
I have created an example for you, see a demo: http://jsfiddle.net/rathoreahsan/Vuw6D/3/
Related
I want to hide some divs when it hit certain breakpoints, in bootstrap v4 there is something like: hidden-sm-down
After reading the Grid documentation, setting <Col xs={0}></Col> may be the solution
here is my example: http://codepen.io/kossel/pen/BQgzNg?editors=0110
However expected with only xs={0} would hide the sidebar at XS view, but it hidden at every screen size, the solution/hack is to put add another breakpoint like sm={1} to make it work as expected.
What is the correct way to do this?
I should have respond my own question. it's not a bug, it's the intended design.
after reading https://github.com/roylee0704/react-flexbox-grid/issues/13
the idea of "Hiding element when in xs" size is actually an anti-patter for responsive design. the idea should be "show when more than sm size"
We should keep in mind "mobile first", which means, we should hide the menu by default (as it should be hidden for mobile) and then show it according to the screen size.
.sidebar {
display: none;
}
and then do
<Col sm={4}></Col>
but if we really need something handy, I also added this to my mixin.less
#media (min-width: #screen-sm-min) {
.visible-sm { display: block !important; }
.row.visible-sm { display: flex !important;
display: -webkit-flex !important;
display: -ms-flexbox !important;
display: -webkit-box !important;
display: flex!important; }
table.visible-sm { display: table !important; }
tr.visible-sm { display: table-row !important; }
th.visible-sm,
td.visible-sm { display: table-cell !important; }
.flex-column-sm {flex-direction: column; }
}
#media (min-width: #screen-md-min) {
.visible-md { display: block !important; }
.row.visible-md { display: flex !important;
display: -webkit-flex !important;
display: -ms-flexbox !important;
display: -webkit-box !important;
display: flex!important; }
table.visible-md { display: table !important; }
tr.visible-md { display: table-row !important; }
th.visible-md,
td.visible-md { display: table-cell !important; }
.flex-column-md {flex-direction: column; }
}
#media (min-width: #screen-lg-min) {
.visible-lg { display: block !important; }
.row.visible-lg { display: flex !important;
display: -webkit-flex !important;
display: -ms-flexbox !important;
display: -webkit-box !important;
display: flex!important; }
table.visible-lg { display: table !important; }
tr.visible-lg { display: table-row !important; }
th.visible-lg,
td.visible-lg { display: table-cell !important; }
.flex-column-lg {flex-direction: column; }
}
#media (min-width: #screen-xl-min) {
.visible-xl { display: block !important; }
.row.visible-xl { display: flex !important;
display: -webkit-flex !important;
display: -ms-flexbox !important;
display: -webkit-box !important;
display: flex!important; }
table.visible-xl { display: table !important; }
tr.visible-xl { display: table-row !important; }
th.visible-xl,
td.visible-xl { display: table-cell !important; }
.flex-column-xl {flex-direction: column; }
}
#media (min-width: #screen-md-min) { .hidden-md { display: none !important; } }
#media (min-width: #screen-lg-min) { .hidden-lg { display: none !important; } }
#media (min-width: #screen-xl-min) { .hidden-xl { display: none !important; } }
/** utilities **/
.center-block {
margin-right: auto !important;
margin-left: auto !important;
display:block;
}
I think you may have found a bug - or at least a requirement to specify more than one breakpoint span to get expected results. That seems to be a valid way to hide grid columns though.
Antd uses CSS alongside React with generated className values for its components. Since you aren't really using the grid other than just to show and hide a component, I would recommend creating your own classes using media queries and then adding them to your components via the className prop.
Here's an example from the code for the Form.Item component.
#media (max-width: #screen-sm-max) {
.#{ant-prefix}-col-sm-24.#{form-prefix-cls}-item-label {
.make-vertical-layout();
}
}
https://github.com/ant-design/ant-design/blob/6b8eeb79d11a53df3ff47bc525d0b7db714a8a2c/components/form/style/index.less#L274
You can define something like that in a LESS or CSS file and import it into your React component. You could use LESS to access the #screen-sm-max variable. Like this:
#import "~antd/lib/style/themes/default.less"
#media (min-width: #screen-sm-min) {
.class-name-to-show-mobile-hide-desktop {
display: none;
}
}
#media (max-width: #screen-sm) {
.class-name-to-show-desktop-hide-mobile {
display: none;
}
}
Also see notes here on customizing the theme variables. https://ant.design/docs/react/customize-theme
I didn't see any existing utility components or classes that you could reuse like there is in bootstrap.
view it on jfiddle. (you may need to add the frameworks: jquery 1.11.0, then tick the box for jquery mobile 1.4.4. I tried adding the resources for the versions I use (1.11.1 and 1.4.5 respectively -- but the pages don't render from their link. Sorry 'bout that.)
When I add data-position='fixed' to my footer on a page that has, a reduced width on larger screens (set with a media query in css) and a nav-panel that says open on larger screens using the data-display="reveal" or "push" (no problem with "overlay"), when I open the nav-panel (icon in upper left of header) the footer slides right as it should, but does not resize, and the contents are not centered. The re-sizing toggles if I click on the background, but the content never centers. I've settled on "overlay" as a temporary fix, but I'd prefer to use "reveal" (the default). Much of the CSS for the nav-panel is borrowed from the jquery mobile demos.
To duplicate the problem on the fiddle, use a wide screen and enlarge the output panel so that you see the gradient background, then click on the menu button (bars). After that you can see the footer slide (but not adjust its width) and slide back to an adjusted width (but not center the icons in the footer).
Any ideas what I did wrong or what CSS might resolve the issue?
Here's the html:
<body>
<div data-role="page" id="index-page" class="ui-responsive-panel" data-title="MMT" data-url="index-page" data-theme="a">
<div data-role="header" >
<h6 class='header' style="overflow:visible !important;">Test Page</h6>
Contact
</div><!-- /header -->
<div data-role="panel" class="jqm-navmenu-panel" data-position-fixed="true" data-display="reveal" id="index_nav-panel">
<ul data-role="listview">
<li>Close Menu</li>
<li>Blah</li>
<li>Foo</li>
<li>Bar</li>
<li>Bat</li>
</ul>
</div>
<div role="main" class="ui-content"><div class="banner">Banner Image </div>
<p>text</p>
<div style='margin-top:44px;'>
<ul data-role="listview">
<li>Foo</li>
<li>Bar</li>
<li>Bat</li>
<li>Baz</li>
<li>Biz </li>
</ul>
</div>
<div data-role='collapsible' class='ui-nodisc-icon' data-collapsed-icon="home" data-expanded-icon="carat-u" data-mini='true'>
<h3>Follow...</h3>
<p>Follow us on Twitter:</p>
</div>
</div>
<div data-role='footer' data-position='fixed'>
<div class='footer'>
Contact Phone:
Twitter
</div>
</div><!-- /footer -->
here's the css
/*css file for mobile website*/
#media all and (max-width: 50em) {
.my-breakpoint .ui-block-a,
.my-breakpoint .ui-block-b,
.my-breakpoint .ui-block-c,
.my-breakpoint .ui-block-d,
.my-breakpoint .ui-block-e {
width: 100%;
float:none;
}
}
.banner img{
display:block;
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto
}
/* set a width for wide screens */
.collapsible {
max-width:900px;
}
/* to center the content on wide screen pc or laptop */
#media only screen and (min-width: 1025px){
.ui-page{
width: 960px !important;
margin: 0 auto !important;
position: relative !important;
/*border-right: 3px rgb(93, 105, 105) outset !important;
border-left: 3px rgb(93, 105, 105) outset !important;*/
}
.ui-footer {
max-width: 960px !important;
margin: 0 auto !important;
}
}
.header, .firm {font-family: 'IM Fell French Canon SC', serif !important;}
.firm{font-size:1.2em; font-weight:bold;}
.ui-header .ui-title {
margin-right: 10%;
margin-left: 10%;
}
/*panel background color*/
div#index_nav-panel{
background-color: rgba(91, 95, 97, 0.1) !important;
}
/*panel stays open on desktops*/
#media (min-width:35em) {
/* wrap on wide viewports once open */
.ui-panel-page-content-open.ui-panel-page-content-position-left {
margin-right: 17em;
}
.ui-panel-page-content-open.ui-panel-page-content-position-right {
margin-left: 17em;
}
.ui-panel-page-content-open {
width: auto;
}
/* disable "dismiss" on wide viewports */
.ui-panel-dismiss {
display: none;
}
/* same as the above but for panels with display mode "push" only */
.ui-panel-page-content-open.ui-panel-page-content-position-left.ui-panel- page-content-display-push {
margin-right: 17em;
}
.ui-panel-page-content-open.ui-panel-page-content-position-right.ui-panel- page-content-display-push {
margin-left: 17em;
}
.ui-panel-page-content-open.ui-panel-page-content-display-push {
width: auto;
}
.ui-panel-dismiss-display-push {
display: none;
}
div.footer {
text-align: center;
letter-spacing: .2em;
font-size: 1em;
}
}
/* #### target mobile devices with max device width 480px #### */
#media screen and (max-device-width: 480px){
div.footer {
font-size: .75em;
}
div.footer a.ui-btn {
margin-top: 0.1em !important;
}
}
div.footer {
text-align: center;
/* font-size: .75em;
*/}
.footer-text{
color: #999;
margin-left:-8px;
}
/*popup dialog background color*/
div#popupSocialMedia, div#popupDialog {
background-color: rgb(237,237,237);
}
div#popupDialog .ui-content {
height: 50%;
}
div.ui-content { background-color: #f9f9f9 !important;}
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a {
background-color: rgb(10, 10, 10) !important;
background: #d2b48c; /* old browsers */
background: -webkit-linear-gradient(#efefef,#000000) fixed; /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(#efefef,#000000) fixed; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#media (min-width: 60em) {
.jqm-demos .jqm-header h2 {
padding: 1em 0 .7em;
margin: 0 1em 0 3%;
text-align: left;
}
.jqm-demos .jqm-header h2 img {
width: 275px;
height: 78px;
}
.jqm-demos .jqm-header p {
bottom: auto;
left: auto;
top: 50%;
right: 15%;
font-size: 1.2em;
margin-top: -.625em;
}
.jqm-demos .jqm-navmenu-link {
display: none;
}
.jqm-demos .jqm-search-link {
right: 3%;
}
.jqm-demos .jqm-footer p {
float: right;
margin: 1.5em 3% 1.5em 1.5em;
}
.jqm-demos .jqm-footer p:first-child {
float: left;
margin: 1.25em 1.25em 1.25em 3%;
}
.jqm-demos .jqm-navmenu-panel {
visibility: visible;
position: relative;
left: 0;
clip: initial;
float: left;
width: 25%;
background: none;
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
transform: none !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.jqm-navmenu-panel .ui-panel-inner {
margin-top: 3em;
margin-bottom: 3em;
}
.jqm-navmenu-panel .ui-listview .ui-btn {
padding-left: 12.5%;
text-shadow: none !important;
}
.jqm-navmenu-panel .ui-listview .ui-listview .ui-btn {
padding-left: 15%;
}
.jqm-navmenu-panel .ui-collapsible,
.jqm-navmenu-panel .ui-collapsible-content,
.jqm-navmenu-panel .ui-btn {
background: none !important;
border-color: #ddd !important;
}
.jqm-navmenu-panel .ui-btn.ui-btn-active {
color: #3388cc !important;
}
.jqm-navmenu-panel .ui-btn::after {
opacity: 0;
-webkit-transition: opacity 500ms ease;
-moz-transition: opacity 500ms ease;
transition: opacity 500ms ease;
}
.jqm-navmenu-panel .ui-btn:hover::after {
opacity: .6;
}
.ui-panel-dismiss-open.ui-panel-dismiss-position-right {
left: -17em;
right: 17em;
}
}
I've omitted the javascript... from here and the fiddle.
Thanks for looking at this...
screenshot of the footer extended
...screen shot of the footer retracted after clicking on the background
The problem goes away if I remove "data-position="fixed" from the footer.
Posting my own answer at #twisty's suggestion. See his comments, too.
It turns out that since I found a different stackoverflow solution to keep my pages full size, my display is the same without data-position="fixed"... so I just removed it and all works as it "should". I'm curious to know why the footer doesn't work the same as the header, but don't want to spin anyone's wheels since I can now move forward without the issue
In case anyone wants to know where my 'fix' was, it's thanks to #ezanker, whose jfiddle shows the code: jsfiddle.net/zKS76/19 and Omar, whose answer to the op's question on so is stackoverflow.com/questions/21552308/…;.
#twisty suggests the reason that headers and footers behave differently: " When it is "fixed" it's removed from that wrapper and has a z-index of 1000, and is sort of stand alone from the rest of the page. "
I'm trying to use just a single color in jQuery progressbar, but it fill the whole div.
Here's the problem, i just use these functions.
$(document).ready(function(){
$("#progressbar").css({ "background": '#FF0000' });
$("#progressbar").progressbar({ value: 10 });
});
http://jsfiddle.net/jtf7M/1/
How do i make this fill properly, step by step?
CSS file is missing. Add http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css to your resources and it will be ok.
Edit:
If you don't want to load whole CSS file, just add this code in your page http://jsfiddle.net/jtf7M/21/:
<style>
.ui-progressbar { height:2em; text-align: left; overflow: hidden; }
.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }
.ui-widget-content {
border: 1px solid #AAA;
background: white;
}
.ui-corner-all {
-moz-border-radius: 4px/*{cornerRadius}*/;
-webkit-border-radius: 4px/*{cornerRadius}*/;
-khtml-border-radius: 4px/*{cornerRadius}*/;
border-radius: 4px/*{cornerRadius}*/;
}
.ui-widget-header {
border: 1px solid #AAA/*{borderColorHeader}*/;
background: #CCC;
}
</style>
I think there is no jQuery ui lib load on that jsfiddle.
But you are doing right.
http://jqueryui.com/progressbar/#animated
I want to loop through an array of things and create a tab for each one. When I pull up the page, however, each one appears on a new line. I'm using Slim, though I think this would translate to any other tempting language.
I also have a reset.css loaded before anything else, but the breaks remain.
Slim:
p Your dashboard!
.tabs
.tab-bar
- TYPES.each do |type|
.tab-item
p
= type.to_s
Scss:
.tabs {
width: 80%;
border-color: $slushie;
.tab-bar {
.tab-item{
p {
color: $white;
font-weight: bold;
font-family: Helvetica;
}
}
}
}
You need to add a float:left; element onto the css element
tabs {
float:left;
width: 80%;
border-color: $slushie;
.tab-bar {
.tab-item{
p {
color: $white;
font-weight: bold;
font-family: Helvetica;
}
}
}
}
It's probably because you're using a p element which is normally a block element. You can override this using something like display: inline; (not that you will need to do this on your .tab-item div too). You could also float the .tab-item elements instead.
.tabs {
width: 80%;
border-color: $slushie;
.tab-bar {
.tab-item{
display: inline;
p {
color: $white;
font-weight: bold;
font-family: Helvetica;
display: inline;
}
}
}
}
I've implemented the jQuery datepicker. It seems to be working fine but the calendar is too large.
jQuery Datepicker http://www.softcircuits.com/Client/datepicker.png
The site I'm working on has many layers of stylesheets and parent pages and controls. And I don't seem to be able to isolate what is making it large. (Sorry, the site isn't public.)
It appears the calendar is based on a font size. I tried wrapping my textbox in a div with a smaller font but it seems to ignore that. Is there any way to specify a fixed font size?
While changing the font size for .ui-widget works, I got the best results with the following.
#ui-datepicker-div { font-size:11px; }
Not only does this seem to do exactly what I need, it is also unlikely to impact any other jquery-ui widgets.
try setting font-size for class .ui-datepicker
.ui-datepicker {font-size:11px;}
http://jsfiddle.net/pxfunc/ps5cA/
It takes some digging in firebug but I have included one of the versions I use to reduce it. The key is to copy the exact styles from the jQuery-ui CSS file and put them in the head of the page you need them or in a CSS style sheet after the jQuery-ui style sheet.
.ui-datepicker {
padding: 0.1em 0.1em 0;
width: 11em;
}
.ui-widget {
font-family: Helvetica,Arial,sans-serif;
font-size: 14px;
}
.ui-datepicker th {
border: 0 none;
font-weight: normal;
padding: 0.2em 0.1em;
text-align: center;
}
.ui-datepicker th span {
font-size: 11px;
}
.ui-datepicker td span, .ui-datepicker td a {
padding: 0.1em;
}
.ui-datepicker td {
padding: 0.9px;
}
.ui-datepicker .ui-state-highlight {
height: 12px;
margin-bottom: 0;
}
.ui-state-default, .ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
font-size: 10px;
font-weight: normal;
text-align: center;
}
.ui-datepicker .ui-datepicker-title {
line-height: 13px;
}
.ui-datepicker .ui-datepicker-title span {
font-size: 11px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
margin-left: -8px;
margin-top: -8px;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
height: 15px;
top: 1px;
width: 15px;
}
.ui-datepicker-next-hover .ui-icon {
height: 16px;
width: 16px;
}
Adding this to the site.css worked for me
.ui-widget {
font-size: .7em !important;
}
you can change "jquery-ui-1.10.4.custom.css" as follows
.ui-widget
{
font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
font-size: 0.6em;
}
Our calendar was big and ugly looking with hard to click month arrows. It was caused by mismatching versions of the jquery-ui css and jquery-ui js includes.
version numbers must match e.g.
jquery-ui-1.10.3.custom.min.css
jquery-ui-1.10.3.custom.min.js
but also needed the css recommended above
#ui-datepicker-div { font-size:11px; }
I agree with mdmullinax. You have to change the font size for the whole class
.ui-datepicker-div { font-size:11px; }
because datepicker is not controlled by id so below change has no impact on size
ui-datepicker-div { font-size:11px; }
h