It seems like some versions of the default android Browser have a rendering issue. If I create a page where I have some sort of input field and a button, when I disable the other input field, the button appears grayed out (unless this is done on page load, you have to click around / zoom for a bit to get the browser to re-render).
The interesting thing is, it does not apply the disabled STYLE to the button, but simply grays it out. Here is a sample.
Link to editor jsfiddle
Link to embedded jsfiddle
CSS:
ul { list-style-type:none; }
.xxx {
background: blue;
color: white;
}
.xxx:disabled { background-color: red; }
HTML:
<div id="root">
<ul>
<li>
<input name="x" id="enable" class="x" type="radio">Enable</input>
</li>
<li>
<input name="x" id="disable" class="x" type="radio">Disable</input>
</li>
</ul>
<input type="button" class="xxx" value="Button"></input>
</div>
JS:
$(function() {
$('.x:eq(0)').prop('disabled', true);
});
Things to note:
The button is NOT disabled. Click on it and it temporarily gets un-grayed-out.
There is a style for the button's disabled state that sets its background color to red (if you disable the button, you will see this work), but the button does not appear red in the example, so it's not even just rendering the disabled style. It seems to mainly just set the opacity to a lower value
A button BEFORE the radio buttons will not be affected. http://jsfiddle.net/YVFVZ/4/
Any ideas how to work around this?
I finally figured it out. I'm not really happy with this solution, but it seems to work.
If you wrap the inputs in a position: relative element, it fixes the problem.
Try using this DOM
<div id="root">
<ul>
<li>
<input name="x" id="enable" class="x" type="radio" />Enable
</li>
<li>
<input name="x" id="disable" class="x" type="radio" />Disable
</li>
</ul>
<input type="button" class="xxx" value="Button" />
</div>
and also js as
$(function() {
$('.x:eq(0)').prop('disabled', 'disabled');
});
May be this could help.
Let's clean up some of that HTML!
Have a fiddle - Fiddle Link!
Put in some proper labels
Remove the closing </input> tags which are invalid HTML. Let's self close them to make them pretty (even though this is not required unless you are using XHTML).
Remove the <ul> which seems superfluous when we can use a little sprinkle of CSS to position your form elements.
Rename those classes to something more relevant!
HTML
<div id="root">
<input name="buttonState" id="enable" class="action" type="radio" />
<label for="enable">Enable</label>
<input name="buttonState" id="disable" class="action" type="radio" />
<label for="disable">Disable</label>
<input type="button" class="button" value="Button" />
</div>
jQuery
So you want to enable the button when the enable radio button is clicked and disable when the disable radio button is clicked? Here:
$('#disable').click(function () {
$('.button').attr('disabled', true);
});
$('#enable').click(function () {
$('.button').attr('disabled', false);
});
Finally, the CSS.
.action {
display: block;
float: left;
clear: left;
margin: 0 10px;
}
label {
display: block;
margin: 10px 0;
}
.button {
background: #00F;
margin: 0 10px 10px 10px;
}
.button:disabled {
background: #F00;
}
input, label {
cursor: pointer;
}
Lovely :)
Related
When user is clicking on input field to put email or password my footer is coming up on the fields .
<div class=" bar bar-footer myfooter ">
<p class="login-p">Don't have an account?
<b class="forgot-details-link">
<a ng-href="#/signup" ng-click="reload('signup')">Sign Up</a>
</b>
</p>
</div>
Css
.myfooter{
background-color: transparent;
display: block;
position: fixed;
background: rgba(250, 250, 250, 0.07);
border-top: solid 1px rgba(250,250,250,0.30)
}
What I want to know is because it occupies the directives ionic delivery for you, for example in the documentation is clearly the footer in question.
<ion-content class="has-footer">
Some content!
</ion-content>
<ion-footer-bar align-title="left" class="bar-assertive">
<div class="buttons">
<button class="button">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons" ng-click="doSomething()">
<button class="button">Right Button</button>
</div>
</ion-footer-bar>
If you take this structure, combined with its css, you should not have display problems. Also I suggest that modifications of these classes and added to the framework, only modify colors, text sizes, fonts, etc, since they are ready to run correctly. This is only if you occupy these directives.
just add scroll="false" to your <ion-content scroll="false">
and also please check in controller to add this :
cordova.plugins.Keyboard.disableScroll(true);
I am trying to create a mobile-only site using ASP.NET MVC and Bootstrap. I've created a form, part of which appears below.
<form action="/Client/InitializeProgram" class="form-horizontal" method="post" role="form">
<div class="wizard-step">
<h4>General Information</h4>
<div class="form-group">
<label class="col-md-2 control-label" for="DateOfBirth">Date of Birth</label>
<div class="col-md-10">
<input Placeholder="MM/DD/YYYY" class="form-control" data-val="true" data-val-date="The field Date of Birth must be a date." data-val-required="Date of birth is required" id="DateOfBirth" name="DateOfBirth" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="DateOfBirth" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="Gender">Gender</label>
<div class="col-md-10">
<div class="radio">
<input checked="" id="Gender_0" name="Gender" type="radio" value="0"></input>
<label for="Gender_0">Male</label>
</div>
<div class="radio">
<input id="Gender_1" name="Gender" type="radio" value="1"></input>
<label for="Gender_1">Female</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Height</label>
<div class="col-md-10">
<input Placeholder="Feet" class="form-control" data-val="true" data-val-number="The field HeightFeet must be a number." data-val-required="The height feet is required" id="HeightFeet" name="HeightFeet" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="HeightFeet" data-valmsg-replace="true"></span>
<input Placeholder="Inches" class="form-control" data-val="true" data-val-number="The field HeightInches must be a number." data-val-required="The height inches is required" id="HeightInches" name="HeightInches" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="HeightInches" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</form>
I'm using my Android phone for testing and have noticed something strange. When the page with my form is fist loaded, everything fits within my phone's display, exactly as expected.
But when I click in one of the text boxes, it appears to zoom in slightly, making my page content a little wider than my phone. So a small portion of the page is not visible unless I scroll horizontally.
If I rotate my phone into landscape orientation, the display is wider. However, it appears that phone zooms again so that the page is again a little too wide for the display (by about the same percent).
I can't tell what's going on and am having trouble finding anything on this. Has anyone here seen this? Can anyone explain what's happening? My preference is to format my page so that it fits within my device's display.
EDIT
If it makes any difference, I have the following in <head> section of my page.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Also, I have the following CSS on this page. It was provided by someone else who was helping me to get my tables to fit within the phone screen.
body {
padding-top: 50px;
padding-bottom: 20px;
}
/*
Re-enable word wrapping in table cells.
Can we simplify with .table-responsive > .table th, .table-responsive > .table td ?
*/
#media screen and (max-width: 767px) {
.table-responsive>.table>thead>tr>th,
.table-responsive>.table>tbody>tr>th,
.table-responsive>.table>tfoot>tr>th,
.table-responsive>.table>thead>tr>td,
.table-responsive>.table>tbody>tr>td,
.table-responsive>.table>tfoot>tr>td {
white-space: normal;
}
}
It happens on Iphones too, not sure if it is the same cause on Android but setting the font-size to 16px on every control seems to stop the auto zooming effect on Iphone.
Here is the css to set font-size on every control:
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
font-size: 16px !important;
}
I'm trying to create a menu that collapses into a button when the page is viewed on a phone. I'm using bootstrap, but for this navigation, I wanted to design the nav differently, so I made my own.
The button does not become visible when the media changes to phone, but the navigation does disappear. How do I make the button appear when the media size changes?
I've tried many things, and this is what I have right now:
HTML:
<div class="pattern col-lg-12 col-md-12 col-sm-6">
<div class="banner col-lg-3 col-md-3 col-sm-2">
<img src="img/logo4.png">
</div>
<!-- menu -->
<div class="navbar-header">
<button class="mnav-toggle" type="button" id="mnav-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="mnav col-lg-9 col-med-9 col-sm-4" id="navbar-main">
<ul class="mnav-list" id="mnav-list">
<li class="mnav-item">Contact</li>
<li class="mnav-item">About</li>
<li class="mnav-item">Artists</li>
<li class="mnav-item">Studios</li>
<li class="mnav-item">Gear</li>
</ul>
</div>
</div>
CSS:
#media (max-width: 767px)
{
.mnav-list {display: none;}
}
#mnav-toggle
{
display: none;
}
from what I can see you need to first add the "display:block" into your query as stated in comment above and secondly the media query should be placed UNDER your baseline css rules like this:
Working Example
#mnav-toggle
{
width:20px; height:50px;
background:red;
display: none;
}
#media all and (max-width: 767px)
{
.mnav-list {display: none;}
#mnav-toggle{ display: block;}
}
This is because css rules that are written later gets precedence over the rules written earlier for the same element.
I am building an android app using phonegap.The problem is that when i click on input box the top div moves to the right a little bit.
HTML:
<div id="top">
<img src="icon-menu.svg" width="40" height="41"
onerror="this.onerror=null; this.src='icon-menux.png' ; this.height='35' ;" class="show a">
<a href="index.html">
<img src="home.png" width="50" height="41" id="home" >
</a>
</div>
<input id="filter" placeholder="Enter game title" type="text"/>
CSS:
#filter{width:100%;
height:35px;
font-size:20px;
background-color:#F2F2F2;
color:#FF3300;
text-align:center;
z-index:20;
margin-top:70px;
positon:absolute;
}
#top{background-color:#434343;
border-bottom:5PX SOLID #888888;
height:50px;
width:100%;
position:fixed;
z-index:50;
display:block;
float:left;
}
Update:I found out the source of the problem.It does not happen when I remove this code
<meta name="viewport" content="width=device-width, user-scalable=0">
But the problem is that when I remove this tag the top div moves up when I scroll which should not happen since I already specified z index and position fixed.
I am unable to post image since i dont have enough reputation.Srry
I had a similar problem which someone was kind enough to answer, I think the same might apply to you!
That is because ChromeView adds a border to a focused element and it sounds like it's pushing everything else around.
Add this to the top of your css file to tell the browser to stop highlighting fields when they're focused;
* { outline: none !important; }
So, i'm scratching my head here in frustration at the android browser! Android version 2.3.6.
What is wrong with this thing? The next and before(perhaps previous) buttons
do not work! ...on some basic jquery form fields.
Having:
<div data-role="page">
<div data-role="header">
<img src="img/logo.png" style="margin-top:15px;">
</div>
<div data-role="content">
<form action="#" method="get">
<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</div>
<div data-role="fieldcontain">
<label for="textarea">Textarea:</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>
</form>
</div>
</div>
But... if I remove data-role="header" the damn thing start working??!!
No problem of course on the Safari browser! Which is superb as usual.
Please can somebody help me?
My understanding is that if you want to add a back button you need to add a data-add-back-btn="true" to your page div. I don't see that in your example. OTOH, the hardware back button should work as well.
What is it that doesn't work?
So, after many hours... i noticed stuff in my css was breaking this functionality...
/*article, aside, details, figcaption, figure, footer, header, hgroup, nav,
section { display: block; } audio, canvas, video { display: inline-block;
*display: inline; *zoom: 1; } audio:not([controls]) { display: none; }
[hidden] { display: none; } html { font-size: 100%; overflow-y: scroll;
-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }*/
Removed above and it worked.
Not sure, might be the boilerplate used.