I have created a website using the bootstrap framework. On this website, I'm using the date-time picker and on a standard monitor, everything looks normal. Now, when viewing the same page on a mobile (Android or Iphone), it seems the date-picker lacks columns - for example, I'm lacking Wednesday and Thursday - Anyone experienced the same issue ?
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<label>Duik datum : </label>
<input name="date_picker" id="datepicker" value="<?php echo(date("d-m-Y", time())); ?>" readonly>
</div>
</div>
Related
Any suggestion on how to check why I get this black box instead of standard bootstrap dropdown? I know, may sound like stupid question, but bear this me...
I checked, there are no referenced css files that could break this functionality. The problem is that I can't right-click on that black box and select "Inspect" to see generated code, the black box disappears once I click on it (right or left). Similarly I cant use Chrome Dev Tools to inspect that element, it disappears.
Generated HTML code:
<form method="post" ng-submit="vm.executeAction('ReAssignWorkOrder')" class="ng-pristine ng-valid">
<div class="form-group">
<label>Service Provider</label>
<input type="text" class="form-control ng-pristine ng-untouched ng-valid ng-not-empty" ng-model="vm.data.ServiceProvider" disabled="">
</div>
<div class="form-group">
<label>Re-Assign To</label>
<select class="form-control">
<option value="Someone1">Someone1</option>
<option value="Someone2">Someone2</option>
<option value="Someone3">Someone3</option>
</select>
</div>
<div class="form-group">
<label>Progress Note</label>
<textarea class="form-control ng-pristine ng-untouched ng-valid ng-empty" rows="4" ng-model="vm.woReAssign.ProgressNote"></textarea>
</div>
<button type="submit" class="btn btn-primary pull-left">Re-Assign</button>
<button type="submit" class="btn btn-primary pull-right">Re-Assign and Dispatch</button>
</form>
Same thing happens with html input date field:
UPDATE: Whoever voted to close the question - I dont understand the reason, dont you want other people to know it was Chrome bug ??
You are using chrome responsive view. some time chrome responsive view caused this king of problems . just exit the responsive view and resize chrome window. and you will not get this black box. there is not issue on your code.
I am seeing an issue when viewing a website in IE8 (but which works fine when using the emulation mode in dev tools in IE 11).
In modern browsers I see what I would expect:
But in IE, I see the following:
I've added the html5 shim and respond,.js as suggested in the docs, and I've tried wrapping the controls in divs to manually size them, but I end up with gaps between the inputs that look pretty bad. Is there something obvious that I'm doing wrong here?
<form class="form-horizontal" role="form" style="max-width: 500px">
...
<div class="form-group">
<label class="control-label col-sm-2">Phone</label>
<div class="input-group">
<span class="input-group-addon">
<input type="radio" name="SearchMethod" value="2" class="radio-inline" />
</span>
<input type="text" id="phone" class="form-control" placeholder="Phone" />
<input type="text" id="phoneExt" class="form-control" maxlength="4" placeholder="Ext" />
</div>
</div>
Your input group is invalid since it has two text input form-controls. Per the docs:
Basic example
Place one add-on or button on either side of an input. You may also place one on both sides of an input.
We do not support multiple add-ons on a single side.
We do not support multiple form-controls in a single input group.
So you'll need to either hack together some custom styles, or restructure your form.
How do I make a VoiceOver on Mac read the aria-label (or another aria- attributes) with no conflict with tabindex?
I am trying to provide some accessibility stuff to a search result page with the structure like this
<div class="header">
<input value="" name="search" type="search"/>
</div>
<div class="main">
<div class="adv-block">
Link to adv 1
Link to adv 2
</div>
<div class="search-result">
Search result 1
Search result 2
</div>
</div>
First, I want a user with tab navigation skip advertisments, so I provide tabindex for and input and then for the search results, like this.
<div class="header">
<input value="" name="search" tabindex="1" type="search"/>
</div>
<div class="main">
<div class="adv-block">
Link to adv 1
Link to adv 2
</div>
<div class="search-result">
Search result 1
Search result 2
</div>
</div>
But then I would like to help screen reading programme (in my case a VoiceOver on Mac) to read the zones correctly. So, I mark the search results contaiter with its role and description.
<div class="header">
<input value="" name="search" tabindex="1" type="search"/>
</div>
<div class="main" role="main" aria-label="Search results">
<div class="adv-block">
Link to adv 1
Link to adv 2
</div>
<div class="search-result">
Search result 1
Search result 2
</div>
</div>
The problem is that VoiceOver also navigates according to tabindex and it goes from the input directly to the first link.
I tried to cheat with adding a tablindex attribute to the container
<div class="header">
<input value="" name="search" tabindex="1" type="search"/>
</div>
<div class="main" role="main" aria-label="Search results" tabindex="2">
<div class="adv-block">
Link to adv 1
Link to adv 2
</div>
<div class="search-result">
Search result 1
Search result 2
</div>
</div>
But this cases changes for a usual tab navigation.
So, is there a way to make VoiceOver read that a user proceeded to a search result zone?
Please be very careful when trying to force a particular navigation style, as tabbing is not the only (or even primary) method of navigating with a screen reader.
Most of the time a screen reader user would use 'browse' navigation to read the content. On VoiceOver this is cntl-alt-right arrow, in Jaws/NVDA it is just down-arrow.
Browse mode will go through all content, not just form controls and links. Browse mode is not affected by tabindex.
The problem with tabindex is that it over-rides the default (code) order, which can be very confusing when it doesn't match the browse order. This is more obvious when there are other things in the page, and then you skip chunks of content and go to the lowest tabindex.
I would recommend something like:
<header role="banner">
<div class="header" role="search">
<label for="search" class="hidden">Search</label>
<input value="" name="search" type="search" id="search">
</div>
</header>
<div class="adv-block">
Link to adv 1
Link to adv 2
</div>
<main role="main" id="main" aria-labelledby="results">
<h1 id="results" class="hidden">Search results</h1>
<div class="search-result">
Search result 1
Search result 2
</div>
</main>
NB: I am assuming there will be other stuff to go into the header, otherwise it wouldn't be worth using the header with banner role.
Typical ways that people using screen readers get to the 'content' are:
Arrow down through everything, time consuming but reliable.
Skip by heading (cntl-alt-cmd-h in VoiceOver), and the main heading 1 is a good indicator of the primary content of the page.
Open the landmarks dialogue (cntl-alt-u and then left/right to find it in VO) and go to the 'main' landmark.
Tabbing through links, and consistency trumps efficiency here.
Overall I would recommend against trying to manipulate the tab-order, and make sure you provide good headings, landmarks, and maybe a skip-link if you really need to provide a short-cut. This applies to Windows based screen readers as well.
The current w3 accessibility standard says to try to avoid using positive tabindex values. It is best practice to layout your dom so that you can simply use tabindex=0 for everything that should be tabbable to.
This is a very strange issue. On the Reveal Form (onclick of "Price and Save My Shopping List"), I thought that for some reason the text box and dropdown were disabled. This is not the case; however, it's only allowing me to click on them on the far right of the control--I had to increase the dropdown to "medium" from "small" to be able to interact with it at all. I have no idea why this is happening and couldn't even think of what to Google. So I've looked at everything related to Foundation Reveal to no avail.
Here is the jsfiddle, but although it works on my site, it does NOT on jsfiddle. If you want to see it in action, I'll send you a link to my site.: http://jsfiddle.net/jenborn/TQjm9/
Here is the modal form since apparently I have to include code if I link to a jsfiddle:
<form id="saveShoppingList" action="" method="POST" class="custom">
<div class="small-12 columns">
<div class="small-6 small-centered columns"><h4>Your Shopping List</h4></div>
<div id="makemebold" class="large-4 columns"><!--label for="name"-->Name it: <!--/label--></div>
<div class="small-8 columns"><input type="text" id="name" name="name" /></div>
<div id="makemebold" class="small-4 columns"><!--label for="style"-->Style: <!--/label--></div>
<div class="small-8 columns"><select id="beer_style" class="medium"><? echo $style_opt ?></select></div>
<div id="makemebold" class="large-4 columns">Keep Private:</div>
<div class="small-3 left columns"><div class="switch tiny round"><input id="private" name="private" type="radio"><label for="private" onclick="Off">On</label><span></span></div></div>
</div>
<div class="row">
<div class="small-6 large-centered columns">
<button type="submit" class="button radius">Go</button>
<button type="reset" class="button radius alert">Reset</button>
</div>
</form>
You have some major issues in your use of Foundation's grid. You have subsequent columns adding up to well over twelve, and columns nested within other columns without an interposing row. If you go through the Foundation Docs' grid section and rewrite your code accordingly, I'm betting your issue will be resolved. Pay special attention to the section titled "Infinitely nest your grid".
I would also suggest basic improvements like using a label element for your form labels, as browsers will know how to use them better. And for semantics, of course.
I havent much experience on jquery mobile or related mobile UI frameworks, I am finding it difficult to align elements horizontally.
I want to horizontally align text field and select tag. so that they appear inline.
I tried data-type="horizontal" and data-inline="true". but they are not working.
Here's the code i am using,
<div data-role="controlgroup" data-type="horizontal">
<label for="cs" class="fieldLabel">option 1: </label>
<select name="cs[param_string_1]" id="cs[param_string_1]" data-inline="true">
<option>options</option>
</select>
<input type="text" data-inline="true" style="width:100px" id="cs[param_num_1]" name="cs[param_num_1]" />
</div>
Comments/Suggestions?
Tom's answer was useful. but that dint work exactly as per the need
I used following to get the required output.
<div data-role="controlgroup" data-type="horizontal">
<table>
<tr>
<td width="30%">
<select name="cs_abc" class="fieldLabel" style="width: 100%" data-inline="true" id="cs[abc]">
<option>...</option>
</select>
</td>
<td width="70%">
<input type="text" id="cs_xyz" style="width:160px" data-theme="d" name="cs[xyz]" />
</td>
</tr>
</table>
</div>
One can use layout grids for this (Refer here)
But layout grids may not give precise results, at least in my case i was not getting the needed alignment.
Some good fiddles were useful.
Take a look at Text inputs & Textareas.
It does not support data-inline on its own, but you can use data-role=fieldcontain instead:
<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</div>
As far as I can see you can't put multiple inputs next to each other using only jQuery Moblie...
<div href="#" data-role="button" style="margin:30px;">Adjust</div>
if you want to manipulate just right and left adjustments use style="margin-left=30px;margin-right=30px;"
...I am still learning the jQuery Mobile framework myself, so I know it is a pain when you just need to get something done, but you really should try to use what is already built within the framework, especially if you are going to build mobile friendly apps. Do yourself a favor and take the time needed to learn it.
Also, another tip; you need to stay away from using px values for sizing elements as that typically doesn't scale well on mobile devices, em values work best for cross platform use.
I have successfully used something similar to the following code to "inline" text input and select boxes with jqm. if you want the styles to be different - you can add the theme swatch letter after the individual ui-block element so that it looks something like ui-block-b or ui-block-c, etc. This is all documented here: http://demos.jquerymobile.com/1.0rc1/docs/content/content-grids.html
<div class="ui-grid-a">
<div class="ui-block">
<label for="cs[ps_1]" class="fieldLabel ui-hidden-accessible">option 1: </label>
<select name="cs[ps_1]" id="cs[ps_1]" data-mini="true">
<option>options</option>
</select>
</div>
<div class="ui-block">
<input type="text" style="width:10em;" id="cs[pn_1]" name="cs[pn_1]" />
</div>
</div><!-- /grid-a -->