I want to display the validation error with inside a bubble under the input, which is visible as long as the user focuses the element.
Obviously this is not an easy task, and I gave up on my first try to do this only with CSS (cannot make it overly certain elements, what if the element is at the end of the page etc.).
So I went back to the angular page and found the matTooltip, which behaves exactly as I want. (on top of other element, changes position when at the end of the page etc.) :) However I'm stuck on how to best combine those two.
matError is tightly coupled with matFormField, matTooltip is more or less independent.
Has somebody tried this or something similar?
You can use it combining matTooltip and matTooltipDisabled:
<div class="example-container">
<mat-form-field>
<input
matInput
placeholder="Enter your email"
[formControl]="email"
[matTooltip]="getErrorMessage()"
[matTooltipDisabled]="!email.invalid">
</mat-form-field>
</div>
The Stackblitz example: https://stackblitz.com/edit/angular-lpnqm5
Hope it helps!
I'm just working on a form and having some issues with the placeholder not displaying inside the textarea.
If I do backspace twice it appears. Tried lots of different suggestions after trolling this site but haven't been able to resolve the issue yet. Happens in all browsers.
<div class="form-group">
<label>Description:</label>
<textarea placeholder= "Describe yourself" style="height:200px;
width:300px; font-size:12pt; align-top: "name= "profile_description"
class="form-control" required></textarea>
</div>
The above lines work well on their own despite the CSS align-top being incomplete.
The issue is with one of your custom class names. Please remove them one at a time to isolate the problem.
Update:
On troubleshooting further with #ljean we found that there were whitespaces in the textarea tag leading to this behaviour.
Update:
And so here is the code with the whitespaces which were causing the issue removed.
<div>
<b class="text-white" style="float:right">Already a member? <a
href="../login/index.html" class="text-white" style="text-
decoration:underline;">Sign in</b></a>
<br>
</div>
When trying to wrap <md-datepicker> with <md-input-container>
I get an error like the one above, however one of examples from the project page
comes with that structure
<md-input-container>
<label>Enter date</label>
<md-datepicker ng-model="user.submissionDate"></md-datepicker>
</md-input-container>
After a couple hours of anxious, unproductive research I updated Angular Material from 1.0.7 to 1.1.0 and that fixed the issue.
I've checked out a number of samples, but none are quite the same as what I'm trying to do.
What I've got works, mostly, but it doesn't quite work right.
Here's a fiddle to illustrate the issue.
http://jsfiddle.net/5yA6G/4/
Notice that the top set works fine, but it's statically defined.
The bottom set (Tom, steve, bob) "work" basically, but the header element ends up both in the collapsible header AND in the portion of the collapsible that gets hidden.
Seems like I must be doing something wrong, but I haven't been able to figure out what.
Any ideas?
Just for reference and for anyone else running into this problem, it turns out to be at least somewhat obvious in hindsight.
Knockout's built in "anonymous" templating works great in many cases, but with JQMobile, it can be a tad quirky.
That's because JQMobile will adjust the content of the anonymous template when the page loads, just as it does with all the other content.
Then, later, when you use knockout's ApplyBindings function, knockout will add the applicable elements, just as it should. As many posts and answers have hinted at, you then MUST call collapsible() on the newly created elements, via something like this.
$("div[data-role='collapsible']").collapsible({refresh: true});
No problem there. HOWEVER, if JQM has already applied formatting, then the anonymous template has already been "rendered" by JQM, so rendering it again by calling collapsible causing all sorts of funky results, including doubled heading, nested collapsibles, etc.
The solution for me was to use Knockout's "Named Template" feature, and just put the template to render the collapsible elements into a tag, like this:
<script type="text/html" id="alarm-template">
<div data-role="collapsible" data-collapsed="true" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u" data-enhance="false">
<h3 data-bind="text:name"></h3>
<p>The content here</p>
<p data-bind="text: name"></p>
</div>
</script>
Doing this prevents JQM from "rendering" the template elements when the page loads, so they'll be rendered properly when they're actually generated.
EDIT: The above works fine for collapsibles NOT in a collapsible-set, but, if they're in a set, I've found the styling of the elements (particularly, the corner rounding to indicate belonging to a set) doesn't work right.
From what I can tell, there are 2 problems:
The first is that just triggering "Create" doesn't actually refresh the styling of all the collapsibles in the set. to do that you have to do...
$("div[data-role='collapsible-set']").collapsibleset('refresh');
But, there's a worse problem. JQM "marks" the last item in the set as the "last item". That fact then gets used to determine how to style the last item as it's being expanded/collapsed.
Since Knockout doesn't actually rebuild the entire set (for speed), each time you call the refresh method, JQM dutifully marks the last item as "last", but never removes the marks on previous items. As a result, if you start from an empty list, EVERY item ends up being marked "last" and the styling fails because of this.
I've detailed the fix for that at github in an issue report.
https://github.com/jquery/jquery-mobile/issues/4645
I actually found a much easier way to do this:
Set up your foreach binding as you normally would for me it looked like this
<div data-bind="foreach: promotions">
<h3 data-bind="text: Title"></h3>
<p>Creator:<span data-bind="text: Creator"></span></p>
<p>Effective Date:<span data-bind="text: EffectiveDate"></span></p>
<span data-bind="text: Description"></span>
<a data-bind="text: ButtonText, attr: {href: ButtonLink}"></a>
Wrap that in a div with class="collapsible like so
<div data-role="collapsible-set" data-bind="foreach: promotions">
<div class="collapsible">
<h3 data-bind="text: Title"></h3>
<p>Creator:<span data-bind="text: Creator"></span></p>
<p>Effective Date:<span data-bind="text: EffectiveDate"></span></p>
<span data-bind="text: Description"></span>
<a data-bind="text: ButtonText, attr: {href: ButtonLink}"></a>
Apply the collapsible widget via jquery mobile after you do your binding like so:
$(document).ready(function () {
ko.mapping.fromJS(data, dataMappingOptions, PromotionViewModel.promotions);
ko.applyBindings(PromotionViewModel);
$('.collapsible').collapsible();
});
For a collapsible set the same idea can be applied just set the class="collapsible-set" on your foreach div. Hope this helps
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
I'm creating an MVC4 project with JQuery Mobile UI.
This is my login form:
and this is my <form> in my html:
<form action="/Account/Login/" method="post">
<ul>
<li>
#Html.Label("User name:")
#Html.TextBox("userName")
</li>
<li>
#Html.Label("Password")
#Html.Password("password")
</li>
<li>
<input type="checkbox" name="rememberme" id="remember" />
<label for="remember">Remember me</label>
</li>
<li>
<input type="submit" value="Login" />
#{if (ViewBag.LoginFailed)
{
<br />
<b style="color: red;">Username and/or password was not correct. please try again.</b>
}
}
<br />
<br />
Not registered? Click here to create an account!
</li>
</ul>
</form>
My problem is: when I click on Remember me label or the checkbox, checkbox still remains unchecked...
How to solve this issue??
Edit: This is the complete output html from mvc, This is my style.css file, and this is the generated code in DOM.
(My project is changed since one month ago, so these outputs are a little different from the screenshot. But the checkbox still doesn't work...)
I tried it just now with jsfiddle and we know that Asp.Net MVC doesn't change HTML tags in output. But I also tried it in an MVC4 application and it worked. You can see the result here.
Your browser may has some problem with jquery mobile and if you are using chrome you can see the errors (if exist) using development tools of google chrome (to open it right click on page and click on inspect element).
update
your update give us an output file. I copied it in jsfiddle and it worked too. the problem isn't from HTML, JqueryMobile or another programming tools. I think it's because of your system.