Is there a way to see the position of the grid with Safari Web Inspector like Firefox do it with grid inspector ?
Stretching the Metrics tab in Inspect Element's Right side pane of Elements tab will display the css box model with padding, border, margin and position.
If you are using Safari version 9.1, you can see it by selecting "Styles - Computed" in the Styles dropown in the Styles drawer on the right of the dev tools. (The Styles section otherwise defaults to "Styles - Visual", so you need to make the selection to make the box visible). Hope this helps.
The question was about grid inspector. There is no grid inspectors in Safari. Although Safari is noted for Safari Responsive Design mode there is no grid inspector in Safari yet.
As of Safari Technology Preview 123 and Safari 15, there is now a CSS Grid inspector.
In the Elements tab you'll find a grid button, if a grid is present.
In the Layout subtab, all grids on the page will be listed at the bottom.
Just to help clarify, the image below shows where the grid overlay can be turned on in Safari's Inspector.
Related
I am struggling with an application using custom elements that is just not working properly in Safari. Here is a screen shot with what Safari is showing v what it is supposed to show in chrome. It was taken on a Macbook Air, although I originally discovered the issue on an iPad.
However this screen shot shows that web inspector does think there is an element there whose foreground color is white and opaque (I set those deliberate) even though nothing is displayed.
So why is Safari not displaying the elements?
For anyone else out there wondering about the same thing. I think I found the answer!
One of the surrounding elements has some css with overflow-y: auto, but without a specific height. I believe what is happening is that safari has shrunk that element to height 0, but that the inspector is still showing where the element would have been, if its not been hidden by a zero length scroll bar, scrolled so that item is below the cutoff area of the scrollable element.
I haven't yet figured out why it works in chrome, my guess is slightly different handling of overflow.
I have used Bootstrap multiselect plugin in a dynamic table.
Somehow in IE11 the dropdown's vertical scroll bar is missing as the picture below.
Note: Mouse scroll up/down is working and Its perfectly fine in other browsers
Any clue? Thanks in advance
I have yet another curious problem with the internet explorer 11.
My application has an embedded font (woff only) used in a button with rounded corners.
When the page first loads in IE11 the button is too small for the text inside. After reloading the page or hover the button it resizes the button correctly.
Now my theory is that IE loads the page and renders it and then loads the font without rendering the page again.
Is there a standard approach to such problems?
I am using a dojo tree widget in the left side pane in OneUi. It shows horizontal scroll bar if the text is bigger than the width of the panel.
Problem is, in some IE instances the horizontal scroll bar is shown on top of the text and not below the text.
Can anybody tell me any workaround to fix this problem (apart from not using IE)
Regards,
Prashant
I am using ExtJS 4.0.7
I have grid on my page. If there is too much data scrollbar automatically comes, in Chrome, Mozilla IE even on Safari as well.
But when I try to access the same application in I-pad , scroll bar are not working.
Note:- Grids reast fetures i.e. pagination etc are working fine. Only scrollbar are not working.
Is there any specific reason for this ?
This is a known problem with Ext 4.0; it uses virtual scroller for grids and it's completely broken on touch devices. Ext JS 4.1 solves this problem and scrolling works on iPads, although scrollbars are not displayed.