I'm having an issue with the Responsive plugin for DataTables (version 1.10.4) which can be seen in the provided image. I'm currently trying to get this to display correctly on phones where the screen is small. The issue happens when the columns become small enough that they cannot be shrunk anymore. Instead of Responsive automatically hiding the column it leaves it visible until most of the column overflows before hiding it.
It seems to ignore the containing div width and instead only cares about the window size. It does work correctly for some tables (the widths just happen to line up correctly so Responsive hides all the correct columns)
I don't 'think' this is a custom CSS issue but I may be wrong. Any ideas on a fix or what I could do to troubleshoot this issue?
Updating DataTables to a newer version is possible but not ideal (lots of tables are using retired plugins and would require a lot of modifications)
Thanks
I finally found my issue. Big thanks to the posts at https://github.com/DataTables/Responsive/issues/20 for pointing me in the right direction.
The version of response I was using was 1.0.2 and the bug appears to have been fixed in 1.0.4.
Ended up upgrading DataTables to the newest version (1.10.4 to 1.10.10) and adding in the newest versions of the two 'retired' plugins TableTools and ColVis which seem to work just fine so I didn't need to do a ton of refactoring.
https://www.datatables.net/download/packages
Related
It appears that the Autoresizing of views is no longer reliably working when building for iOS11 with XCode 9.
The layout of several views end up with the positioning of controls as they are in the XIB, but the appropriate resizing has not happened. This has been working fine in iOS10, and works with our old app running in iOS11. However, rebuilding the app the positioning and sizing fails.
Has something changed that impacts the use of autoresizingmask?
Is there a way to automatically convert from AutoResizing to AutoLayout and Constraints?
Edit:
The controls that are giving trouble are the UINavigationBar and UIToolBar.
I'm working on this same issue today: one thing that has worked in some cases is swapping out for similar (but not identical) mask values. For example, one of our views didn't work with UIViewAutoresizingFlexibleHeight but it works with UIViewAutoresizingFlexibleBottomMargin.
I'm not aware of an automatic way to upgrade to AutoLayout - I actually use AutoLayout a lot in other projects, and the conceptual basis is pretty different...
I'll edit this answer if I find anything better.
Same issue here. As mentioned by #John Nimis playing with masks sometime seems to solve the problem. For example, when we had both top and bottom masks (UIViewAutoresizingFlexibleTopMargin| UIViewAutoresizingFlexibleBottomMargin) we got success removing the Top one.
EDIT
I don't know if this is a definitive solution, but I noticed everywhere the issue happened I had a fixed origin (x or y) on the frame. For example:
view.frame=(view1.frame.origin.x, 150, width, height);
Changing the fixed value in a relative value (for example respect to another view1) solved the issue with masks:
view.frame=(view1.frame.origin.x, view1.frame.origin.y+view1.frame.size.height+20, width, height);
I am having issues getting my Instagram images to display properly. I have tried all types of tricks and changes but cannot get it to look consistent on both desktop and mobile. It looks perfect when at full window size and across all browsers (except mobile), but when I change the size of the browser viewing window it gets all weird.
Here is my issue:
I need all the horizontal Instagram images to be responsive, meaning when I do change the size of the browser window they will adjust to the dimensions that are appropriate to view them properly. I want them to always stay in a row of 5 images across...
Here is a link to the work in progress:
http://www.jaygiroux.com/wordpress/
I have tried modifying the instapress.css to the best of my abilities but now I'm just stuck. I tried using percentages instead of pixels in some places but it's still not working...
What im reading online is that until version 3 nivo slider is not responsive, so you might want to update the library.
http://nivo.dev7studios.com/2012/05/30/the-nivo-slider-is-responsive/
Also i noticed that you're calling the tag twice (the first one is between the ie class compatibility code) so watch out for that too.
I've searched all over for the answer to getting the proper column widths for 16 column bootstrap responsive layouts.
I've found posts that suggest this can be done. But it does not work for me.
I've tried the Bootstrap customize page. But it doesn't update the responsive part at all. I end up with span16 widths that are 120%+
I tried using the less files and updating the variables. But, again, I end up with wrong widths – for 1200px+ screens, I end up with a 1600px-wide layout.
Perhaps I could update all the values for each screen size individually. But since it's not just the span widths but also inputs and other widths for each screen size, it really starts to get unruly. Especially since I'm not 100% certain what the widths are supposed to be, especially when you get to smaller screen sizes.
There must be others who've run into this issue. So, maybe I'm just being obtuse.
But any guidance or wisdom on this issue is greatly appreciated.
Much thanks.
It has been taken care of in the soon to come twitter bootstrap 2.1.0.
At the moment I've got a div which is 1024px wide.
In that box are two CSS3 columns with text flowing automatically from one to the next.
However, I want to restrict the height of these two columns to 700px - once they are full I want 2 more columns with the same height to appear underneath them.
Is this possible?
OK. It is totally possible to achieve what I think you are about to build. However, if you want to do it by yourself, you will need a bit more then just CSS3 styles in place. You will need a fair amount of JavaScript as well.
Take a look at this Columnizer jQuery plugin (it can do the job)
Here's a sample site showing results of it's work: http://welcome.totheinter.net/autocolumn/sample10.html
Update on this:
The Adobe CSS Regions proposal mentioned by gimme5 looks excellent. Unfortunately, according to caniuse.com, there now seems to have very little browser support - it's been removed from current versions of Webkit.
There is a simpler proposal which may do the required job: CSS Multi-column layout (http://www.w3.org/TR/css3-multicol/) which appears to have broader browser support. I haven't tried it yet, but it might work for you without having to pile in a ton of Javascript.
I'm trying to present my notecards in a web app style.
I'm not worried about caching, or making it work offline.
I just want it render well in the iOS browser.
Here's the link: http://kaninepete.com/flashcard/review.php?Sec=3
I want it to look the same as if you re-size your browser window to 320x480.
The problem is, it always renders a huge amount of blank space off to the side.
I want to lock the scrolling to only the vertical axis (like flipping through notecards),
but also have the text at a readable size.
You can use CSS media queries to set your template on a certain width/height model. This works well and can adjust specifically for iPhone screens.
As for the font size issue you'll probably need to just spend time testing. With that it's going to require some type of virtual simulator or a real iPhone where you can test the site. I just loaded it up onto my iPhone 4 and I see what you mean about additional space - this is just because of your page size. Try messing with CSS media queries I think you'll find the answer in there.
Here is a very handy Google search to hopefully get you started on the right track. CSS3 has a lot of new features. Many of them geared towards mobile :)
Reading your question again, here's some suggestions based on what I think you're looking for.
Make sure your document is valid HTML before you continue. Safari on iOS supports HTML 5, so I'd suggest targeting that, unless your platform targets something different already.
If you just want it to run well in iOS Safari, then code for that. If you want it to look similarly in other browsers, however, then it may be necessary to look at styles targeting the iOS device (via width/height). See http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript (It seems hacky, but based on some research a week ago, this still seems to be the suggested route.)
You've got CSS that shouldn't be in there if you want to target multiple browsers. overflow:hidden and set pixel widths.
Generally, I'd say you'll want to tweak your markup as well. List items or headers would be much better than just simple breaks.
Maybe I'm just oversimplifying the question, but it looks to me like all you really need to do is wrap each notecard in a div, perhaps giving each div a <div class="notecard_wrapper">. then just attach a stylesheet that specifies the width and height you want for each card.
This page explains Safari's viewport and how to change it. It will probably fix the font size problem and maybe help with the page size.
Basically, Safari by default simulates a screen that's about 900px wide, when it's actually about 300px (so the page appears zoomed out). This makes pages designed for real computers render properly, but for a web app you usually don't want it to zoom the page at all. The viewport tag should let you control that.