I have run into a problems with iPhone default keyboard while using NuxtJS.
It happened when I installed 2 PWA apps to homescreen.
The keyboard was missing (refer my screenshot for example).
Steps to reproduce problems
Installing 2 PWA apps (save them to Home Screen)
Open the 1st app, focus on input fields (my website)
=> keyboard was showing properly
Click to Home button, back to Home Screen
Open the 2nd app, focus on input fields (in this case I used Pinterest)
=> keyboard was missing on this step
It works on Android perfectly...
Sample screenshot
Source code for this problems, FYI
<ValidationProvider :name="$t('authenticate.form_data._email')" vid="email" rules="required|email" v-slot="{ errors }">
<div class="email-input mb-4">
<label for="email" class="block text-gray-400 text-sm mb-1">
{{ $t('authenticate.form_data._email') }}</label>
<input id="email"
class="shadow appearance-none borderrounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
type="text"
:placeholder="$t('authenticate.form_data._email_pl')"
aria-describedby="emailHelp"
v-model="formData.email"
autofocus
#blur="hiddenKeyboard"
ref="inputFocus">
<span class="text-xs text-red-700" id="emailHelp">{{
errors[0]
}}</span>
</div>
</ValidationProvider>
Related
I am using the latest Foundation 6.4.x with the Light YouTube Embeds script by #labnol.
I use this code in a standard html page:
<button data-toggle="animatedModalVideoTest1" class="hollow button expanded alert" href="##">View video</button>
And the corresponding Foundation reveal modal is this part:
<div class="reveal" id="animatedModalVideoTest1" data-reveal data-close-on-click="true" data-animation-in="fade-in" data-animation-out="fade-out">
<button class="button float-right" data-close type="button">
<span aria-hidden="true">×</span> Close modal window
</button>
<div class="responsive-embed">
<div class="youtube-player" data-id="xecEV4dSAXE"></div>
</div>
When I click on "close window", the video keeps playing in the background.
Any js pro who can suggest an idea how to stop this would be much appreciated :-)
PS: The video linked here is safe for work (John Oliver)
Try to use ..this link from zurb-forum:
https://foundation.zurb.com/forum/posts/39375-stop-video-when-closing-a-reveal-modal-with-foundation-6 .. works for me!
Insert data-reset-on-close="true" into your Markup.
Example
<div class="large reveal" id="myvideo" data-reveal data-reset-on-close="true">
<iframe width="560" height="315" src="https://www.youtube.com/embed/xxxyyyzzz?rel=0&showinfo=0" frameborder="0" allowfullscreen=""></iframe>
<button class="close-button close-reveal-modal" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
I am making a facebook like login page. in it im using 2 inline text boxes just like facebook front page. things were going good but automatically the size of both the textbox increases at runtime. i don't know what had happened as i already told you that things were going good
<div class=" form-group form-inline">
<asp:TextBox ID="tbName" runat="server" ForeColor="Black" class="form-control" placeholder="First name"></asp:TextBox>
<asp:TextBox ID="tbSName" runat="server" ForeColor="Black" class="form-control" placeholder="Surname"></asp:TextBox>
<div class="form-group form-inline">
<asp:RequiredFieldValidator ID="rfvName" runat="server" Display="Dynamic" ErrorMessage="* Enter Valid First Name" ForeColor="Red" Style="font-size: small" ControlToValidate="tbName"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="rfvSname" runat="server" Display="Dynamic" ErrorMessage="* Enter Valid Surname" ForeColor="Red" Style="font-size: small; padding:60px;" ControlToValidate="tbSName"></asp:RequiredFieldValidator>
</div>
</div>
also i m using bootstrap to make it responsive and in small screens it's working well but not on large screens
see the image click here to see the image
Please help
your bootstrap css is applied later. when you run the page in browser initially the css is NOT applied but when the css is loaded the textbox sizes increases which is the correct style of the selected class in bootstrap css. Try using ur inspect element of browser and remove the class attribute, you will get back ur initially loaded textboxes style
I was using ionic for a project but been not much satisfied with the UX for iOS. I mean how can I add this tabs (see picture) instead of the basic tab ionic comes with when you create a tab project ?
enter image description here
You can use the <ion-nav-buttons class="button-bar"></ion-nav-buttons> directive to add buttons for every tab mentioned in your screenshot.
<ion-nav-buttons class="button-bar" side="left">
<a class="button"
ui-sref-active-eq="active"
ui-sref="path1">
Label 1
</a>
<a class="button"
ui-sref-active-eq="active"
ui-sref="path2">
Label 2
</a>
<a class="button"
ui-sref-active-eq="active"
ui-sref="path3">
Label 3
</a>
</ion-nav-buttons>
The ui-sref along with ui-sref-active directive makes sure that the tab with the active state is in focus
This is really bugging me. I am using the Chrome Ripple Emulator to test my mobile app. And I can not change the value of the slider by sliding the button when using Ripple. If I disable Ripple I can slide the slider. Has anyone experienced this?
<div class="ui-block-b">
<div class="ui-bar ui-bar-c" style="height: 78px">
<input type="range" name="slider-2" id="slider-2" data-highlight="true" min="0" max="100" value="50" data-mini="true" />
</div>
</div>
I'm pretty new to JQuery Mobile (using v1.3.1) and I'm not sure what I'm doing wrong here. I have a field-contain div with a label and a text/search input in it. When I resize the window the following happens:
First the searchbox jumps onto a new line (I could live with that), but then when I resize it further, it eventually gets taller and covers the label (I obviously cannot live with that :P ).
Here's the code:
<div data-role="fieldcontain">
<label for="city-location">Location:</label>
<input type="search" name="location" id="CheckCityNameInput" value="" data-mini="true" data-inline="true" />
</div>
<input type="button" data-inline="true" data-icon="search" data-iconpos="left" value="Locate city" data-mini="true"/>
This happens with Chrome and Firefox (I didn't test other browsers). Any idea what I'm doing wrong here?
Also when I resize it to the max, a "line" appears between the text input and the button... any idea why?
Damn, it was a conflicting CSS rules on the labels. Good to know that a float:left rule on a label would have this effect though.
Thanks for your help Gajotres.