I am using DatePickerRange, I found there are much extra width. I tried to reduce some margins inside the date input box and I never be able to change it.
dcc.DatePickerRange(id='date-range',
min_date_allowed=datetime(2020,1,1),
max_date_allowed=datetime.today(),
start_date=start_date,
end_date=datetime.today(),
style = {
'font-size': '3px',
'display': 'inline-block',
'border-radius' : '0.2px',
'border' : '1px solid #ccc',
'color': '#333',
'border-spacing' : '0',
'border-collapse' :'separate',
'width':'100%',
}
)
This is what I have now.You can see definitely I can reduce space of few white space area to make it tight. How to do it? Here is the CSS format I have so far and I am not able to change width.
.DateInput_input, .DateInput_input_1 {
font-size:16px; /*or whatever size you would like to have*/
Width: 100% !important;
height: 1.9em !important;
padding-left: 0px !important;
padding-right: 0px !important;
text-align:center;
}
Thanks
Related
I have this problem with my scrollbar that's overriding my header, is there some CSS property I can use to move the scrollbar "on-top" of my header? I have a transparent background which I thought would do the job.
Basically, how can I make my scrollbar hover above the header, instead of pushing it to the left?
As you see in the pic, the scrollbar is taking over the full width of the header.
Here is my scrollbar CSS:
'#global': {
'*': {
'scrollbar-width': 'thin',
}
,
'*::-webkit-scrollbar': {
width: '1rem', height: '1rem',
}
,
'*::-webkit-scrollbar-thumb': {
backgroundColor: '#d6dee1', borderRadius: '20px', border: "6px solid transparent", backgroundClip: 'content-box',
}
,
'*::-webkit-scrollbar-thumb:hover': {
backgroundColor: '#a8bbbf'
}
,
'*::-webkit-scrollbar-track': {
backgroundColor: 'transparent',
}
}
You can add a margin-top for the webkit-scrollbar-track :
'*::-webkit-scrollbar-track': {
backgroundColor: 'transparent';
margin-top: 10px;
}
This post explains it pretty good: Change scrollbar height
EDIT:
This post has a very similar problem:
How to get a scrollbar in a div with fixed header and footer?
The problem there was solved by fixing the header.
I need to convert an existing html document to pdf. I use wicked_pdf for this task. But there are a lot of things which don’t render correctly:
hyphenation
rounded border on images
other stuff which I don’t care about that much at the moment
Hyphenation
When the pdf is created all paragraphs with hyphenation enabled are rendered without it. The CSS looks like this:
p {
margin-top : 0;
-webkit-hyphens : auto;
-moz-hyphens : auto;
-ms-hyphens : auto;
-o-hyphens : auto;
hyphens : auto;
hyphenate-limit-chars : auto 5;
hyphenate-limit-lines : 2;
widows: 3;
orphans: 3;
}
Rounded borders and images
I’ve got a container with rounded corners. Inside at the top of this container is an image displayed which should have rounded corners too. Unfortunately the image is rendered without rounded corners. It overlaps the container border which look pretty ugly.
The HAML for this container:
.profile-picture-container
= cl_image_tag #presenter.profile_picture, class: 'profile-picture'
.profile-picture-body
%p
= #presenter.user_fullname
And the corresponding CSS:
.profile-picture-container {
float : right;
margin-left : 5mm;
margin-right : -15mm;
border : 1px solid lightgray;
border-bottom-left-radius : 0.25rem;
border-bottom-right-radius : 0.25rem;
overflow : hidden;
}
.profile-picture-container, .profile-picture {
width : 50mm;
}
.profile-picture {
// -1px stolen from bootstrap’s definitions
border-top-left-radius : calc(0.25rem - 1px);
border-top-right-radius : calc(0.25rem - 1px);
}
.profile-picture-body {
padding : 3mm 5mm;
}
Other stuff not working correctly
Headings ignore their page-break-after: avoid; setting.
Is it just me or is html to pdf conversion not ready for primetime?
I want to know how can I implement dropdown menu with arrow pointer in CSS (SASS).
The idea is simple:
1) menu dropdown on press on left or right button
2) dropdown always centred and takes 85% of screen width (please refer screenshot http://joxi.ru/12MpgxpI4y8olm).
3) only the arrow should point 1 or 2 when clicking the respective button.
Here is where problems came:
1) I use absolutely positioned dropdown window (and the arrow too therefore) and all his parents up to the action button itself have position: static (this is required to have a dropdown window always aligned to the left side of a screen and take a % of screen's width)
2) Arrow starts to be positioned against screen size - instead of being positioned against her grandparent - action button. Arrow starts posing against button only if I remove position: static from button, but in this case I've lost dropdown taking full-screen with and aligned to left corder of a screen (it starts to show up against button).
I've tried to do some implementation with flexbox / clearfix, but it seems doesn't work with static elements. Or I misunderstood the idea.
So, my questions are:
1) How I can build a dropdown with arrow pointer properly as I described above and showed on a screenshot? (http://joxi.ru/12MpgxpI4y8olm)
Any ideas?
2) How in CSS (SASS/SCSS) I can get grandparent's position (left, margin-left, padding-left - something like that)? Grandparent == parent of parent :)
I need to support only modern browsers, so e.g. IE before version 9 doesn't really matters to me.
Current styles look like this:
.listing-action-button
position: static
display: flex
flex-direction: row
justify-content: flex-start
.dropdown-menu
left: 5% !important
margin-top: 1.5%
width: 80% !important
float: left !important
position: absolute !important
&:before
flex-grow: 1
align-self: flex-start
position: absolute
top: -7px
left: 9px
display: inline-block
border-right: 7px solid transparent
border-bottom: 7px solid #ccc
border-left: 7px solid transparent
border-bottom-color: rgba(0, 0, 0, 0.2)
content: ''
&:after
position: absolute
top: -6px
left: 10px
display: inline-block
border-right: 6px solid transparent
border-bottom: 6px solid #ffffff
border-left: 6px solid transparent
content: ''
It's based on standard bootstrap's dropdown-menu.
flex-* stuff isn't working, you can omit it.
HAML code for buttons group and dropdown:
<...>
.col-sm-6.col-xs-12.col-sm-pull-3
.user-listing__main{ style: "margin-top: -12px;" }
.user-listing__buttons.user-listing__buttons-tablet.btn-group.btn-group-justified
.btn-group.listing-action-button.left-button{:role => "group"}
%button.btn.btn-lg.btn-default.dropdown-toggle{ type: "button", :style => "width: 100%;", data: { toggle: "dropdown" } }
Preview
%span.caret
%ul.dropdown-menu.dropdown-menu-no-border{ role: "menu" }
.menu-arrow
%li{ class: ("disabled" if disable_edit) }
%a#user-listings__make-featured{ href: edit_listing_path(token: listing.token), role: "group", type: "button", style: "width: 100%;" }
%span.glyphicon.glyphicon-pencil
= t 'user.listings.edit'
%li
%a#user-listings__launch-facebook-campaign{ href: listing_preview_path(token: listing.token), role: 'button', target: '_blank', type: 'button', style: "width: 100%;" }
%span.glyphicon.glyphicon-eye-open
= t 'user.listings.preview'
.btn-group.listing-action-button.right-button{:role => "group"}
%button.btn.btn-lg.btn-primary.btn-inverted.dropdown-toggle{ type: "button", :style => "width: 100%;", data: { toggle: "dropdown" } }
Promote
%span.caret
%ul.dropdown-menu.dropdown-menu-no-border{ role: "menu" }
.menu-arrow
%li.mark-featured{ data: {"listing-id" => listing.id} }
%a#user-listings__make-featured{ href: "#" }
%span.glyphicon.glyphicon-star{ class: ("active" if is_featured?(listing)) }
= t 'user.listings.make_featured'
%li.disabled
%a#user-listings__launch-facebook-campaign{ href: "#" }
%span.glyphicon.glyphicon-thumbs-up
Launch Facebook Campaign
<...>
I'm trying to make my bootstrap navbar collapse at a different width but changing the
//** Number of columns in the grid.
#grid-columns: 12;
//** Padding between columns. Gets divided in half for the left and right.
#grid-gutter-width: 30px;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
#grid-float-breakpoint: #screen-sm-min;
//** Point at which the navbar begins collapsing.
#grid-float-breakpoint-max: (#grid-float-breakpoint - 1);
just makes it fold on to two rows at different widths instead of collapsing and showing the hamburger icon. Is there something else I need to change in order to make it collapse down and show the icon?
I've changed it now to #screen-md-min
and it just deforms more :/ .. the width I want it to open and collapse at are the width of a desktop which is the md class but it doesn't seem to work at all :/
Edit the LESS variables in variables.less The responsive break points are set around line 200:
#screen-xs: 480px;
#screen-phone: #screen-xs;
// Small screen / tablet
#screen-sm: 768px;
#screen-tablet: #screen-sm;
// Medium screen / desktop
#screen-md: 992px;
#screen-desktop: #screen-md;
// Large screen / wide desktop
#screen-lg: 1200px;
#screen-lg-desktop: #screen-lg;
// So media queries don't overlap when required, provide a maximum
#screen-xs-max: (#screen-sm - 1);
#screen-sm-max: (#screen-md - 1);
#screen-md-max: (#screen-lg - 1);
Then set the collapse value for the navbar using the #grid-float-breakpoint variable at about line 232. By default it's set to #screen-tablet . If you want you can use a pixel value, but I prefer to use the LESS variables.
OR
Visit http://getbootstrap.com/customize/#less-variables
Change #navbarCollapseWidth in the formfield
Customize the collapsing point
Customize the #grid-float-breakpoint variable
Click "Compile and Download".
OR
Simply you can use a CSS media query. the breakpoint is here 1280 pixels:
Demo
css
body {
padding-top:70px;
}
#media (max-width: 1280px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
I have several images(not background images) on my webpage, When I see the Print Preview at 100% scale, images looks fine, but My problem is that when I do a print prview with Shrink to fit scale, all the images are coming smaller than the actual size. I have not supplied any width or height attribute on IMG tag so I assume that in print preview it will load as they appear on screen. I have used below css for print media for IMG but it did not work
img {max-width:100%; }
I am expecting the same image dimension in Shrink to fit and 100% scale.
Is this possible? am I missing something in print css? Please advice.
While working on my project, when I needed to get the original size of image in print preview, I had to use !important. Otherwise, it wouldn't overwrite the style defined initially for the image on the page.
I also had to modify the height of image containers:
#media print {
.logo-container,
.img-wrapper,
img {
max-height: none !important;
height: 100% !important;
}
Do you have your images inside 'container' or 'div' etc? you should create print style for them also not just for the img elements.
I would suggest to use the same style on your elements both for screen and print , like so(this is my print.css):
/*How they look like on the print preview*/
#media print {
#poweredbyLogo{
width:213px;
}
#logoframe{
height:80px;
margin-top:6px;
}
.space{
padding-left:20px;
}
.col-md-6.a1{
background-color: #0000f6!important;
}
.col-md-6.a2{
background-color: #d3d3d3!important;
}
}
/*How they look like on the screen*/
#media screen {
#poweredbyLogo{
width:47%;
}
#logoframe{
height:80px;
margin-top:6px;
}
.space{
padding-left:20px;
}
}
Hope helps, good luck.
Also you can try this.
<img class="application-logo res-media" width="65" height="65">
#media screen {
.application-logo{
width: 65px !important;
height: 60px !important;
cursor: pointer;
margin: 25px;
}
}
#media print {
.application-logo, ._imgcont, img {
max-height: none !important;
height: 65px !important;
}
}