Can't attach GlyphIcon to Textbox - asp.net-mvc

I'm having real issues trying to get my bootstrap datepicker icon to attach to my textbox. I've read through all documentation and searched for hours to find a solution but nothing seems to work.
is the closest i've gotten with my markup but the icon seems to align to the right hand side of the screen
<div id="sandbox-container">DATE
<div class="input-group date">
<input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>

It's pretty easy to do with Bootstrap input group and Font Awesome icons:
Structure
<label for="xxx">Date</label>
<div class="input-group">
<input type="text" class="form-control" id="xxx">
<div class="input-group-append">
<span class="input-group-text">
<i class="fas fa-calendar-alt"></i>
</span>
</div>
</div>
Icon Choices
I am showing you the free version of Font Awesome Icons. You can use whatever you like to represent the date picker icon. Here is some: https://fontawesome.com/icons?d=gallery&q=calendar&m=free
Screenshots
Demo
https://jsfiddle.net/davidliang2008/9a20fp3u/37/

Related

materializecss read radio button

New to materializecss, trying to read radio button and not having any luck.
<form class="main" id="sponsorform" novalidate="novalidate" style="max-width: 480px;margin: 40px auto;">
:
<div>
<div class="row">
<div class="input-field col s12">
<p>Choose race to sponsor</p>
<p>
<input type="radio" name="race" id="wdf">
<label for="wdf">Women's Distance Festival</label>
</p>
<p>
<input type="radio" name="race" id="msm">
<label for="msm">Market Street Mile</label>
</p>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<button class="waves-effect waves-light btn submit-btn" type="submit" onclick="nextOrSubmitPage(); return false;">Next</button>
</div>
</div>
</div>
When I click on one of the options, the circle gets highlighted but using chrome inspect I do not see any change to the dom.
And when I try to read I see either
$('input[name=race]:checked').val()
"on"
or I get an error `Cannot read property 'val' of null
Not sure what changes in between the two behaviors, though.`
Note: this is all within google apps script. Not sure if that is relevant or not.
Ok, after some hacking around, I found the following seems to work
$('input[name=race]:checked').attr('id')
Not sure if there's a better way to do this, but as I said it seems to work.
This may solve your problem.
$("input[name=group1]:checked").next().text();

ngMessages and Nested Scopes - Datepicker in an ngForm on a Tab

OP Update
I've figured out the problem and this issue is now closed. Would one day like to find the time to post the solution as an answer here.
I'm having a bit of an issue working with ngMessages inside an ng-form on an Angular Bootstrap tab. Further complicating things, the thing I am validating is a Angular Bootstrap datepicker. So the code is as follows, and as you can see, I've got a datepicker on an ng-form which is on a Tab.
<uib-tab index="5" heading="{{tabs[5].title}}" select="changeCheck($event)">
<ng-form name="{{tabs[5].form}}">
<div class="col-md-9">
...
<div class="col-md-6">
<h4>Add Followup</h4>
<div class="form-group">
<label for="addFollowupDate" class="control-label">Date:</label>
<div class="input-group">
<input type="text" id="addFollowupDate"
class="form-control"
uib-datepicker-popup="{{format}}"
ng-required="true"
ng-model="newFollowup.date"
is-open="addFollowupPopup.opened"
datepicker-options="dateOptions"
close-text="Close"
alt-input-formats="altInputFormats" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openAddFollowupPopup()"><i class="fa fa-calendar"></i></button>
</span>
<div class="help-block" ng-messages="followupsForm.newFollowup.date.$error" ng-if="followupsForm.newFollowup.date.$invalid && followupsForm.newFollowup.date.$touched">
<div ng-message="required">This field is required</div>
</div>
</div>
</div>
I've assigned that form to the scope using the following line:
$scope.followupsForm = $('ng-form[name="followupsForm"]').data('$formController');
And I have successfully set the control to touched on a submit which does make the border go red:
if ($scope.followupsForm.$invalid) {
angular.forEach($scope.followupsForm.$error, function (formErrorField) {
angular.forEach(formErrorField, function (errorField) {
errorField.$setTouched(); // by setting to touched, the relevant message will display if the field is invalid.
});
});
}
But the ng-message for required does not display.
Any ideas why? Could be a tough one with nested scopes etc. (of the tab and the picker).

Ionic TextFile Clear Button Keyboard Behavior iOS

I have a text input in my Ionic application that has 2 buttons in the same span. The first button is used to conduct a search and the second is used to clear the text input. I'm seeing odd behavior when I tap the clear button, the text input is cleared and the keyboard reappears but the text field does not have focus.
Can anyone help so that I can make sure the text input still has focus after clearing the text? Thank you.
<form class="list">
<span class="item item-input-inset">
<label class="item-input-wrapper address-label" name="addressLabel">
<i class="icon ion-ios-search placeholder-icon" ng-show="!address.length"></i>
<input type="text" class="address-input" placeholder="Search By Address" ng-model="address" autocomplete="off" autocorrect="off" autocapitalize="off">
</label>
<button type="submit" id="button1" class="button button-small custom-btn ion-search" ng-click="search(address)" ng-show="address.length"></button>
<button ng-click="address = ''" class="button button-small custom-btn ion-close-round" ng-show="address.length"></button>
</span>
</form>
Take a look at this post from the ionic framework forums. Seems like this would work and give you a more native look and feel.
<div class="list list-inset">
<div class="item item-input">
<input type="text" placeholder="mail stop"
name="mail_stop_name"
>
<i class="icon ion-ios-close placeholder-icon"
data-tap-disabled="true" on-touch="formData.mail_stop_name = ''"></i>
</div>
</div>
Ref:
https://forum.ionicframework.com/t/clear-button-inside-input-causes-input-to-loose-focus/17016

Bootstrap multi-line form-controls for a span

Having a problem displaying text when longer than one line in a span with a bootstrap form-control class (see images below). Looking for a solution in Bootstrap which would wrap the text in a box but keep the look even when overflowed on to the next line.
HTML Code
View Result
EDIT Complete Code:
#*Kpi Selection/Display*#
<div class="form-group">
<label class="col-lg-2 control-label">KPI Selection</label>
<div class="col-lg-10">
<span id="KpiCode-display" class="form-control">
#Html.DisplayFor(model => model.WorkOrder.KpiDetails.DetailsKpi.KpiFull)
</span>
<span id="KpiSelection-edit" style="display: none">
</span>
</div>
</div>
The form-control class needs to be applied to an input/select. The style it applies doesn't work with something like a span. If you're looking for a static text control, the class you should be applying is form-control-static. See: http://getbootstrap.com/css/#forms-controls-static.

How can I use Bootstrap button addons in my MVC view

I'm having difficulty getting Bootstrap's button addons to work in my MVC view. I'm using the latest NuGet version of ASP.NET MVC (5.1 rc1) and Bootstrap (3.03).
I have the following in my view (now that I've pared it back to just hand-coded HTML rather than using Html.EditorFor(), in an attempt to getting it to work):
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary(true)
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
<div class="col-lg-6">
</div>
</div>
This generates the following HTML:
<form action="xxx" method="post">
<input name="__RequestVerificationToken" type="hidden" value="T3k..." />
<div class="form-horizontal">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
<div class="col-lg-6">
</div>
</div>
</div>
</form>
The problem is that, when this is displayed in the browser (Chrome 32 / IE 11), there's a big gap between the input box and the button. Like this:
If I reduce the size of the div surrounding the input-group div to col-lg-3 or smaller, it's fine. But anything larger than that leaves a gap.
It's as though there's a maximum size on the input - and indeed, all my inputs do seem to be smaller their container div...
What could be causing this?
The default Site.css stylesheet that comes with a new MVC 5 project has a rule that limits the max-width of inputs. What you're getting is the result of the control spanning the full available width like it's supposed to, but then the input, itself, is being constrained to a defined width. Just comment out that piece of the stylesheet and everything will work as it should.
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
It's a pretty egregious shortcut the team seems to have taken in order to quickly build the sample site.

Resources