I am trying to make a input form with a visual feedback. If the user inputs a number in the input field, the input field along with the addon turns green and a check mark or a cross mark appears next to the currency text.
My issue is that the glypicon overlaps with the currency text all the time. I have tried nesting the second span into the first one as well as modifying margins, paddings to allow for it but the input-group-addon is not budging. What would be a clean and good way of ensuring that the glyphicon is positioned after the currency text?
<div class="col-sm-3 inputGroupContainer">
<div class="input-group">
<input type="number" class="form-control" name="price" value=50 data-moneyamount="moneyamount" required />
<span class="input-group-addon">
USD
</span>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
</div>
Related
I have a bootstrap modal with a body that allows vertical scrolling. Inside of this, I am trying to use a datetime picker, but the problem is that expanding the picker, causes the modal's body to add scroll bars. I need to keep the scrolling ability (for other things that can add content to the modal) but I also need the datetime picker to expand outside of the modal, and not cause the modal to scroll (so that it would occupy the red square without in the pic).
<div class="modal-body" style="overflow-y:scroll;">
<div class="row">
<div class='col-md-4'>
<div class="form-group">
<div class='input-group date' id="datetimepicker3">
<input type="text" class="form-control" data-bind="value: $data.visitdate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
Here is a fiddle: https://jsfiddle.net/axg1010/3xunve7r/
Check out your very first line: <div class="modal-body" style="overflow-y:scroll;">. If you take out the overflow-y:scroll the calendar will project over your modal.
If you look at the title in this codepen you will see that when the cards are loaded into the page, the title shakes/gets displaced. This also happens to the search bar when I am not using codepen and causes the glyph search addon to become unattached in Internet Explorer.
https://codepen.io/cryptodescriptor/pen/MQBWLL
Search Box
<!-- search column -->
<div class="col-12">
<div class="input-group search-group">
<span class="input-group-addon">
<i style="line-height: 50%;" aria-hidden="true">?</i>
</span>
<label class="sr-only" for="search"></label>
<input type="text" class="form-control typeahead" id="search" placeholder="Search Coin">
</div>
</div>
Title
<h1 id="page_title">Crypto Descriptor</h1>
Forgot to mention, it happens to the footer text usually aswell.
Here is the code for date-picker:
<div id="divDOBPicker">
<label id="lbldate">Date of birth </label>
<asp:TextBox ID="txtDOB" runat="server" CssClass="date-control" placeholder="Select Date" data-format="MM/dd/yyyy"></asp:TextBox>
<span class="add-on">
<i class="s-plus"></i>
</span>
</div>
I have placed the above code inside the body of bootstrap modal popup. In fullscreen view, the date-picker behaves as expected.
But in small screens, when windows-scroll-bar comes into picture, the datepicker gets separated from the input control. As in the datepicker doesn't move when user scrolls up/down.
I am new to AngularJS and one of the awesome things here in AngularJS are the ng-hide and ng-show directives which can be used to display certain parts of the web page or hide the. Now sometimes I don't want to show a part and it works fine then, but then sometimes it works but in an undesirable way.
Example:
<div class="row">
<div class="col-xs-6">
<h2>Login</h2>
<p class="text-danger">{{message}}</p>
<form name="form" novalidate>
<div class="form-group">
<label>Email: </label>
<div class="input-group">
<input type="email" name="email" ng-model="credentials.email" placeholder="Email" class="form-control" required />
<div ng-show="form.email.$invalid" class="input-group-addon">
<i class="fa fa-times-circle"></i>
</div>
<div ng-hide="form.email.$invalid" class="input-group-addon">
<i class="fa fa-check-circle"></i>
</div>
</div>
</div>
<div class="form-group">
<label>Password: </label>
<div class="input-group">
<input type="password" name="password" ng-model="credentials.password" placeholder="Password" class="form-control" required ng-minlength=5 />
<div ng-show="form.password.$invalid" class="input-group-addon">
<i class="fa fa-times-circle"></i>
</div>
<div ng-hide="form.password.$invalid" class="input-group-addon">
<i class="fa fa-check-circle"></i>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary" ng-disabled="form.$invalid" ng-click="authenticate(credentials)">Login</button>
Register
</form>
</div>
</div>
Now if the fields are valid the check symbol appears and if they are not the cross apears like so:
But if you look closely the addon with the cross symbol does not have rounded corners and this is probably because the addon with the check symbol is still there but hidden. Now what do I do in such situations. I would like to the div containing the check addon in such case to disappear altogether instead of staying hidden. How to accomplish that?
Try ng-if="form.password.$invalid" and ng-if="! form.password.$invalid" instead; that removes the element from the DOM.
Take a look at the ngIf documentation for further research. Code snippet:
<div class="input-group">
<input type="password" name="password" ng-model="credentials.password" placeholder="Password" class="form-control" required ng-minlength=5 />
<div ng-if="form.password.$invalid" class="input-group-addon">
<i class="fa fa-times-circle"></i>
</div>
<div ng-if=" ! form.password.$invalid" class="input-group-addon">
<i class="fa fa-check-circle"></i>
</div>
</div>
Use ngIf (and a second ngIf with an inverted predicate) instead of ngShow or ngHide. The former will remove elements from the DOM, while the latter will simply hide them with CSS.
From the Angular documentation:
The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
In contrast, the ngShow documentation explains that it hides by adding the .ng-hide class:
The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute. The element is shown or hidden by removing or adding the .ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag).
After much work I have managed to move all the information from the Customization page on a Bundled Product to the front page. I now want to hide the buttons that direct the user to the customization page. Both buttons however use the save class name.
There are two separate buttons on this page : I need to hide the first button
Button 1 which is:
<div class=“product-shop”>
<div class’Product-main-info”>
<div>
<button class="button btn-cart" type="button" onclick="Enterprise.Bundle.start();">
<span>
<span>Customize and Add to Cart</span>
</span>
</button>
</div>
</div>
Button 2 is:
<div class="add-to-cart">
<label for="qty">Qty:</label>
<input id="qty" class="input-text qty" type="text" title="Qty" value="1" maxlength="12" name="qty">
<button class="button btn-cart" onclick="productAddToCartForm.submit(this)" title="Buy Now" type="button">
<span>
<span>Buy Now</span>
</span>
</button>
</div>
I have tried hiding the button using CSS however have only been able to switch both buttons off. This the last step in a long Magento GO customization project. Any help much appreciated.
Regards
Mark