in my site I have a responsive table, it is work fine on all browsers on Desktop (windows and Linux), but when I open the page with android chrome (and also ios browser) vertical scroll work just fine, but horizontal is messed up,
it works on last three rows of my table,
it doesn't work on upper rows of table
if I scroll down to see more rows, the problem still exist
I find one more interesting things, when I'm on the page, and horizontal scroll doesn't work well, and I open the setting of browser and closed it, after this horizontal scroll work fine on all rows.
address of the page:
http://yellowpart.ir/?product_cat=%D8%B4%D8%A7%D8%B3%DB%8C-%D9%BE%D8%A7%DB%8C%DB%8C%D9%86&product_list=149
It was because of "top" attribute, my table css was:
table {
top: 70vh;
}
and it worked fine on pc, but somehow on android chrome, although I did scroll page and table to bottom of it but the table in first 70% of screen's height didn't worked, so I changed the code to :
table{
padding-top: 70vh;
}
and it start to work fine on both desktop and android chrome.
Related
Problem: I developed a single page website with Reactjs and deployed it to Heroku (It is a remake of an existing website. I want to include it as a part of my portfolio for entry-level web dev job). When inspecting on Chrome Toggle device toolbar, the responsive website worked fine in stimulated mobile and ipad. When opening the site in my iPhone7 Plus, it also worked fine. But when opening in a real iPad, several section elements did not position as expected - they overlapped.
The affected elements are child elements of a container element which has CSS style overflow: auto. display: flex, flex-direction: column. The effect I want to achieve is that all the main contents (except navigation menu, footer and sidebar) are included in a scroll-able container.
Screenshot of the website in ipad browser
I spent some time trying to search for answer on the Internet but did not get any luck.
Question: How to make the responsive website works properly in iPad devices?
After multiple trials and searches on Stackoverflow, I finally found out the solution.
I came across a stackoverflow question and noticed the similarity of my problem. In the case of my project, the container element's styles include overflow: auto, display: flex, flex-direction: column. For some reason (I still do not understand the theory behind this), when the web app is opened in an iPad browser, the container's child elements (flex items) shrink automatically. That is why child elements overlapped with each other. To solve this, I set CSS style flex-shrink: 0 for each child element. Now the app works properly in iPad.
The link to the other stackoverflow question is as follows:
flex items overlapping in Safari (iPad)
So I really hate the way chrome extension development works so I decided to make a regular webapp and use an iframe in my extension. Everything works fine, except for the dimensions of the website and the scrolling on the extension/site.
When developing the site, I knew I was going to use an iframe so I used percentages when formatting the site, for the most part I used 100% on most divs and textboxes. Anyway, the problem I am facing is that the scroll is extremely wonky on the extension for instance this is a picture of my extension with 400px height:
400x400. Everything looks fine.
and here is my extension with 800px height:
400x800. Scroll appears.
Why is the scroll appearing if I am merely making the extension longer? It doesn't make sense to me.
Any idea why this is happening?
There is a limit on the size of the popup window. I don't know the exact dimensions though.
You cannot increase the size of the document past it, scroll will appear.
I have a web app in PhoneGap with a width and height of 100%, and it fills the whole page, but when I input or try to input a value(numeric) into a <input> field, a 2-3px wide margin appears on the top and to the right of the page. I even tried changing the margin of the body to -3px on all sides after, but still the white gap stays, it appears so far only in Android 2.2 and 2.3. Is it a bug, or am I the only one to have this issue?
I have encountered this error on the app I'm working on. I am convinced this is a bug on Android 2.2 and above. I tried several possible solutions and found one that works. Unfortunately, I don't know why it works. It consists of three parts.
In the css file, I inserted the following:
#offset_wrapper {
position: absolute;
top: -20px;
}
Each time the app navigates to a page that contains elements with fixed position, we inserted the following code snippet:
$("div#main_container").append("<div id='offset_wrapper'>" + window.pageXOffset + "</div>");
Subsequently, every time the app navigates from these pages, the code below is applied.
$("#offset_wrapper").remove();
It had to do with fixed position headers and footers. When navigating to the page where the inputs are, I changed the position css attribute for the header and footer to other than fixed and the body position to default(css('position', '')) in jQuery. When navigationg to the page where fixed position is needed I just changed it back.
Old I know, but I fixed this or very similar issue in my phonegap application by specifying not the left:0 on my fixed elements. Generally I kept only top or bottom specified for my 100% width fixed navigation header and footer elements.
When the keyboard flew out, about 5 pixels of margin would appear. Adding left:0 stopped this from occurring for me.
I am using an MVC 3 razor grid with version 2011.2.712.340 of the Telerik extensions.
I have an Edit command button in my html for the grid. The edit button shows up in Chrome & Firefox, but not Internet Explorer with the same exact code base.
Would someone be able to tell me what I need to do in order to get it to display in IE?
Actually, in additon to the Button not showing up, the data for the record is shifted over starting in the Command column....
Also, this only happens in IE9. If i put the browser in IE9 compatability mode or IE8 or IE7, the page renders fine.
What do I need to do for it to render properly using IE9?
It might be related to Hidden Columns in Telerik, have a look at this post for the workaround:
http://www.macaalay.com/2011/09/29/telerik-mvc-grid-workaround-for-not-rendering-properly-in-internet-explorer/
Our website www.phototulip.com displays fine in Safari and Firefox but not in IE7.
The main content seems to display on the bottom right hand side and the nav bar shifts slightly to the left. I've tried to adjust sidebar and content widths but with no success.
I was wondering if anyone could help.
You have a few places where your markup is invalid (one or more <div> tags aren't closed properly) that could, potentially affect the layout. FireFox tends to be a bit more forgiving about that sort of thing than IE.
Other things to check are that your content area & sidebar have explicit widths set and that they aren't too wide for the container they're in.