Keep size of button stable when button text changes - html

I have a bootstrap button:
<div class="float-right" >
<label>show as </label>
<input class="btn btn-outline-primary rounded active" type="button" value="percentage" onclick="toggle(this)" />
</div>
which I toggle the text using:
<script type="text/javascript">
function toggle(button) {
if(button.value=="percentage") {
button.value="units";
} else {
button.value="percentage";
}
}
</script>
How to I get the button not to resize when the text is changed from the longer word percentage to the shorter word units. i.e. I want the button to remain the same size as it is when it has the text percentage.
Note I would rather not hardcode the size using style="min-width: 120px;".

I would recommend using javascript.
One of the options:
<div class="float-right" >
<label>show as </label>
<input class="btn btn-outline-primary rounded active" type="button" value="percentage" onclick="toggle(this)" />
</div>
<script type="text/javascript">
function toggle(button) {
const buttonWidth = button.offsetWidth;
if(button.value=="percentage") {
button.value="units";
button.style.width = `${buttonWidth}px`;
} else {
button.value="percentage";
}
}
</script>

Related

run click function before submiting default again in jquery

im trying to prevent the default action on a button then run my function and after my function is done then run default again, however i dont know how to build my jquery correctly.
here is what i have
/* somewhere else .with--abo class does something that prevents my click function from working */
/* so now when ever i click it i prevent it from running default before my click function */
$(".with-abo").click(function(event) {
event.preventDefault()
$("#sure").click();
$(".table--add-product").submit();
});
$("#sure").click(function(){
$("#confirm").toggleClass("is--hidden");
$("#twpConfirm").click();
});
$("#twpConfirm").click(function(){
alert("deleted")
});
#confirm{
color:red;
}
.is--hidden {
display: none !important;
}
#sure{
margin-top: 10px;
background-color:red;
width:40px;
border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" title="Sdsd" class="table--add-product add-product--form block-group">
<input type="hidden" name="twpAboAdd" value="1">
<button type="submit" class="btn with-abo is--primary block is--icon-right">
add item to subscription
<i class="icon--arrow-right"></i>
</button>
<input type="hidden" name="__csrf_token" value="iSTHZQdHHpP5iCcNM0u6NvPPHroipp"></form>
<div id="sure" class="btn is--small column--actions-link" title="">
<i class="icon--cross">delete item</i>
</div>
<div class="panel--td column--actions">
<div id="sure" class="btn is--small column--actions-link" title="">
<i class="icon--cross"></i>
</div>
<div id="confirm" class="is--hidden">
<span>
are you sure?
<button id="twpConfirm" type="submit" class="btn column--actions-link">
<i class="icon--check"></i>delete
<input type="hidden" name="noSurcharge" value="1">
</button>
</span>
</div>
<input type="hidden" name="__csrf_token" value="iSTHZQdHHpP5iCcNM0u6NvPPHroipp">
</div>
basically when i click [add item to subscription] i want to automatically click the [delete] button. but how my function is built i trigger the click and then run default again before my trigger function is done.
i was hoping that something like this would work:
$(".with-abo").click(function(event) {
event.preventDefault()
$("#sure").trigger("click", function(){
$("#confirm").toggleClass("is--hidden");
$("#twpConfirm").click();
});
$(".table--add-product").submit();
});
but this is so wrong and dont know how go around it. any suggestion is appreciated.

Focus on timepicker instead of modal window

My modal window is blocking my time picker on Angular
Component.ts
open() {
const amazingTimePicker = this.atp.open();
amazingTimePicker.afterClose().subscribe(time => {
console.log(time);
});
}
// Triggering the modal window
createApplication(content) {
this.modalService.open(content, {centered: true, size: 'lg'});
}
Modal html
<ng-template #create let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Job Application</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form #createApplicationForm="ngForm" (ngSubmit)="createApplicationForm.form.valid && createForm(createApplicationForm)" >
<div class="form-group">
<div class="input-group">
<input class="form-control" id="preferredContactDate" name="preferredContactDate"
[(ngModel)]="newApplicationFormDateModel" ngbDatepicker #preferredContactDate="ngbDatepicker">
<div class="input-group-append">
//Open time picker here
<button class="btn btn-secondary" (click)="open()"
type="button"></button>
</div>
</div>
</div>
<div class="modal-footer">
<!-- Submit button -->
<input class="btn btn-dark" type="submit" value="Create" />
<button type="button" class="btn btn-dark" (click)="modal.dismiss('Cross click')">Cancel</button>
</div>
</form>
</div>
</ng-template>
However, when i do this, the time picker gets blocked by the modal.
Any ideas?
Stackbliz for timepicker - https://stackblitz.com/edit/amazing-timepicker-example
Referenced to: https://www.npmjs.com/package/amazing-time-picker
Modal: https://ng-bootstrap.github.io/#/components/modal/examples
Update based on answer:
<div class="time-picker">
<input atp-time-picker value="19:00"/>
</div>
CSS
.time-picker {
position:absolute;
z-index : 99999999;
}
.my-custom-class{
z-index: 900;
}
I also tried inline style as well
<input style= "z-index: 99999999;" atp-time-picker value="19:00"/>
We need to get the bootstrap's z-index dynamically and increment it with some arbitrary number and set to the time-picket something like below:
$(document).on('show.bs.modal', '.modal', function (event) {
const zIndex = 1045 + (10 * $('.modal:visible').length);
// this zIndex can be assigned to the time-picker
$(this).css('z-index', zIndex);
setTimeout(function () {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
});
you can specify a custom class for the modal to overwrite the z-index.
example:
in your js/ts:
this.modalService.open(content, {backdropClass: 'my-custom-class'});
css:
.my-custom-class{
z-index: 900;
}
Your issue is similar to the one mentioned here : https://github.com/owsolutions/amazing-time-picker/issues/129
The proposed solution, as think win win explained, was to increase the timepicker's z-index :
time-picker {
position:absolute;
z-index : 99999999;
}

Angularjs bootstrap tooltip is not working properly

I am using AngularJS bootstrap tooltip. tooltip placement by default it is taking top. If I set the placement as "top", "bottom", "right", " left" it is working as per the selected value.
For My Case :
I need tooltip only for left and right.
If I set right, when it will reach end of rightside in screen, the tooltip is hiding.
Same as if i select as "left", when it will first in left hand side, that particular tooltip is hiding.
My requirement is, If it will reach right edge, automatically it should come left, same as left side also.
If I come down, it should visible on top, same as top also.
The conclusion is , it should be auto responsive.
Plunker
js/angular:
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope, $sce) {
$scope.dynamicPopover = {
content: 'Hello, World!',
templateUrl: 'myPopoverTemplate.html',
title: 'Title'
};
$scope.placement = {
options: [
'top',
'top-left',
'top-right',
'bottom',
'bottom-left',
'bottom-right',
'left',
'left-top',
'left-bottom',
'right',
'right-top',
'right-bottom'
],
selected: 'top'
};
$scope.htmlPopover = $sce.trustAsHtml('<b style="color: red">I can</b> have <div class="label label-success">HTML</div> content');
});
Html:
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="PopoverDemoCtrl">
<h4>Dynamic</h4>
<div class="form-group">
<label>Popup Text:</label>
<input type="text" ng-model="dynamicPopover.content" class="form-control">
</div>
<div class="form-group">
<label>Popup Title:</label>
<input type="text" ng-model="dynamicPopover.title" class="form-control">
</div>
<div class="form-group">
<label>Popup Template:</label>
<input type="text" ng-model="dynamicPopover.templateUrl" class="form-control">
</div>
<button uib-popover="{{dynamicPopover.content}}" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Dynamic Popover</button>
<button uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Popover With Template</button>
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>{{dynamicPopover.content}}</div>
<div class="form-group">
<label>Popup Title:</label>
<input type="text" ng-model="dynamicPopover.title" class="form-control">
</div>
</script>
<hr />
<h4>Positional</h4>
<div class="form-group">
<label>Popover placement</label>
<select class="form-control" ng-model="placement.selected" ng-options="o as o for o in placement.options"></select>
</div>
<button popover-placement="{{placement.selected}}" uib-popover="On the {{placement.selected}}" type="button" class="btn btn-default">Popover {{placement.selected}}</button>
<hr />
<h4>Triggers</h4>
<p>
<button uib-popover="I appeared on mouse enter!" popover-trigger="'mouseenter'" type="button" class="btn btn-default">Mouseenter</button>
</p>
<input type="text" value="Click me!" uib-popover="I appeared on focus! Click away and I'll vanish..." popover-trigger="'focus'" class="form-control">
<hr />
<h4>Other</h4>
<button popover-animation="true" uib-popover="I fade in and out!" type="button" class="btn btn-default">fading</button>
<button uib-popover="I have a title!" popover-title="The title." type="button" class="btn btn-default">title</button>
<button uib-popover="I am activated manually" popover-is-open="popoverIsOpen" ng-click="popoverIsOpen = !popoverIsOpen" type="button" class="btn btn-default">Toggle popover</button>
<button uib-popover-html="htmlPopover" class="btn btn-default">HTML Popover</button>
<button uib-popover-html="'<b>HTML</b>, <i>inline</i>'" class="btn btn-default">HTML Popover (inline)</button>
</div>
</body>
</html>
Can anyone please help me how can I do this?

How to do button parallel

I tried so many ways to parallel for those two buttons.Two buttons are parallel if I remove html.beginform. My problem is that I can't remove html.beginform. Please show me the right direction.
html code:
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6">
#using (Html.BeginForm("ExportExcel", "SalesByBranch", FormMethod.Post#*, new { enctype = "multipart/form-data" }*#))
{
<input type="submit" value="Excel" id="btnExcel" class="btn btn-danger btn-sm form-control" onclick=DataCheck(); style="width:80px;height:30px;" />
}
#using (Html.BeginForm("ExportPDF", "SalesByBranch", FormMethod.Post#*, new { enctype = "multipart/form-data" }*#))
{
<input type="submit" value="PDF" id="btnPDF" class="btn btn-danger btn-sm form-control" onclick=DataCheck(); style="width:80px;height:30px;" />
}
</div>
</div>
Photo
Please reply me.
Wrap the buttons inside a div with the following style:
display: inline-block;
So? http://jsfiddle.net/3aowjLc1/
display:inline block
You must add agin your "script".

Button alignment relative to button inside of another controller

I have two buttons inside separate controllers.
<div ng-controller="aCtrl">
<button class="addButton" ng-click="toggle()"> Add </button>
<form ng-hide="myVar" ng-submit="submit()">
<input ......
<input ......
</form>
</div>
<div ng-controller="bCtrl">
<button class="EditButton" ng-click="toggle()"> Add </button>
<form ng-hide="myVar" ng-submit="submit()">
<input ......
<input ......
</form>
</div>
Note: Toggle just switches the hide/show bool in the back-end
As you can see when clicking the Addbutton it will show the form for aCtrl and EditButton for bCtrl. The result of the current layout is when Add Buttons form expands it pushes the EditButton down. I don't think this can be fixed with CSS as its the logical flow of the HTML.
I am looking for solutions that would allow me to have the buttons at the top in the flow of the page then the forms below.
for example I tried:
<button ng-controller="aCtrl" class="EditButton" ng-click="toggle()"> Add </button>
<button ng-controller="bCtrl" class="addButton" ng-click="toggle()"> Add </button>
<div ng-controller="aCtrl">
<form ng-hide="myVar" ng-submit="submit()">
<input ......
<input ......
</form>
</div>
<div ng-controller="bCtrl">
<form ng-hide="myVar" ng-submit="submit()">
<input ......
<input ......
</form>
</div>
Which doesn't seem to work.
The problem is that ng-hide hides the content with a display: none that causes the space occupied by the element to collapse.
You need visibility: hidden that also hides the element, but keeps the space.
Therefore, use ng-class instead of ng-hide:
<div ng-controller="aCtrl">
<button class="addButton" ng-click="toggle()"> Add </button>
<form ng-class="{ 'hidden' : myVar }" ng-submit="submit()">
<input ......
<input ......
</form>
</div>
<div ng-controller="bCtrl">
<button class="EditButton" ng-click="toggle()"> Add </button>
<form ng-class="{ 'hidden' : myVar }" ng-submit="submit()">
<input ......
<input ......
</form>
</div>
and the CSS
.hidden {
visibility: hidden;
}
Here is a live sample:
var myApp = angular.module('myApp',[]);
function aCtrl($scope) {
$scope.myVar = true;
$scope.toggle = function () {
$scope.myVar = !$scope.myVar;
}
}
function bCtrl($scope) {
$scope.myVar = true;
$scope.toggle = function () {
$scope.myVar = !$scope.myVar;
}
}
.hidden {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="myApp">
<div ng-controller="aCtrl">
<button class="addButton" ng-click="toggle()"> aCtrl.Add </button>
<form ng-class="{ 'hidden' : myVar }" ng-submit="submit()">
<input type="text" value="aCtrl.form">
</form>
</div>
<div ng-controller="bCtrl">
<button class="EditButton" ng-click="toggle()"> bCtrl.Add </button>
<form ng-class="{ 'hidden' : myVar }" ng-submit="submit()">
<input type="text" value="bCtrl.form">
</form>
</div>
</section>
As you can see, the bCtrl.Add button remains in place, regardless whether aCtrl.form is visible or not.
It can be done via css only, just wrap the two in a div with position: relative and then add position:absolute to addButton and editButton together with top/left/right positioning values.
<div class="formContainer">
<div ng-controller="aCtrl">
<button class="addButton" ng-click="toggle()"> Add </button>
<form ng-hide="myVar" ng-submit="submit()">
<h1>Add form</h1>
<input type="text">
<input type="text">
</form>
</div>
<div ng-controller="bCtrl">
<button class="editButton" ng-click="toggle()"> Edit </button>
<form ng-hide="myVar" ng-submit="submit()">
<h1>Edit form</h1>
<input type="text">
<input type="text">
</form>
</div>
</div>
and css:
.formContainer {
position: relative;
width: 200px;
padding-top: 30px;
}
.addButton {
position: absolute;
top: 0;
right: 40px;
}
.editButton {
position: absolute;
top: 0;
right: 0;
}
Here's a working demo: Plunker CSS Only
There's another way, put them in a parent controller, which would hold the logic for toggling between the forms and then each form have their own controller for their respective functionalities.
Here's a working demo of the second version: Plunker with parent Controller
Here is example as u mentioned in your post. u can keep button outside of your controllers
var myApp = angular.module('myApp',[]);
myApp.controller('aCtrl', ['$scope', function ($scope) {
$scope.myVar = true
}]);
myApp.controller('bCtrl', ['$scope', function ($scope) {
$scope.myVar = true;
}]);
function getscope(ctrlName) {
var sel = 'div[ng-controller="' + ctrlName + '"]';
return angular.element(sel).scope();
}
function showForm(ctrlName) {
var $scope = getscope(ctrlName);
$scope.myVar = !$scope.myVar;
$scope.$apply();
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<section ng-app="myApp">
<button class="addButton" onclick="showForm('aCtrl')"> aCtrl.Add </button>
<button class="EditButton" onclick="showForm('bCtrl')"> bCtrl.Add </button>
<div ng-controller="aCtrl">
<form ng-hide="myVar" ng-submit="submit()">
<input type="text" value="aCtrl.form">
</form>
</div>
<div ng-controller="bCtrl">
<form ng-hide="myVar" ng-submit="submit()">
<input type="text" value="bCtrl.form">
</form>
</div>
</section>
Is having two controllers is your requirement ?
You can have a separate controller of the button for eg. btnCtrl and toogle the value using a $rootscope variable. As follows.
<button ng-controller="btnCtrl" class="EditButton" ng-click="toggle()"> Add </button>
<button ng-controller="btnCtrl" class="addButton" ng-click="toggle()"> Add </button>
<div ng-controller="aCtrl">
<form ng-hide="$root.myVar" ng-submit="submit()">
<input ......
<input ......
</form>
</div>
<div ng-controller="bCtrl">
<form ng-hide="$root.myVar" ng-submit="submit()">
<input ......
<input ......
</form>
</div>