I'm using Kendo Mobile and am testing a modal view out. My goal is to have the height of the modal view auto resize to the contents within it.
Here is what I currently have:
<div id="mPopover" data-role="modalview" style="width: 95%; height: auto;">
<div data-role="content">
<ul data-role="listview">
<li>...</li>
.
.
.
</ul>
</div>
</div>
This works as expected on all the mobile browsers I've tested (Android 2.3 stock browser, Firefox, Dolphin)... except Opera Mobile. I know Opera isn't claimed to be fully supported, but does anyone have a clue as to why the inline height value isn't being respected the same in Opera Mobile? All I see with Opera Mobile is a very thin strip of a modal view.
I am using the latest Kendo UI Mobile, Jquery, and Opera Mobile browser for Android 2.3.
Thank you
Kendo UI Mobile doesn't claim any support of Opera Mobile - many things will be broken there. There are several reasons for this - flexbox (now supported in the latest Opera), the inability to remove the tap outline and the horrible CSS transitions/transforms performance.
Figured out a solid workaround that correctly sizes all modal views using JQuery:
$(window).bind("load", function () {
// kendo rendering fix for windows phone 8 and opera mobile
// correctly sizes all modal views
$("[data-role=\"modalview\"]").each(function() {
$(this).height($(this).height());
});
});
Call this before invoking the modal 'open' call:
$(".km-modalview-wrapper").height('auto');
Also you must set data-stretch="true" to the modalview.
Related
I am using Zurb Foundation 6. My reveal modal works great on the desktop and looks good for mobile devices in Chrome Dev Tools. But once I try it on an actual device, the modal opens off screen. The user has to swipe up to get to the modal. The problem is the user may not know they have to swipe up to get it. Is there any way to make the modal open on top of the content on ios devices. Any assistance is appreciated!
I have tested on iphone 12 and the Chrome dev tools.
Here is the code I have implemented with the css used to try to keep the modal on top.
<h3>Comments, Priority & Position</h3>
<p class='small'>Add or edit comments, priority or positions.</p>
<form action='' method='post'>
<p>Form content goes here</p>
<button class='close-button' data-close aria-label='Close modal' type='button'>
<span aria-hidden='true'>×</span>
</button>
<button type='submit' class='button tiny'>Save</button>
</form>
</div>"; ```
CSS
.reveal.full { top: 0 !important; }
I think I have solved the issue. The problem was I had the button for opening the modal inside a dropdown callout. Moving the button outside of the dropdown callout seems to have fixed the problem. Slightly different look than I was going for but problem solved.
I am working on my website at the moment. And I realized, when looking at the mobile site that one of my images stretches/changes it's aspect ratio. Keep in mind this is only on iPhones. I had a few friends look at the site, and only the people with iPhones had the image stretched like this.
This is the page on the browser
This is the page on my iPhone 11
<div class="col d-flex d-md-flex d-xl-flex justify-content-center align-items-md-center">
<img class="d-xl-flex align-items-xl-center" src="assets/img/headshot.jpg" style="max-width: 90%;">
</div>
I originally had height: auto; in there as well, and when trying to solve this issue I found an older post saying that could be the issue. Sadly it did not resolve it.
I know I can easily solve this problem with media queries, but there must be a reason why this happens only on iPhone. I also only have in body styling on this image, you can see it on the browser preview on the inspector.
If you would like to look at it yourself. The Website URL is https://www.robinalexander.at/about-me
Try to remove the classes d-xl-flex align-items-xl-center from img and give it a display: block. The parent div will keep the img in place
Having problems with react router hash link on mobile.
On desktop its working great but on mobile its giving me an offset that it sometimes over 100vh away from my anchor tag.
This is where the links get set
<AnchorLink
to={`audio-demos/#${anchorTitle}`}
className={`item ${classItem}`}
style={{ backgroundImage: `url(${src})` }}
>
</AnchorLink>
This is where the id is set
return (
<>
<div className="spacer" id={id}></div>
<div className='demo-audio-container' >
<h2 >{title}</h2>
<div className='adverts-container'>
<div className='adverts-left'>
The site im developing is
https://ingrid-voice.netlify.app/
you can recreate the issue by opening devtools in chrome and going on iphone 5 or 7 for example. go to home page and click a link in the portfolio section. This takes you to audio page and an anchor link. On desktop works but on mobile anchor is not at top of screen.
Any ideas?
Thanks
I've managed to do a workaround by removing the animated hero image on mobile. Seems to have fixed the problem on my android but still seeing the problem on iphone 7.
I have designed a website that uses a CSS hamburger menu to activate a slidebar with a links to different webpages on the site.
I also have written an iPhone/andriod apps that need to have an hamburger menu that open a slider work that run swift and android code.
I want to add to the iphone/android hamburger slidebar links to the website (which has it own hamburger menu)
How can I test on the website if it a mobile device or a PC, so I can turn off if "Website" hamburger if its a mobile, since I already have and need the hamburger menu on the mobile.
I have php on the website so I can remove the hamburger menu on the website if its a mobile.
This is the main page
<html>
<div class="w3-sidebar w3-bar-block w3-card-2 w3-animate-left" style="display:none" id="mySidebar">
<button class="w3-bar-item w3-button w3-large" onclick="w3_close()">Home</button>
Link 1
Link 2
Link 3
</div>
<div zclass="w3-main" id="main">
<div class="w3-teal">
<button class="w3-button w3-teal w3-xlarge" onclick="w3_open()">☰</button>
<div class="w3-container">
<h1>My Page</h1>
</div>
Thanks
so there are a few ways of doing this, but a really simple one is something like this:
var width = $(window).width(); //jquery
var width = window.innerWidth; //javascript
if(width > 1000){do large screen width display)
else{handle small screen}
of course 1000 is just an arbitrary number. it gets tricky because when you consider tables, there really are screens of all sizes so its up to you to determine what belongs where
How can I test on the website if it a mobile device or a PC, so I can
turn off if "Website" hamburger if its a mobile,
If I understood you correctly, you could use CSS #media -rules, to setup CSS rules that only apply to smaller devices. Below is a simple code-snippet example of a CSS media-query.
#media (min-width: 700px), handheld
{
.w3-sidebar
{
display: none;
}
}
I have a layout issue in my web page where I have (for example:)
<div style="position:relative;width:500px;min-height:300px;background:red">
<input type="text" style="position:absolute;top:20px;">
<input type="buttton" style="position:absolute;bottom:2px;right:2px">
</div>
The positioning is slightly different in different browsers (say about 2-4 pixels). For example, the above button is a few pixels apart from the border in chrome or safari than firefox, seamonkey and opera. Is there a solution to this problem so that the layout looks almost same in different browsers?
Reset and unify your CSS first.
Checkout http://html5boilerplate.com/ for a good start on this.