ive got a next project with tailwind css. however a part of the css goes to hell during deployment, but locally its fine in Safari, in a mobile device. since i dont have an iphone i use an online emulator to simulate the error. the image below is what it looks like when deployed
however when i run it locally, as in i run localhost:3000 on the emulator. everything looks fine like so
Also, since this emulator allows me access to dev tools for which i used inspect. when i tried to turn off and on the flex css (you know when you open inspect, u see all the css styles and a checkbox to turn on or off that css). the display is perfect again! is this a bug or am i missing something?
the code i have above is a carousel and here is the code as follows, where the images i used a map function to display.
<div
className="flex flex-row snap-mandatory overflow-y-hidden !overflow-x-hidden scroll-smooth bg-black snap-x indiana-scroll-container indiana-scroll-container--hidescrollbars indiana-scroll-container--native-scroll"
// onScroll={(e)=>console.log(e.target.scrollLeft)}
ref={elementRef}
>
{
props.images.map(function(item){
return <div className="w-full flex-shrink-0 transform cursor-grab snap-center">
<Image
src={item}
width={100}
height={500}
className="w-[100%] sm:object-fill sm:w-full md:max-h-[350px] sm:max-h-[300px] lg:max-h-[450px] xl:max-h-[500px]"
unoptimized={true}
/>
</div>
})
}
</div>
i dont know whats wrong. everything works fine in chrome, but not in safari. and the part where turning on and off the flex manually fixes the display makes me think that my code isnt whats wrong.
Related
I have a web application using angularjs and material-design.
I use md-dialog for adding and editing certain records from the database. This is responsive and works as expected on my desktop for all browsers except IE (no great surprise). This is how it is supposed to look.
However, if I run the application in safari on a Mac, or any browser on iOS (including chrome), the dialog appears to be missing the contents (has no height).
While IE doesn't have exactly the same issue, it does appear to be similar. So, I believe it is an issue with how iOS renders the flex attributes. However, I am not sure and don't know how to confirm on my iPad.
My search so far has not provided any working solutions to this issue, but I have seen others ask the same question (though not through stack).
What causes this issue?
How do I fix it for an iPad?
UPDATE
This is how the dialog is rendered in the html:
<md-dialog-content class="flex" id="dialogContent_140" flex>
<form name="workerDialog" class="md-dialog-content ng-pristine ng-invalid-required ng-valid-mindate ng-valid-maxdate nd-valid-filtered ng-valid-valid ng-valid-minlength ng-valid-maxlength ng-valid-pattern ng-valid-unique" style>
...
</form>
</md-dialog-content>
If I modify the element and remove flex like this:
<md-dialog-content class="flex" id="dialogContent_140">
The body content appears as expected (at least on the MAC).
I can also modify the css in angular-material.min.css and remove -webkit-flex, -ms-flex, flex and achieve the same results.
[flex]{
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
box-sizing: border-box;
}
I can't completely kill flex for the rest of the application, but I have to allow this to work on an iPad.
I found the cause of my issues. Thanks to #Tran Khanh Nguyen for moving me in the right direction.
When the dialog was defined, someone added <md-dialog-content flex>. I removed flex and it fixed the issue on all devices.
For more information, with some special browser (e.g. IE, IOS browser...) we should consider to add the value for flex, like flex="auto" or flex="100", it will help anuglar-material would fine on these browsers.
I have a small extension im making for Umbraco, but i have run into an annoying problem. I have a small website i need to show in my backend of Umbraco. So i make my new section, and my new tree. Then in the edit.html file i simply insert the url to my website on my localhost. Everything works as expected, besides from the native spinner in umbraco wont stop spinning.
<div ng-controller="Netbase.Controller">
<div>
<h2>{{Title}}</h2>
<iframe src="http://localhost:64254/" id="contentPage" style="margin-left:15px;margin-right:15px" width="100%" height="100%" />
</div>
</div>
However, if i remove my iframe, everything works fine and the spinner is gone. It is umbraco that is showing the spinner.
My Angular controller is empty besides for me setting a title (that works fine).
I realize this is an old question, but maybe this will help someone else. The loading graphic is a background applied to all iframes by the Umbraco CSS. Here's how I handled it.
In the HTML for the iframe include the following attribute:
data-ng-init="iframeLoaded()"
Then in your controller:
$scope.iframeLoaded = function() {
$('#contentPage').css('background', 'none');
};
I copied the navbar default sample from from the samples but without any changes it appears to be doing what I think is mobile format. The only thing I see is the brand tag to the left and the button to the right. My monitor is pretty big so it can handle the menu and it does when I view it online which you can visually see here. I can only assume that since I cut and paste from the demo code I have a setting somewhere else that is wrong but I have no idea where to look. I did make sure to run nuget and get the latest version of the code so I should match what is on the demo. Any ideas?
Update
The issue appears to be with VS2012 and debug mode. Using Visual Studio Development Server seems to be the problem. If I publish locally it works as expected. I thought it might be IE8 but realized it was VS2012 after I published the site.
Is there a way to work around this while using the debugger in VS2012?
Update 2
And somehow it is not working in IE8 again even after being published. Chrome seems to work fine. Must be something picky about IE8 that I need to code around.
Try to copy all the page html, then if it works cut unnecessary code.
Use this instead of your local bootstrap:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Looks like this was an issue with IE8 all along. I didn't think it was a browser issue so I never looked for IE8 nav problems but here is a link that documents the issue.
I have an issue with a certain page in JQM that does not load when accessed by a link but will load. The page it is calling has some google chart libraries added which seem to be causing the non-loading issue. This problem can be sorted if ajax is disabled using the data-ajax="false" command.
Trouble is, when that link is then clicked on when we add the HTML5 as a native app on the iPad, it closes the app and opens safari to display the link.
How is this behavior disabled?
Code is below.
<div data-role="page" data-theme="a">
<div data-role="content" class="ui-grid-b my-breakpoint" align="center">
<div class="ui-block-a">
<img class="icons" border=0 alt="Storage Monitoring" src="Images/Fridge Icon.png">
</div>
Don't use data-ajax="false"... It will open in safari because without ajax it's the same as saying the link they click is external (rel="external"). What you need to do is figure out why it's not working without data-ajax="false".
I assume this has to do with one of the many common scripting errors seen with developers using JQM. Most people think they can use JQM with their current web development knowledge without reading the documentation, and this is a big mistake. Not necessarily saying you are, but it's all too common.
The first thing you need to do is post an example and tell us why it's not working. You also can't expect everything to magically work with JQM, are these charts supported? If not, you may have to tweak it to work properly.
This is a really weird issue. I've first read the answer from Maayan Glikser on this question which looked similar : Uploadify inside Jquery UI Dialog => Chrome & Opera bugs
It didn't work at all. Let me explain my problem.
I have 3 different Uplodify (Flash version) controls on my website (not on the same pages), only one of them doesn't work and it's the one that is inside a JQuery UI Dialog. Basically, the button is visible but not clickable. The problem occurs only for this particular control, the others behave normally.
So I tried adjusting the z-index inside the javascript, it didn't change anything. Then I tried adding manually (through firebug's "edit html" feature) a <br /> at the beginning of the container generated by uploadify and bam, the button became clickable
I then tried adding the <br /> on page load with $("#fmuploader").prepend('<br />') and nothing happened, the line break was added but the button wasn't clickable. When I added manually a blank space it became clickable again.
I believe there is some kind of paint event that gets triggered when you manually edit the page from firebug which makes the button suddenly become clickable, but I'm really wondering if I can make it finally work as intended without asking all my firefox-using visitors to install firebug :)
It is really hard to explain so I have setup a small test page at this address : deleted (edit: the test page is now offline on the production environment and is no longer reachable)
This reproduces exactly the problem I have.
Load the page, click the link to open the popup, open firebug, find the uploader's container <div id="fmuploader" class="uploadify" style="height: 30px; width: 120px;"> and just add a blank space after the opening tag. The button becomes clickable.
The problem occurs on Firefox 17 with no add-ons except firebug and Flash 11. The problem does not occur on IE 7/8/9 and Chrome on the same machine.
Update: I tested it with Firefox 15 and wasn't able to reproduce the bug.
I had a similar issue, but found that updating Firebug to version 1.11 sorted it.
It was only seemed to be the issue in verstion 1.10.
Looks like a change in the Firefox 17 security model means that minified version of jQuery breaks when using Firebug. Plenty of jQuery based stuff has stopped working for me in Firefox 17 unless I disable Firebug.
https://blog.mozilla.org/addons/2012/08/20/exposing-objects-to-content-safely/
https://developer.mozilla.org/en-US/docs/XPConnect_wrappers