http://view.jquerymobile.com/1.4.0/demos/controlgroup/#Textinputs
I followed the above link from jquery mobile. It doesn't work as expected !
Can someone help
Try setting the height too:
<div data-role="controlgroup" data-type="horizontal">
<input type="text" id="search-control-group" data-wrapper-class="controlgroup-textinput ui-btn">
<button>Submit</button>
</div>
.controlgroup-textinput{
height: 20px;
padding-top:.22em;
padding-bottom:.22em;
}
DEMO
To anyone having the same issue after using the code from the jquerymobile demos!
If you copy html or css content from the demos page, make sure to remove all leading whitespaces (indentation) first and add your own!
The demos page uses some other invisible non breakable spaces that prevent proper css parsing in most browsers!
I had the same issue and when looking into the css parsed by chrome it was marking
" padding-top: .22em;"
as invalid css, because of those non breakable spaces.
Related
In all input fields in Chrome appear nonsens texts - some texts, that were written in other text field. It seems, that it is connected with default IDs. It can be probably resolved for text fields with setting custom id with setId(..) method. But it doesn't work for datefields, comboboxes etc. while the id is set for the parent div not the input itself eg.:
<div role="combobox" class="v-filterselect v-widget small v-filterselect-small v-has-width" id="Field-1553856663994" style="width: 100%;" autocomplete="off">
<input type="text" class="v-filterselect-input" autocomplete="nope" id="gwt-uid-134" aria-labelledby="gwt-uid-133" style="width: 100%;" tabindex="0" dir="">
<div class="v-filterselect-button" aria-hidden="true" role="button"></div></div>
Is the way in Vaadin to set id for inner element or to disable completion in Chrome?
Chrome the behavior on autocomplete attribute changed a while ago, but it has been until recently we made a change in our implementation according to that in Vaadin 8.
There is lengthy discssion about this in our issue tracker;:: https://github.com/vaadin/framework/issues/11437
I see this question, which is similar, but looks like no one was able to answer it.
I decided to implement an autocomplete dropdown with the HTML5 datalist, because I have about 1,000 items I'd like mobile users to be able to start typing and narrow the list down. Seems to work great on my Android, but on iOS no options come up at all.
Is this a known issue? I can't seem to find much info on it. I am thinking I will be looking hard for a screen position error (e.g., maybe the options are coming up off to the side of the screen area for some reason), but I'm baffled what else would cause this.
Here's the HTML:
<p>School 1</p>
<input type="text" id="input1" name="school" list="dlSchool1" class="collegeListInput" placeholder="Type a school's name..." />
<datalist id="dlSchool1">
<asp:Repeater ID="rpMobile" runat="server">
<ItemTemplate>
<option value="<%# Eval("SchoolName")%>"><%# Eval("SchoolName")%></option>
</ItemTemplate>
</asp:Repeater>
</datalist>
And some CSS:
.collegeListInput {
width: 225px;
margin-top: 20px;
}
In JQuery I do some stuff on the focusout event.
That's about it. Thanks in advance for any advice / resources. I'm on hour 14 of the workday, so be gentle if this is a really dumb question.
The datalist is not supported on iOS yet (note to visitors from the future, as of Oct 6, 2014 the current version of iOS is 8.0.2).
Can I Use - Datalist
I'm trying to create something like the following in jQueryMobile 1.4.2 - i.e. a list of radio buttons with content to explain each option. This is a jquery screenshot from version 1.2 from this great article best practices article. The size of the description text is smaller than the body text.
However when I copy his sample code directly from it comes out sized incorrectly like this (other controls shown for reference size).
Here's the sample code
<fieldset data-role="controlgroup">
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">
<h3 class="ui-li-heading">jQuery Mobile</h3>
<p class="ui-li-desc">Easy and great for all project from smartphones to dumbphones</p>
</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">
<h3 class="ui-li-heading">Sencha Touch</h3>
<p class="ui-li-desc">Great for complex apps but a higher learning curve</p>
</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">
<h3 class="ui-li-heading">jQTouch</h3>
<p class="ui-li-desc">Simple, lightweight, but focused on webkit</p>
</label>
</fieldset>
It turns out the reason the above code no longer works is that it references css class name ul-li-desc which used to be in jquery mobile 1.2.1 css but is no longer in the latest css for version 1.4.2.
The new 1.4.2 version has sample code for something very similar in the ListView component that looks like this
The css class that reduces the size of the font here is .ui-listview>li p
So what's the correct way in jQuery Mobile 1.4.2 to create a radio button list with added content that isn't huge?
The easiest way to undetstand jQM CSS structure, is to firebug current view. jQM changes HTML markup based on widget as it adds extra elements and wraps others in order to each the final UI.
Bear in mind, you have to be specific and caucious when overriding jQM styles. Most of the widgets share the same classes (global classes).
Also note that as of jQM 1.4 to increase performance, the team has reduced the amount of inner elements that are you used for styling widgets.
/* <p> within <label> */
label p {
font-size: .9em;
font-weight: 400;
display: block;
}
/* <h3> & <p> within <label> */
label h3, label p {
margin: .45em;
}
/* adjust position of radio button itself */
.ui-radio input, label.ui-btn:after {
top: 35% !important;
}
Demo
I have a textarea and for some reason when I try to add text in between the open and close brackets of my textarea it wont display, whether I use html content or php echoed content.
It works if I place the content in a place holder though, does anyone know why this is happening?
<form action="includes/changebio.php" method="post" id="form1">
<textarea id="bio" style="width: 440px;
margin-top:3px;
text-align:left;
margin-left:-2px;
height: 120px;
resize: none;
outline:none;
overflow:scroll;
border: #ccc 1px solid;"
textarea name="bio" data-id="bio"
maxlength="710"
placeholder="<?php echo stripslashes($profile['bio']); ?>" rows="10">
</textarea>
<input type="image" src="assets/img/icons/save-edit.png"
class="bio-submit" name="submit" value="submit" id="submit"/>
</form>
Try adding a name="textarea-name"attribute to the textarea (even if you have no use for it)
Edit:
I have tested a <textarea name="bio">textarea content</textarea> piece of code and concluded that (as strange as it may seem), if the textarea name is bio, the content is no shown in Firefox, although it is present if the element is inspected with Firebug or a similar tool.
It appears to be something caused by one of my add-ons, as the textarea content it is displayed correctly by other browsers and when using a clean new Firefox profile.
I have not investigated further though.
Simplest method that worked for me:
Instead of doing:-
<textarea name="scenario" value="<?php echo $scenario?>"> </textarea>
Do it like this:-
<textarea name="scenario"> <?php echo $scenario?> </textarea>
I have similar problem! When I change the content with ajax, Chrome & Firefox displayed nothing, but IE displayed correctly. What strange is the content is present if the element is inspected with Firebug or a similar tool.
You have extra textarea after style tag. Here is the code.
<form action="includes/changebio.php" method="post" id="form1">
<textarea id="bio" style="width: 440px;
margin-top:3px;
text-align:left;
margin-left:-2px;
height: 120px;
resize: none;
outline:none;
overflow:scroll;
border: #ccc 1px solid;" name="bio" data-id="bio" maxlength="710"
placeholder="<?php echo stripslashes($profile['bio']); ?>" rows="10"><?php echo stripslashes($profile['bio']); ?></textarea>
<input type="image" src="assets/img/icons/save-edit.png"class="bio-submit" name="submit" value="submit" id="submit"/>
</form>
I also faced the similar problem and resolved it by doing like this:
{{\App\ArtObject::find($id)->description}}
Earlier I had:
description}}">
The later case did NOT show the value as expected.
If your problem is same as mine, where I placed a string variable with 1500 chars for a web content, between the two tags, and only partial appeared inside the Textarea on the page. Only about 900 chars displayed. A large part at the end were missing. Then, you may try what worked for me, where I used the htmlspecialchars() function like this:
<TEXTAREA><?php echo htmlspecialchars($pgCont); ?></TEXTAREA>
I still don't know why this function may be required to show the full contents of the string variable. Perhaps, for security reasons.
I inherited a site that uses sIFR 2.0.7 and for reasons beyond my control upgrading to sIFR3 is unlikely.
I have a div with text that is successfully being replaced with sIFR. The text is fairly large and should wrap to the next line, but instead it is scaled down by sIFR. Without sIFR it wraps correctly.
I've searched both the documentation on 2.0.7 and other threads without much luck. Tried setting smaller text, a fixed height on the div, setting line-height, and changing letter-spacing.
Any tips or ideas would be greatly appreciated, thanks!
Base styles are included unchanged from the sIFR download. Relevant code:
HTML:
<div id="menu_header_FuturaStdMedium">Sample Header Text</div>
CSS:
.sIFR-hasFlash div#menu_header_FuturaStdMedium {
letter-spacing: -4px;
visibility: hidden;
font-size: 26px;
}
Javascript:
if(typeof sIFR == "function"){
// Headers
sIFR.replaceElement("div#menu_header_FuturaStdMedium", named
({sFlashSrc: "FuturaStdMedium.swf", sColor: "#000000", sCase: "upper", sWmode: "transparent", sFlashVars: "textalign=center"}));
}
Generated HTML:
<div class="sIFR-replaced" id="menu_header_FuturaStdMedium" style="padding-top: 15px;"><embed style="width: 230px; height: 24px;" class="sIFR-flash" type="application/x-shockwave-flash" sifr="true" bgcolor="transparent" wmode="transparent" flashvars="txt=Sample Header Text&textalign=center&textcolor=#000000&w=230&h=24" quality="best" src="FuturaStdMedium.swf" height="24" width="230"><span class="sIFR-alternate">Sample Header Text</span></div>
Thanks again!
Wes
I had the same issue and found this entry through google. Just in case anyone else comes across the same issue: it seems like most of the weird text-scaling sifr does can be solved by putting the text one wants to replace into a span-tag and replacing the span-tag (this also solved some weird down-scaling sifr did when it just should have wrapped the text...)
So in this case:
HTML:
<div id="menu_header_FuturaStdMedium"><span>Sample Header Text</span></div>
JS:
if(typeof sIFR == "function"){
// Headers
sIFR.replaceElement("div#menu_header_FuturaStdMedium span", named
({sFlashSrc: "FuturaStdMedium.swf", sColor: "#000000", sCase: "upper", sWmode: "transparent", sFlashVars: "textalign=center"}));
}
I hope this helps anyone :)