We're using the timepicker for bootstrap in one of our tools. It's acting differently than how the jQuery Datepicker does when it comes to positioning itself if it overflows outside the browser window.
Datepicker will by default be below the input, and automatically set itself above the input if it doesn't have enough room below, as such:
Timepicker does not, and half the UI is missing outside the browser:
What would be a good way to get timepicker to automatically position itself above the input the same way the datepicker does?
Thanks,
So, without any references to the css, I can't tell you exactly what to do - but I would recommend opening up your developer tools in Chrome or Firefox and trying to readjust the values of the attributes there until u have a desired result.
If you can make an edit to your OP with some source code, or a link to the site that you are developing I could probably be more useful
Related
I have been wondering if timepicker JS really compatible with android apps. It is because whenever i try to scroll the timepicker dropdown to find time like 23.00.00 which is on the bottom part of the dropdown, it's automatically set the time based on my finger position during scrolling and the dropdown gone. Then i need to click the time again and the same thing happen. Simple to say, i can't scroll down and up freely. In chrome yes because there is a mouse for scrolling, but not for android.
Is there a fix for this? I try to find the solution at the documentaries, but can't find something related to it.
My timepicker plugins and docs can be found here http://jonthornton.github.io/jquery-timepicker/
I am having a really weird issue and can't seem to figure out if I'm looking at a javascript or css issue. Here is a jSFiddle for some context of what I am talking about. If you type in the input box and don't see a label popup, delete the text and type it again...weird huh?
I have a form that can be viewed either directly, or in an iFrame. On the inputs, I am using jvfloat.js to give floating labels using the placeholder values.
$(document).ready( function() {
$('input').jvfloat();
});
I get different results across browsers (current releases) and also, oddly enough, when in an iFrame or not.
Chrome
In IFrame:
Typing in text field doesn't popup label. Inspection shows "activeLabel" class added successfully, but it doesn't seem to render. Seems like a CSS transform isn't working to move the label up from behind the input.
Outside IFrame:
Works as expected.
Firefox
In IFrame / Outside IFrame:
Works as expected
I haven't tried it in any other browsers. Every now and then the labels don't work and I can't repeat the problem consistently.
In the jsFiddle, can you see any major problems with the javascript or CSS that would cause this weird behavior?
It's a CSS issue.
You're using display, visibility, and opacity to show/hide your floating placeholder. That's overkill, you only need one! I get opacity, you need it for the effect.
I dropped any use of visibility, and it now works:
http://jsfiddle.net/njjZr/3/
In highstock on the ipad if you have content before the chart and you have to scroll down the page to view the chart, clicking on the date input jumps the page to the top and you can't see the chart, see http://jsbin.com/oyicuc/35
Also, the keyboard opens by default, we're using the jquery ui datepicker in our project and so ideally we would like the keyboard not to open, is this possible? Even better would to be able to use the native iOS datepicker. Don't really want to have to write our own function with custom inputs...
Thanks
It's probably the same issue as https://github.com/highslide-software/highcharts.com/issues/1645, which will be fixed with the next maintenance.
I'm trying to find out how to recreate Chrome's new tab homepage with all it's features.
I've tried plugins like isotope, however I've met a lot problems with sorting using the jQuery sortable class.
I've tried just using good`ol css with floats to create a grid, but it's nowhere close to as good as what Chrome has.
Is there a tutorial out there that covers this?
Any pointers in the right direction would be helpful
If your using chrome it'll be easier to use the inspect element function of the right click context menu. This brings up the developer console showing the elements tab. It should also take you to the meat of the layout straight away, without having to scroll through lots of lines! :)
If you haven't seen the developer tools in chrome before, it's well worth getting into! The elements panel will be of particular use:
https://developers.google.com/chrome-developer-tools/docs/elements
In short, the elements panel will give you a live view of the HTML DOM, including a view of the CSS classes that are present on any given element.
Update
From a quick look at the source myself though, it looks like a lot of it is generated in JavaScript first, i.e. the margins and widths of icons etc are set using JavaScript when you manually resize the page. I pretty sure their layout isn't just pure CSS.
I am developing application using webview in android. i am loading a page into webview and splitting multiple columns dynamically using CSS3 webkit property. once user reach the last page/column i have to show the TOC confirmation dialog. can anyone please advice me how to do that ?
height:600px;
-webkit-column-width:600px;
-webkit-column-count:auto;
How your TOC confirmation dialog is setup?
One possible solution could be to use the :nth-last-of-type(N) selector to select last page/column element http://reference.sitepoint.com/css/pseudoclass-nthlastoftype.
Try putting a small element at the end of the text, and then wait for it to appear on screen. It is easily done using jQuery with jquery-appear.
I forked #visualidiot's jsfiddle to create an example using said techniques. Haven't tested it using jQuery Mobile though.
I put a <span> element at the end of the text. The span is floated right to make sure (most of) the last column is shown. In this example, the <span> is not empty (and highly visible), but it would be better if it was just empty.
The javascript confirm() dialog screws up the scrolling a bit by locking mouse focus on the scroll slider (tested in Chrome 16 on Windows). Showing a confirm dialog in HTML would not.
Since .appear() works for vertical scrolling as well, this degrades nicely when not having -webkit-column-* available (tested using IE9).
Get the total width of your element, and divide it by the width of a single column. Here's an example: http://jsfiddle.net/Ecp9M/