Move buttons below each other in popup using ionicPopup.show - javascript

I've created this popup using
$ionicPopup.show({
title: 'Choose Location...',
buttons:[
{
text: "Current Location",
type: 'button-positive',
onTap: function(){
$scope.myLocation();
}
},
{
text: "Previous Locations",
type: 'button-positive',
onTap: function(){
$state.go('menu.listSelect');
//go to choose location page
}
},
{
text: "Address Book",
type: 'button-positive',
onTap: function(){
//go to address book
}
},
{
text: "Cancel",
type: 'button-positive',
onTap: function(){
console.log('cleek');
$scope.fillOptionPopup.close();
}
},
]
});
};
This places the buttons created next to each other like so
Is there a way to make the buttons so they stretch across the width of the popup and each button is on a new line using that format of creating buttons for the popups?
I've used this code in place of the buttons array and it gives me this, which is what I want. But the ng-click isn't calling the functions that I made out of the ontap's from the array.
template: '<button class="button button-positive" ng-mousedown="goMyLocation()">Current Location</button><br>'+
'<button class="button button-positive" ng-mousedown="goMenuList()">Previous Locations</button><br>'+
'<button class="button button-positive" ng-mousedown="goAddressBook()">Address Book</button><br>'+
'<button class="button button-positive" ng-mousedown="closePopup()">Close</button>'
Is there a way to get the buttons to be one per row and a full width of the popup?

There actually another option that I find "cleaner".
In the object passed to the show method you can also define a css class for the popup, so you can use it to override the default ionic styles.
Specifically for your use case:
.popup-vertical-buttons button
{
min-width: 100%;
margin-bottom: 5px;
}
.popup-vertical-buttons .popup-buttons
{
display: block;
}
and in the object use pass to the show method add:
cssClass: "popup-vertical-buttons"

For anyone interested, this is how I did it...
Before the buttons property, add cssClass: 'popup-vertical-buttons' so that it looks something like this:
$ionicPopup.show({
tite: 'Some Title',
cssClass: 'popup-vertical-buttons',
buttons: [
...
]
});
Then in your CSS add these two lines:
.popup-vertical-buttons .popup-buttons {
display: block;
}
.popup-vertical-buttons .popup-buttons .button{
display:block;
min-width: 100% !important;
}

Ok, now that I read the entire question I can help you. The first code snippet will never do what you want without modifying the popup CSS because of the default popup layout
In order for the second layout to work (using the template) you need to pass the scope parameter to your popup, so the buttons are linked to the scope holding the functions
https://ionicframework.com/docs/v1/api/service/$ionicPopup/

Related

Kendo UI inline editing: How to hide a button when other one is clicked

I have a Kendo UI grid with inline editing. I need to hide update button when edit is clicked.
{
command: [
{ name: "edit" },
{
name: "update",
click: function (e) {
savedata();
},
},
{ name: "destroy" }
],
title: " ",
width: 140,
attributes: { style: "text-align: center; color:Blue" },
},
I dont think that kendo from box have that behavior.
What can you do:
In edit command add onClick handler where you will hide other buttons:
in event arguments e there always some grid row data using which you can find current row with selector or may be just using closest
Update button in kendo always have class k-grid-update, find it and hide

Bootstrap bootbox overlay

I am using bootbox plugin for my application.
http://bootboxjs.com/
Something like this
bootbox.dialog({
message: "I am a custom dialog",
title: "Custom title",
buttons: {
success: {
label: "Success!",
className: "btn-success",
callback: function() {
Example.show("great success");
}
},
danger: {
label: "Danger!",
className: "btn-danger",
callback: function() {
Example.show("uh oh, look out!");
}
},
main: {
label: "Click ME!",
className: "btn-primary",
callback: function() {
Example.show("Primary button");
}
}
}
});
The problem what i have is that is modal is opened and something dynamically is added to message when modal is opened, it goes down of the page, but opacity element black stay the same?
Please check picture with a problem i have :(
This is more of a Bootstrap Modal issue than Bootbox specifically.
The cleanest solution is to constrain the content of your modal, rather than try to override how Bootstrap's overlay works. So, here's an example jsFiddle with a lot of content: https://jsfiddle.net/17jLxr2n/
If we add a simple CSS ruleset to our container, we can easily constrain the modal to a usable size, as shown in the updated fiddle:
.dynamic-modal-content
{
max-height: 300px;
overflow: auto;
}
The selector you use should be whatever container your dynamic content is returned with.

Add Custom button at end of fields in Jquery - jTable Create/Update mode like submit button

At jquery- jTable we can have some fields and actions . I need Other button [possible at end of page] near by Jquery JTable button("Submit" button) that after on Click , run another function . so
this is my code :
$('#RequestSubmitDiv').jtable({
title: 'newRec',
paging: false,
sorting: false,
selecting:false;
selectingCheckBoxes:false,
selectOnRowClick:false,
jqueryuitheme:true,
formCreated:function(event,data){
data.form.validationEngine();
},
formSubmitting:function(event,data){
...
...
},
formClode: function(d,e){...} ,
actions: {
createAction: '/Adminsec/ManageAssets.aspx/CreateOrUpdate',
//---not need below
//listAction: '/Adminsec/ManageAssets.aspx/List',
//updateAction: '/Adminsec/ManageAssets.aspx/CreateOrUpdate',
//deleteAction: '/Adminsec/ManageAssets.aspx/Deletes'
//-!!---Other Button and Action Need ---!!
CustomAction:{
title:'RefreshNew',
sorting:false,
create:false,
edit:false ,
list:false ,
display:function(data){
return '<input type='button' id='MyBtn' onclick='Call_Mehod();>';
}
}
},
fields: {
ID {title:'pk',type:'textarea'} ,
RequestNO{type:'textarea'},
description{type:'textarea'}
}
});
How can i add some button to Jquery- Jtable and call function ?
these buttons don't repeat at rows or column , i mean it should be One instance after fields scope.
Maybe I misunderstood but if you want to add a button on each row, you can use display property of the field. I created a dummy field and added the display property. Somthing like this:
...
Other: {
title: 'Other',
display: function (data) {
return '<b>test</b>';
},
create: false,
edit: false
}
...
However, if you wanted to add a general feature (i.e. single button for the table) , you can take a look at the toolbar property.
I did as follow. The tag <button> and class="jtable-command-button" are always required. The next step is your class for icon and finally the event.
actions: {
title: 'Actions',
width: '1%',
sorting: false,
create: false,
edit: false,
list: true,
display: function (data) {
if (data.record) {
// This if you want a custom edit action.
return '<button title="Edit" class="jtable-command-button jtable-edit-command-button" onclick="alert(' + data.record.id + '); return false;"><span>Edit</span></button>';
}
}
}

Sencha Touch 2: How to override back button on Navigation View

I was wondering how to ovverride the back button on a navigation view. I tried using onBackButtonTap but it doesnt seem to work http://www.senchafiddle.com/#8zaXf
var view = Ext.Viewport.add({
xtype: 'navigationview',
onBackButtonTap: function () {
alert('Back Button Pressed');
},
//we only give it one item by default, which will be the only item in the 'stack' when it loads
items: [
{
//items can have titles
title: 'Navigation View',
padding: 10,
//inside this first item we are going to add a button
items: [
{
xtype: 'button',
text: 'Push another view!',
handler: function() {
//when someone taps this button, it will push another view into stack
view.push({
//this one also has a title
title: 'Second View',
padding: 10,
//once again, this view has one button
items: [
{
xtype: 'button',
text: 'Pop this view!',
handler: function() {
//and when you press this button, it will pop the current view (this) out of the stack
view.pop();
}
}
]
});
The fiddle you've mentioned works well in my local project on my machine. For some reason, it doesn't work on fiddle site. Try running it on your local project.
Still instead of using onBackButtonTap config, it's good to extend Ext.navigation.View class and override onBackButtonTap method. That way you'll have more control over whole components. You'd also like to override other configs as well. Here's what I'd use -
Ext.namespace('Ext.ux.so');
Ext.define('Ext.ux.so.CustomNav',{
extend:'Ext.navigation.View',
xtype:'customnav',
config:{
},
onBackButtonTap:function(){
this.callParent(arguments);
alert('back button pressed');
}
});
the line this.callParent(arguments) will allow component to behave in default way + the way to wanted it to behave. And if you want to completely override the back button behavior you can remove this line. Try doing both ways.
To use this custom component, you can use -
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
var view = Ext.create('Ext.ux.so.CustomNav', {
fullscreen: true,
items: [{
title: 'First',
items: [{
xtype: 'button',
text: 'Push a new view!',
handler: function() {
//use the push() method to push another view. It works much like
//add() or setActiveItem(). it accepts a view instance, or you can give it
//a view config.
view.push({
title: 'Second',
html: 'Second view!'
});
}
}]
}]
});
}
Give this a shot. It'll work for you yoo.

ExtJS buttons won't accept "id" config parameter?

I need specific IDs on ExtJS generated window buttons, but I'm having trouble specifying the ID. The documentation claims that this should be possible, but I still get an autogenerated id when I specify my own.
What gives?
dialog = new Ext.Window({
closeAction:'hide',
plain: true,
buttons: [
{
id: 'my-dialog',
text: 'Done',
handler: function() {
dialog.hide();
}
}
],
items:new Ext.Panel({
applyTo:'add-document-popup-panel'
}),
title: 'Add Documents',
layout: 'fit',
resizable: false,
draggable: false,
width: 300,
height: 300,
modal: true
});
}
dialog.show(this);
Check this topic: http://www.sencha.com/forum/showthread.php?24433-CLOSED-Cannot-assign-id-to-button-extjs-bug
The id of the container of the button is set, not the HTML button itself.
The id you specify is assigned to the button component (specific to extjs) and not necessarily to the underlying html button.
Does Ext.getCmp('my-dialog') successfully return the extjs button component?
The ID is set, but not on the actual button element. One of the containers is set with the correct id, and you can probably key off of this to get at whatever you need.
I had the same problem and I confirm:
The ID is set in the button's TABLE container.
Ext.getCmp('my-button') returns the extjs button component (object with xtype="button" and id="my-button").

Categories