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.
Related
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 an issue with the angular ng-show directive.
I have 2 buttons which are working like a toggle button.
index.html
<button class="btn btn-primary"
ng-show="!isShow"
ng-click="showDeleted()">
Show deleted items
</button>
<button class="btn btn-primary"
ng-show="isShow"
ng-click="showDeleted()">
Hide deleted items
</button>
myController.js
$scope.showDeleted = function(){
$scope.isShow = !$scope.isShow;
};
When i click on the button everything is working fine, but in IE10 I can see the hided button flickering. Here is a plunkr if you need one.
Thank you!
Did you try ng-cloak
https://docs.angularjs.org/api/ng/directive/ngCloak
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display
I think all angular apps (that doesn't use ng-include to load template)
should use ng-cloak to prevent to hide all templates until angular compiles it.
I've the bootstrap4Xpages plugin working.
When displaying a dialog , this renders fine on a pc but bad on an Iphone in vertical position.( look at the example)
The user isn't able to see the left part of the dialog.
I wrapped a div around the dialog control hoping to be able to change the css , but this doesn't seem to work.
The example code :
<div class="modal-dialog">
<xe:dialog id="dialog1" title="TEST on an Iphone">
<xe:dialogContent id="dialogContent1">
test this is a test Modal dialog test
<xp:br></xp:br>
is this working or not that is the question, Not on an Iphone vertically I guess!!!
</xe:dialogContent>
<xe:dialogButtonBar id="dialogButtonBar1">
<xp:button
value="Ok"
id="button3"
themeId="Button.Primary">
<i class="glyphicon glyphicon-ok" />
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="partial"
refreshId="dialog1">
<xp:this.action><![CDATA[#{javascript:getComponent("dialog1").hide()}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
</xe:dialogButtonBar>
</xe:dialog>
</div>
Meanwhile I found this project :
bootstrap-modal
I tried the bootstrap 3 version , the stacked one , which renders fine on all devices, also the Iphone.
I want to make a style on html5 audio player.
<audio id="player" controls="controls">
<source src="song.ogg" type="audio/ogg" />
<!-- using mozilla firefox -->
Your browser does not support HTML5 audio. Please upgrade your browser.
</audio>
Is it possible to put css style on the html5 generic audio player timeline?
-thanks.
The following code, when pasted into Chrome's developer console, reveals a document fragment that describes the audio element's structure:
var aud = document.createElement('audio');
document.querySelector('body').appendChild(aud);
aud.controls = true;
Going to the chrome debugger's elements tab reveals this document fragment:
<div>
<div>
<div>
<input type="button">
<input type="range" precision="float" max="0">
<div style="display: none;">0:00</div>
<div>0:00</div>
<input type="button">
<input type="range" precision="float" max="1" style="display: none;">
<input type="button" style="display: none;">
<input type="button" style="display: none;">
</div>
</div>
</div>
If there was a way to change the style of the time display or the play/pause button without redefining the inner structure(i.e. shadow DOM), it would be through that document fragment. There is neither a function nor an attribute that suggests the ability to access said document fragment.
Youtube does their own HTML5 video timeline in case someone wants to "try something new"(or just hack an easy way to download some of their ad-free WebM videos), so I know it is possible. I'm guessing you would need to do it like this:
<audio id="player" ><!--notice how you get rid of the controls -->
<source src="song.ogg" type="audio/ogg" /> <!-- using mozilla firefox -->
Your browser does not support HTML5 audio. Please upgrade your browser.
</audio>
If you have the audio player hidden, you can add Event Listeners to update the status/progress. You will definitely want to use at least onTimeUpdate
Meanwhile, you can make your own DOM controller with a square tags with border-radius = (width/2) for a circle, or just use a . I suggest you look into the Shadow DOM for a way to hide functionality from both users and other scripts.
If you want to just show the user how far the music has played and not allow the user to seek, use a tag or a tag. Otherwise, you can use an tag and stylize that. Don't forget to add an onInput handler to skip through the track.
edit
I did not see that image. You must have uploaded it while I was answering. I would suggest you use a filter, but that might not work on anything but images. Try making a div transparent over it and allowing the user to click through it
edit #2
It turns out that background-color kinda tints the player in Chrome(only the audio player) depending on the background color, but the play time color does not change color with either background-color or color. You can get full control and uniformity over your style with a custom player, but that would mean extra work for you. I hope that my answers were helpful.
I am using bootstrap 2.0 within my rails app (using the bootstrap-sass gem) and am having trouble getting a submit button aligned with a cancel button.
Here's the code snippet from the form in the html.erb file:
<div class="span3">
<%= f.submit class: "btn btn-primary" %>
<button type="button" class="btn">Cancel</button>
</div>
Here's the HTML it produces:
<input class="btn btn-primary" type="submit" value="Add Person" name="commit">
<button class="btn" type="button">Cancel</button>
And here's what it looks like in firefox 14.0.1. When I look at the
Note: Adding input-append to the div gets me close (see pic below) but is still off a bit--note that cancel is still a bit lower and that the rounded corners on the right side of the add person button are cut off.
How can I get these two buttons to align properly?
Update
I am using Firefox 14.0.1. When I look at the jsfiddle created by #Vestride to duplicate this problem here's what I see:
I am happy with the first result, but when I add the exact same code to my site, I don't get the same result. Instead I get the messed up alignment above. I wonder what this means? Maybe that my CSS for bootstrap is messed up?
Update 7/27
In response to Vestride's latest suggestion, here are the buttons as they show in my Firefox from the fiddle Vestride put together. Note, there's no improvement with changing from input to submit.
I made a jsfiddle http://jsfiddle.net/Vestride/YT3sq but was unable to duplicate your problem. They align perfectly for me (Chrome 21). What browser are you using? In the second example I added a btn-group class to the container element. That might also solve your problem.
Edit:
Try making your <input /> a <button type="submit">. Worked in Firefox for me. I updated the fiddle too.
I know it's an old issue, but using Bootstrap 4 I had the same problem. What solved it for me is adding margin-bottom: 0 or mb-0 class using bootstrap classes on the submit button.