I am trying to render a angular datepicker in the bootstrap's modal window. However the calendar is getting clipped.
Attached is the screenshot for the same.
I tried to fix it with z-index. However failed very badly.
Pre-Conditions :
The header and footer of the modal are fixed.
Only modal -body will scroll.
The modal-body will have max-height to occupy the remaining height of the browser
The content in the modal may increase or decrease. Hence the modal will extend to utilize the remaining browser height with the scrollbar only for the content.
As <uib-datepicker> has a fixed size and cannot be resized, you can customize the size of the small buttons (days).
For example define .custom-size .btn-sm CSS rule:
.custom-size .btn-sm {
padding: 4px 8px;
font-size: 11px;
line-height: 1.5;
border-radius: 3px;
}
and then apply the custom-size class to uib-datepicker:
<uib-datepicker ng-model="dateTo" starting-day="1" min-date="dateFrom" show-weeks="false" class="custom-size"></uib-datepicker>
Related
I have created a CSS button on the main menu of a site that I adopted (did not design myself) and the button looks great when at the top of the page. However, once I scroll down and the menu compresses into the sticky menu, the text misaligns with the button background. The text drops down to below the button background and I'm not sure how to fix that.
I've tried adjusting the padding, instead of creating a set height & width to the button, but the padding wasn't working on the right and left side so I went back to the static size. My current button code is below.
.button-menu {
background-color: #0051a3;
width: 100px;
height: 30px;
text-align: center;
vertical-align: central;
border-radius: 10px 10px 10px 10px;
}
.button-menu:hover {
background: #fbb714;
text-decoration: none;
}
I just want the text to be centered within the button background in the vertical alignment when the menu is in scrolling mode.
Your button has a fixed width and height but the text inside of it is going to drop down into multiple lines as that's a browser default behavior. You could try playing around with
.button-menu{ word-wrap: break-word; }
or maybe also try using a min-width and min-height instead of setting the width and height.
I have a button I need to position at the bottom of the page in the right side.
https://jsfiddle.net/zuk80g6L/
button {
position: fixed;
right: 16px;
bottom: 16px;
}
That button should move further into the screen (like right: 24px if we assume the scrollbar is 8px wide), when the scrollbar is visible. Right now it just pretty much says the total view is 1920 pixels wide. The button should always be 16 pixels from the right side.
I need to take this into account:
Is the scrollbar visible
What's the width of the scrollbar
What if there is a scrollbar, but it isn't changing the site (like on a phone)
It has to be fixed
Basically if there is a scrollbar, move the button further left onto the site.
How is something like that possible? Thanks
Use these solutions to get if scrollbar is presented:
How can I check if a scrollbar is visible?
Detect if a page has a vertical scrollbar?
Based on that trigger the class/css for the button, like
if (hasScrollbar) {
/* Move button right for 8px */
}
In addition, you can get scrollbar width
I have done some modifications on you code.
First I added a div that i used as a container and gave it Id #content
to check if the scroll bar is added to the page check the height of the content div and the window height. if the window height is smaller then the scroll bar is added and we give the button a right 24px;
here is the js script that does the job
var contenth = $("#content").height();
var windowh = $(window).height();
if (contenth>windowh){
$("#bottom_button").css('right','24px');
}
and the updated jsfiddle
P.S it cannot be made without css.
I have a modal popup box on my site, inside the <body> tag.
This is the styling of the popup:
.modalbox {
text-shadow: none;
position: absolute;
padding: 22px;
left: 50%;
background: white;
z-index: 90;
border-radius: 6px;
display: none;
font-size: 14px;
width: 80%;
}
Setting the width is simple. However, the vertical content is dynamic and therein my problem lies - I don't want the box to be taller than the browser window.
I've tried setting max-width: 90%;, and this works if the body of the page is not longer vertically than the browser window.
However, when the body overflows (and scrollbars appear), then the 90% maximum height above is relative to the height of the body, not the window. This means that the modal box can overrun out of the window vertically, forcing the user to scroll the page to see its full content.
What I want to accomplish is for that max height to be 90% of the browser window so that the entire modal box is visible at all times.
I will handle overflow, I just need help figuring out how to restrict the vertical size in the way described above.
Use the viewport-percentage lengths.
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
.modalbox {
max-height: 90vh; }
There isn't a way to do this with html or css as far as I know, you'd have to accomplish this using JQuery:
http://api.jquery.com/height/
// Returns height of browser viewport
$( window ).height();
and then just use whatever 90% of the height value is.
I've added a sidebar tab "Subscribe" (jquery.tabSlideOut.v1.3.js) to my site (visit http://thecasket.co.uk/). Desktop browsers fine, but causes horizontal scrollbar to appear on iPad - and pages start sliding around. The tab has a negative absolute position (-290px, width + padding in my css for the slide-out-div) set in the javascript. On the iPad the scrollbar takes in the width of the slide div.
<div class="slide-out-div">
my subscribe form
</div>
.slide-out-div {
padding: 20px;
width: 250px;
background: rgb(255,255,255);
z-index: 9999;
-webkit-overflow-scrolling
}
I've tried adding: -webkit-overflow-scrolling: touch; but doesn't seem to do anything and I'm not really sure what this would do.
Any help on fixing the scroll, much appreciated.
As you don't define overflow:hidden to any parent container, the mobile devices expands the viewport to the size of the content. You you could go with this approach and set the overflow value or you can use position: fixed instead absolute on the slide-out-div. Both should do the trick.
Also note the text of the <a>-element with text-indent: -99999px; is "content", but I guess it should be "subscribe".
When using a css background such as in the footer on the page below (in the elements div.footer_head and div.footer_footer), if the browser window is resized to less than about 1000px the divs themselves remain at the full width but scrolling right in the browser causes whitespace to appear where the background should be.
I was sure I'd find a similar question on here but can't seem to word it correctly enough to find it in search.
If someone could point me in the right direction I'm sure I can figure this out.
Look at how the divs with class footer_head and footer_footer behave when you resize the browser to be quite thin and scroll to the right.
screenshot http://printanomics.unbranded-nomads.co.uk/picture-2.jpg
You need to add a min-width:1000px to .footer-container.
.footer-container {
float: left;
line-height: 1.5;
margin-top: 20px;
width: 100%;
min-width: 1000px; /* add this */
}
This will mean the smallest width the .footer-container will get is 1000px. Though after that it will expand to 100%.
If you have a look at your css file you will see that the footer width is set to 100% and not 1000px as the other divs. This also applies to your background as your background won't be bigger than the div itself.
I don't know if you use this, but Firebug is a very good Firefox plugin to identify troubles in CSS files.