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.
Related
I have kind of a weird problem in my website, but which seems to be a problem of the UI library I'm using.
Every time I click a select element in my page the background is slightly changing, in width, which flickers the background image.
At first I though this is a problem in my code, but after checking, I see that in the UI library docs it also happens.
Example:
My site : https://dinsangun.github.io/crypto-converter/
The lib docs: https://mui.com/components/selects/
(In the lib docs, when you click a select element, pay attention to the slider on the right side, it disappears when the dropdown menu of the select items is clicked)
Is there a way to overcome this little bug?
Thanks.
Your problem comes from the scrollbar, when you click on the select it dissapears and so the background extends to cover all the screen.
It's the same problem for MUI website.
One of the solution I can propose would be to put on your body or root div height:100vh;overflow:hidden;
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/
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
I am using the gem Bootstrap3-datetimepicker-rails (found here: https://github.com/TrevorS/bootstrap3-datetimepicker-rails), along with Bootstrap 3 on rails 3.2.
I happened to have my datetime field at the very bottom of a page. When I click on the calendar icon, part of the calendar widget shows, the rest is clipped and scrolling down the page is needed (the page's vertical scrollbar shows). However, to grab the page vertical scroll bar, the calendar is hidden since it lost its focus.
Any suggestions on how I may resolve this?
Thank you.
I ended up adding margin-bottom to the last div in my page, so that there is always some space to accommodate the calendar when it unfolds. I think that's the easiest way to get around this for now.
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/