I will change height of input form (and also the buttons - save and cancel).
Here is an example but I could not change the height of the input form:
My try
<button class="btn btn-primary" type="submit">
<button class="btn btn-default" ng-click="$form.$cancel()" type="button">
I would be thankful for help.
Thanks a lot!
You didnt specify the height with Elements
Css need to be changed:
div[ng-app] { margin: 50px; }
.editable-has-buttons.editable-input { width: 200px; height:100px; text}
.editable-input.btn-sm {width: 10px;}
.editable-controls.form-group{
height:200px;
}
Fiddle for solution:http://jsfiddle.net/NfPcH/10362/
Related
Is there a way to place material icon in an input filed as background at the right?
I know I can place an image as input filed background but material icons are not images and I think these are created by fonts.
this is what I am trying but no luck
<input type="search" class="global-search"
ng-model="vm.searchText"
ng-keyup="$event.keyCode == 13 ? vm.search() : null"
placeholder="I can help you to find anything you want!"/>
<a ng-click="vm.search()">
<i class="material-icons global-search-icon"></i> <!--search-->
</a>
the icon <i class="material-icons global-search-icon"></i> need to be the background image of <input type='text'/>
You can wrap your input and icon in a div:
<div id="divWrapper">
<input type="search" class="global-search"
ng-model="vm.searchText"
ng-keyup="$event.keyCode == 13 ? vm.search() : null"
placeholder="I can help you to find anything you want!"/>
<i class="material-icons global-search-icon"></i>
</div>
And add this styles:
#divWrapper{
display:inline;
position: relative;
}
#divWrapper i {
position: absolute;
left: 0;
}
.global-search:focus + i{
display: none;
}
I have my button which is disabled using ng-disabled, but the button is showing tooltip even when it is disabled, i want to remove tooltip when the button is disabled.
Here is my Button
<button type="button" class="btn btn-default"
personinsuranceid="{{row.entity.PersonInsuranceId}}"
ng-disabled="row.entity.Sequence != 1"
ng-click="$event.stopPropagation(); grid.appScope.AddPlantoCase(row.entity, 1)"
data-toggle="tooltip" title="Add as Primary to case">
1
</button>
Please suggest me a way to remove tooltip.
The tooltip is rendered directly from the browser, that uses the os-settings. So with an button it could be very difficult to hide the tooltip.
Instead of a button you could use a span with ng-click to handle the call and ng-class to do your styling. Do not forget to check in your AddPlantoCase() for the disabled condition and do nothing when it is true.
<span class="btn btn-default"
personinsuranceid="{{row.entity.PersonInsuranceId}}"
ng-click="grid.appScope.AddPlantoCase(row.entity, 1)"
ng-class="{disabled: row.entity.Sequence != 1}"
data-toggle="tooltip" title="Add as Primary to case">
1
<span>
/* CSS */
.disabled {
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
before posting here i searched and searched and i found several solutions for applying tooltips to disabled buttons, anyway none of these was using uib-tooltip from angular ui bootstrap.
Here is the code of my button:
<button class="btn btn-default"
uib-tooltip="My tooltip text"
tooltip-append-to-body="true"
ng-disabled="!isAllSelected"
ng-click="doThat()">Click Here
</button>
Do you know how to make tooltip displayable even when the button is disabled?
Similar to janosch's solution - wrap your button in a div which has the tooltip attribute.
<div uib-tooltip="{{ isDisabled ? 'Button is disabled' : '' }}">
<button disabled="isDisabled">Button</button>
</div>
The tooltip will only be visible when the variable isDisabled is true, which also sets the disabled status of the button.
This solution will also work if you are using the title attribute instead of uib-tooltip
I don't think it's possible on a button, but it works if you use link disguised as a button, instead of a button:
<a class="btn btn-default"
uib-tooltip="My tooltip text"
tooltip-append-to-body="true"
ng-disabled="!isAllSelected"
ng-click="doThat()">Click Here
</a>
Simplest, least intrusive solution to this is:
<a class="btn btn-default"
uib-tooltip="My tooltip text"
tooltip-append-to-body="true"
ng-disabled="!isAllSelected"
ng-click="isAllSelected ? doThat() : null">Click Here
</a>
(notice conditional ng-click, without which clicks will still go through even when anchor is "disabled" - i.e. anchors don't support disabled attribute)
I know this question is several years old however someone might find useful this workaround.
What I did was to wrap the button content in a <span> tag and apply the uib-tooltip to it:
<button type="button" class="btn btn-primary" ng-click="foo()" ng-disabled="true">
<span uib-tooltip="Tooltip text" tooltip-append-to-body="true"> Button text<span>
</button>
If you also need the tooltip to be shown when the user hovers over the whole button area, you can also remove the button padding and add it to the <span> instead.
<button type="button" class="btn btn-primary" ng-click="foo()" ng-disabled="true" style="padding: 0px !important;">
<span uib-tooltip="Tooltip text" tooltip-append-to-body="true" style="display:inline-block; padding: 5px 10px;"> Button text<span>
</button>
Irrespective of button being enabled or disabled, I am getting the uib tool tip. The below code is working fine for me.
<button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" ng-disabled = "true" uib-tooltip="After today restriction" >Min date</button>
Please see this plunker
Added screenshot of tooltip
Additional notes: You can also configure the position of tooltip. All you need to do is to take the help of $uibTooltipProvider. We can then use config section to achieve the result. Below code is included in the plunker.
angular.module('ui.bootstrap.demo')
.config(['$uibTooltipProvider', function ($uibTooltipProvider) {
$uibTooltipProvider.options({
'placement':'bottom'
});
}])
I'm simply trying to make an image clickable and execute function.
Here is my code:
<button class="button button-stable button-clear" on-click="myFunction()">
<img src="image.png" >
</button>
But the function is not executing on the click event.
With angular you should use ng-click.
try ng-click="myFunction()"
you can do
<img src="image.png" ng-click="myFunction()" />
try put ng-click in <img>
For example
<img class="button " ng-src="{{i.imagem}}" ng-click="myFunction($index)"></img>
What you are looking for is event binding in Angular. Read more about this from Angular documentation.
<img [src]="yourVariable" (click)="yourFunction()">
You don't have to. With a little extra markup you can do this.
Wrap image in label
set for to a hidden button id
run js on button click
Doing this will be a more accessible solution for people with disabilities.
Use this html.
<!--html-->
<label for="image-click">
<img src="http://lorempixel.com/100/100" alt="" />
</label>
<button id="image-click"
onclick="myFunction()"
class="visuallyhidden">
Click to run image
</button>
And add some css.
//css
.visuallyhidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}
label {
cursor: pointer;
}
Here is a codepen that shows how - http://codepen.io/bitlinguist/pen/bEJvoz
You can just as easily adopt this approach with angular directives.
I want to hide only clear button from datepicker directive in angular js.
Currently there are three buttons at the bottom of the angular js datePicker directive(Today, clear and Close), Is there any way to make visibility of these buttons configurable, such that i can hide one of the buttons out of it.
The Date picker which i am using is using ui-bootstrap library.
Currently there is now way to hide individual buttons in the datepicker button bar via options on the directive. You can override the template and remove the clear button, but that is a global patch and doesn't offer hiding/showing based on a condition. You could create a class that targets the button you want to hide as this plunk
.datepicker-noclear [ng-click="select(null)"] {
display: none;
}
demonstrates although that is a fragile workaround.
I would suggest submitting a feature request to add the option of which buttons are available in the button bar.
Easy, replace the template:
<script type="text/ng-template" id="template/datepicker/popup.html">
<ul class="dropdown-menu" ng-if="isOpen" style="display: block" ng-style="{top: position.top+'px', left: position.left+'px'}" ng-keydown="keydown($event)" ng-click="$event.stopPropagation()">
<li ng-transclude></li>
<li ng-if="showButtonBar" style="padding:10px 9px 2px">
<span class="btn-group pull-left">
<button type="button" class="btn btn-sm btn-info" ng-click="select('today')" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
</span>
<button type="button" class="btn btn-sm btn-success pull-right" ng-click="close()">{{ getText('close') }}</button>
</li>
</ul>
</script>
You hack with css. It worked for me.
.ui-datepicker .btn-group .btn-danger.btn{
display: none;
}
Further to Rob J's solution, if we add a ng-class={"require": "vm.required"} to the parent div of the datepicker input, or simply add a class called require to the div. Then use the magic css to hide or show the clear button depending on the value of vm.required:
.require button[ng-click^="select(null)"] {
display: none;
}
if you want to remove the clear button, it means that the field is required, and as I do not agree with forcing things (like creating a div parent and typing classes), then just set the element for which you active the datepicker as required
[uib-datepicker-popup][required] + [uib-datepicker-popup-wrap] button[ng-click*="select(null"] {
display: none;
}
<input type="text" ng-model="datePicker.date" uib-datepicker-popup="dd MMM yyyy" readonly is-open="datePicker.opened" ng-click="datePicker.opened = true" required />
You can do this css trick to hide the clear button :
.uib-button-bar > .btn-group > .btn-danger {
display: none !important;
}
You can hide it by adding to style.css this :
.uib-clear {
display: none;
}