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.
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 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 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.
This question already has answers here:
Turn off iPhone/Safari input element rounding
(11 answers)
Closed 9 years ago.
I'm using Twitter Bootstrap.
Here's a fiddle with my code. And here's the opened Github Issue
I have implemented a search input with an appended button, per the Bootstrap docs. My HTML for the form is shown here
<form class="form-search text-center" method="get" action="#">
<div class="input-append">
<input type="search" class="span7 search-query" name="q" autocomplete="off" placeholder="SEARCH" tabindex="1">
<button type="submit" class="btn"><i class="icon-search icon-large"></i> </button>
</div>
</form>
For some reason, when viewing the form on mobile (i.e. iPhone 5) the search box appears as displayed in the screenshot below:
When I view the search form in a desktop browser and resize it to "mobile size," the search box appears correctly as shown in this second screenshot (disregard the lighter border and size difference):
--------- QUESTION ---------
How can I prevent the search input from displaying incorrectly as in the first screenshot? And what could be causing this? I've looked at the source and computed styles for both search inputs, and everything appears to be the same. Help?
If I change the input type="search" to type="text" the problem does not exist, so it's got to be somewhere in the CSS, but I can't figure it out. What CSS actually applies this effect?
--------- UPDATE ---------
If I switch <div class="input-append"> to <div class="input-prepend"> the search input displays correctly. Also, when the field has focus, the rounded corner on the right turns "square" and appears correctly.
Looks like you can not. See this link
webkit html5 search inputs
quote:
WebKit has big time restrictions on what you can change on a search input. I would guess the idea is consistency. In Safari particularly, search fields look just like the search box in the upper right of the browser. The following CSS will be ignored in WebKit "no matter what", as in, you can't even fight against it with !important rules.
In others words, Safari will ignore your styles, and apply the standard look.
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.