I have developed an interactive table in HTML, CSS and js. It's a simple interactive where students can enter text in textarea and check their answers. The interactive is inserted with inside a course page (in Canvas LMS or Blackboard or Moodle, depending on the course). Everything works fine, except that on Android we can't scroll horizontally to view all the columns of the table (when a large table doesn't fit on screen). It actually works fine on my old Samsung Galaxy 3 but not on newer Android phones.
I know my question and summary of the issue is not quite detailed but I was hoping it's a known issue and you guys have a fix or workaround. Thanks.
You haven't provided any source code to work with, but my best guess is that the table is being clipped.
Try adding table {overflow-x: scroll} in your CSS to provide a horizontal scrollbar when the viewport width is thinner than the table's width.
Related
i have been having problems in wix mobile website version I have a javascript quoter embedded on the desktop version now how do i make that fit in the mobile dimension? any tips on getting that done www.yourfamiliesfirst.com/tq is where it is i have resized the first page of the quoter where you put in your information and what not. i had to scale the image and push it out of the box to fit the screen, problem is when second page after that loads its not proportional to the mobile version and it looks like the page being displayed is greater than the mobile screen. Please help me out as i have no coding skills to be able to code my way out of it but I'm open to suggestions. Thank you for whoever takes the time of reading this and give me a suggestion much love god bless.
Hey #exodus seems like you're running into responsive site issues. Normally you could resolve it by developing with mobile-first in mind by setting #media responsive CSS.
I'm not too familiar with Wix, however I did find this Wix documentation here which guides you through having a mobile-friendly view and layout.
i am working on my website: http://www.antologiaoliveoil.com/ES/index.html
All looking good, however, when I preview this on Iphone, the image called Lataorganica.jpg does not display well on the first time it shows up on vertically, and the slider does not work. Once I rotate the iPhone horizontally, and then back vertically it works fine.
any idea anyone?
Many thanks
Part of the problem you have is that your text is in your image. On an iPhone or other mobile device where the width is very small, all the text is squish into the image because the image is squish into the mobile width.
One way to fix that is to create separate mobile slider image where there is less text and it is easier to read on a mobile. You can use CSS Media Queries to trigger the mobile slider to show if the width is small.
As for your question about the slider, are you using Owl Carousel (http://www.owlcarousel.owlgraphic.com/)? If you are, include the code you are using so we know how to troubleshoot.
Thanks!
He is using owl carousel. I see you are also using bootstrap. Is there a reason you are not using the bootstrap carousel? See here for reference
You have the required files to use the linked solution.
I am making small jquery app. In it i am using DataTables to show some information on a grid. I am having a slight issue with its display on iphone. When i display grid on my chrome or android device it is fine as you can see here i have created JSFIDDLE but on iphone some of it is getting cut off. i keep messing around with css but not able to get a good looking grid. i basically wana reduce the width a little bit so i can fit it on iphone too.Can someone pelase advice.
Here is an example of what is throwing me off
I tried the following
#example_wrapper{
width: 50px;
}
Just as an expirement to see what changes occur and i saw that the width of table got smaller in chrome but in iphone there were no changes.
This is how it looks like on iphone.[i am using iphone simulator for this but i have actual iphone too]
So if someone can please guide me it would be great.I apologize if this is a bad question as my css knowledge is limited.
I have managed to solve this, not sure if the best way but it does what i need so its good. I basically put the table in a div which has a data role equal to content and then i used the zoom in css for that div to zoom out .
<div data-role = "content" id="tbcontent">
//insert table in here
</div>
#tbcontent{
zoom:80%;
}
Here is updated JSFIDDLE.
Cordova 3.3.0, jquery, html, javascript, css
I am creating a mobile application using cordova 3.3.0.
On the second page I need to render a new page (html or url) in the middle of screen with respective to device width.
I need header & footer in fixed position at top & bottom respectively.
Middle part there should be one div or frame in that html or url page should render.
I have tried using iFrame, Cordova's InAppBrowser API both are not working. iframe is not scrollable & its contents are not squeezed. InAPpBrowser opens a new html covering total screen.
Please suggest me any working solution.
Thanks in advance
Use jQueryMobile. http://jquerymobile.com/
It renders pages and has ready-to-work transitions from one page to others. The page definition offers the possibility to have fixed headers and footers. jQueryMobile also offers a wide variety of controls and events suitable for mobile phones.
Be aware that depending on the user group of your software, despite of jQueryMobile you may still encounter the fact that many phones don't behave as expected, especially older phones.
Android phones used to be terrible in rendering transitions, so people came to shut them off or to replace them by simpler ones. Some very old phones had problems because the fixed footer at the bottom appeared suddenly in the middle of the screen or was not put down again after the keyboard disappeared. There will always be such details.
Yet still, jQuerymobile is probably your best option because of the work that has already done for you. Good luck :-)
I'm new to the HTML\CSS\Javascript thing, so please excuse my incompetence. I know for some bits (mainly class modification) I'm not using jQuery, but only because I couldn't get it to work, so I went old-skool.
I have a web page (here: http://dashboards.kantarhealthspain.com/uk/segmentation/Segmentation_v0.4.html) that works just fine in Chrome (and Safari) on my desktop. You click on the massive squares in the middle of the page, and then click on the >> to go to the next 'page'. Eventually you get to the point where it hides\unhides one of 4 segments based on what you've chosen. It's a bit clunky, but it works, which right now is a win...
When I view the same page on an iPad, the layout isn't quite as good, but that's not my problem. When you get to the final question to show\hide the segments, it seems to change the way the whole page is rendered - every element seems to take up so much room.
Debugging on an iPad is very difficult, as I'm using a Windows machine to develop, and the Safari emulator doesn't actually emulate what's going on, as it doesn't break on desktop Safari (for Windows).
I don't even know where to start looking on this - any hints would be much appreciated.
EDIT: Now I've fixed the evil HTML, it looks like when the divs at the bottom are shown\hidden, the height of each div above doubles(?) I've made the background of NavDiv and Breaker fuschia and maroon so they show up, and the double in size. The height is a percentage of the size of the page (I presume) - what's going on there?! Does the percentage recalculate when areas are unhidden?
Thanks
Tom