How can I change jconfirm-buttons style craftpip/jquery-confirm - javascript

jquery-confirm version: v3.3.0 git:craftpip/jquery-confirm
jsfiddle for tests https://jsfiddle.net/bdtx2ub2/
<div class="jconfirm-buttons">
<button type="button" class="btn btn-info btn-block">Update</button>
<button type="button" class="btn btn-danger btn-block">Delete</button>
<button type="button" class="btn btn-default btn-block">Cancel</button>
</div>
Can you help me... how can I add to div with class jconfirm-buttons my class? Is there are any solution like columnClass or btnClass for this div?
I want to justify my buttons in this div by adding bootstrap class btn-block to make div justified
<div class="jconfirm-buttons btn-block">
<button type="button" class="btn btn-info btn-block">Update</button>
<button type="button" class="btn btn-danger btn-block">Delete</button>
<button type="button" class="btn btn-default btn-block">Cancel</button>
</div>
Before
What I want to do
How can I do this? Is there are any solution without javascript? Or how can I do it with js (thinking that I can justify them binding this javascript on event "onOpen")?

Here jsfiddle link. This solution not good but still work.
onOpenBefore:function(){
this.buttons.close.el[0].parentNode.className+=" btn-block";
},

Related

Set two buttons in the same column with space using angular JS Boostrap

In my website I am trying to create two buttons in same column. I want set some space between these two buttons. I am very new in this programing language. I tried all the way I have seen from web. I could not succedd to do that. Here is the piece of my code where I am trying to create two buttons
<div class="form-group">
<div class="col-md-12" >
<button
class="btn btn-primary pull-right"
translate="TECHNICAL_DETAILS"
ng-click="$ctrl.techDetails(conflict)"
></button>
<button
class="btn btn-primary pull-right"
ng-if="$ctrl.isConflictEditable(conflict)"
translate="RESOLVE_CONFLICT"
ng-disabled="!conflict.active"
ng-click="$ctrl.editConflict(conflict)"
></button>
<button
class="btn btn-primary pull-right"
ng-if="!$ctrl.isConflictEditable(conflict)"
translate="RESOLVE_CONFLICT_NOW"
ng-disabled="!conflict.active"
ng-click="$ctrl.resolveConflict(conflict)"
></button>
</div>
</div>
You're using BOOTSTRAP classes and buttons are showing in a single row. You can insert the buttons in different sections and use the available classes to align two sections.
<div class="form-group">
<div class="col-md-2" id="firstBtnSection">
<button class="btn btn-primary pull-right" translate="TECHNICAL_DETAILS" ng-click="$ctrl.techDetails(conflict)"></button>
</div>
<div class="col-md-6 col-md-offset-2" id="secondBtnSection">
<button class="btn btn-primary pull-right" ng-if="$ctrl.isConflictEditable(conflict)" translate="RESOLVE_CONFLICT" ng-disabled="!conflict.active" ng-click="$ctrl.editConflict(conflict)"></button>
<button class="btn btn-primary pull-right" ng-if="!$ctrl.isConflictEditable(conflict)" translate="RESOLVE_CONFLICT_NOW" ng-disabled="!conflict.active" ng-click="$ctrl.resolveConflict(conflict)"></button>
</div>
</div>
Or you can add some margin for "secondBtnSection" div element.
As I see, you are using bootsrtap. So, you could add a class mr-3 to first and second button, and it would add some margin between buttons

Changing button classes in Angular UI Datepicker

In this plunk I have an Angular UI Datepicker that uses a template. I need to change the colors of the "Today", "Clear" and "Close" buttons but changing them in popup.html doesn't work. It should show gray, orange and blue buttons.
I changed from
<li ng-if="showButtonBar" class="uib-button-bar">
<span class="btn-group pull-left">
<button type="button" class="btn btn-sm btn-info uib-datepicker-current" ng-click="select('today', $event)" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
<button type="button" class="btn btn-sm btn-danger uib-clear" ng-click="select(null, $event)">{{ getText('clear') }}</button>
</span>
<button type="button" class="btn btn-sm btn-success pull-right uib-close" ng-click="close($event)">{{ getText('close') }}</button>
</li>
to
<li ng-if="showButtonBar" class="uib-button-bar">
<span class="btn-group pull-left">
<button type="button" class="btn btn-sm btn-default uib-datepicker-current" ng-click="select('today', $event)" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
<button type="button" class="btn btn-sm btn-warning uib-clear" ng-click="select(null, $event)">{{ getText('clear') }}</button>
</span>
<button type="button" class="btn btn-sm btn-primary pull-right uib-close" ng-click="close($event)">{{ getText('close') }}</button>
</li>
Note that I changed the button class names to change the color, but when I inspect in the browser, the datepicker is still using the old classes. How to fix this?
To set a custom popup template use datepicker-popup-template-url attribute, for example:
<input datepicker-popup-template-url="popup.html" type="text" class="form-control" is-open="true" ng-model="dt" uib-datepicker-popup="MM-dd-yyyy"
datepicker-options="dateOptions" close-text="Close" popup-placement="bottom-left" on-open-focus="false" />
Demo

Bootstrap Container & Container Fluid have an issue

I am using Bootstrap 3.3.7.
I have used and to add content to the page.
When I use container-fluid, it will not span the content across the page but will limit the size to the page center area.
The same thing happened when I used container. It spans to the outside of the page> My screen resolution is 1366 x 768.
This is the code I have used
<div class="container">
<h4>Bootstrap Buttons</h4>
<!-- The Large size buttons -->
<p>
<button type="button" class="btn btn-default btn-lg">Default</button>
<button type="button" class="btn btn-primary btn-lg">Primary</button>
<button type="button" class="btn btn-success btn-lg">Success</button>
<button type="button" class="btn btn-info btn-lg">Info</button>
<button type="button" class="btn btn-warning btn-lg">Warning</button>
<button type="button" class="btn btn-danger btn-lg">Danger</button>
<button type="button" class="btn btn-link btn-lg">Link</button>
</p>
<!-- The default size buttons -->
<p>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</p>
<!-- The small size buttons -->
<p>
<button type="button" class="btn btn-default btn-sm">Default</button>
<button type="button" class="btn btn-primary btn-sm">Primary</button>
<button type="button" class="btn btn-success btn-sm">Success</button>
<button type="button" class="btn btn-info btn-sm">Info</button>
<button type="button" class="btn btn-warning btn-sm">Warning</button>
<button type="button" class="btn btn-danger btn-sm">Danger</button>
<button type="button" class="btn btn-link btn-sm">Link</button>
</p>
<!-- The small size buttons -->
<p>
<button type="button" class="btn btn-default btn-xs">Default</button>
<button type="button" class="btn btn-primary btn-xs">Primary</button>
<button type="button" class="btn btn-success btn-xs">Success</button>
<button type="button" class="btn btn-info btn-xs">Info</button>
<button type="button" class="btn btn-warning btn-xs">Warning</button>
<button type="button" class="btn btn-danger btn-xs">Danger</button>
<button type="button" class="btn btn-link btn-xs">Link</button>
</p>
<!-- Bootstrap container & container-fluid -->
<!-- Bootstrap container example -->
<div class="container bootcontainer">
<h1>Hello, world! - Using Container</h1>
</div>
<!-- Bootstrap container-fluid example -->
<div class="container-fluid bootcontainerfluid">
<h1>Hello, world! - Using Container Fluid</h1>
</div>
This is the container that contains the other ones, so:
<!--Bootstrap Modal (Dialog Box / Pop-up Window) Example-->
<div class="container-fluid">
...
Then replace container with container-fluid everywhere you need it, worked for me.
I found the answer. Actually it's an HTML break. I hadn't put the <div> tag after declaring the 'Bootstrap Button Example'.
Thanks anyway!
Regards,
Chiranthaka

bootstrap popover with reactjs (JSX)

I am trying to use bootstraps popover button with html inside it, but I get Unexpected token errors when building the JSX.
Here is what I want to do in JSX:
<button type="button" className="btn btn-secondary" data-container="body"
data-toggle="popover" data-placement="bottom"
data-content="<button type="button" className="btn btn-danger pull-xs-left" data-dismiss="modal">Delete</button>">
data-html="true"
Popover on bottom
</button>
But react doesn't like building data-content:
data-content="<button type="button" className="btn btn-danger pull-xs-left"
Throws: Unexpected token
> 1265 | data-content={"<button type="button" className="btn btn-danger pull-xs-left" data-dismiss="modal">Delete</button>"}>
| ^
How do I get around this? I'd like to not use jquery preferably.
There is nested ' " ',you need to use this way
<button type="button" className="btn btn-secondary" data-container="body"
data-toggle="popover" data-placement="bottom"
data-content='<button type="button" className="btn btn-danger pull-xs-left" data-dismiss="modal">Delete</button>'
data-html="true"
Popover on bottom

Differentiate between group of buttons

Is it possible to differentiate between a group of buttons? Given the following buttons.
<div id="slideout_inner">
<h2>Select Size</h2>
<p id="group1">
<button type="button" class="btn btn-primary btn-lg">Small $2.50</button>
<button type="button" class="btn btn-default btn-lg">Medium $3.50</button>
<button type="button" class="btn btn-default btn-lg">Large $4.50</button>
</p>
<h2>Select Milk</h2>
<p>
<button type="button" class="btn btn-default btn-lg">Full</button>
<button type="button" class="btn btn-default btn-lg">Trim</button>
<button type="button" class="btn btn-default btn-lg">Soy</button>
</p>
<button type="button" class="btn btn-primary btn-lg btn-block">Done</button>
<button type="button" class="btn btn-danger btn-lg btn-block cancelOrder">Cancel</button>
</div>
</div>
If I do the following I can highlight the selected button in group1
$('#group1 button').on("click", function(){
$('#group1 button').removeClass("btn-primary").addClass("btn-default");
$(this).removeClass("btn-default").addClass('btn-primary');
})
I expect the button list to be dynamic so I want to select buttons with <p> to highlight separately so remove the #group selector and just highlight buttons within each <p>.
So in this example I could highlight Medium $3.50 and then highlight Soy independently.
Try this code:
$(document).ready(function () {
$("button").on("click", function () {
$(this).siblings("button").removeClass("btn-primary").addClass("btn-default");
$(this).removeClass("btn-default").addClass('btn-primary');
});
});
Try selecting only children of the parent <p> instead of all #group1 buttons.
$(this).parent().find("button").removeClass("btn-primary").addClass("btn-default");
This way you are only accessing a subset of buttons within the parent element, instead of running the query on the entire DOM.
You can use .siblings to select all sibling elements so you can find all sibling elements of the clicked .btn element:
$("p .btn").on("click", function() {
$(this).siblings(".btn").removeClass("btn-primary").addClass("btn-default");
$(this).removeClass("btn-default").addClass('btn-primary');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideout_inner">
<h2>Select Size</h2>
<p id="group1">
<button type="button" class="btn btn-primary btn-lg">Small $2.50</button>
<button type="button" class="btn btn-default btn-lg">Medium $3.50</button>
<button type="button" class="btn btn-default btn-lg">Large $4.50</button>
</p>
<h2>Select Milk</h2>
<p>
<button type="button" class="btn btn-default btn-lg">Full</button>
<button type="button" class="btn btn-default btn-lg">Trim</button>
<button type="button" class="btn btn-default btn-lg">Soy</button>
</p>
<button type="button" class="btn btn-primary btn-lg btn-block">Done</button>
<button type="button" class="btn btn-danger btn-lg btn-block cancelOrder">Cancel</button>
</div>
</div>
You can use :contains() selector to identify which button is clicked. and then use the siblings() selector.
$( "button:contains('Small $2.50')" ).siblings()
Better approach would be to use different classes for each group. But the above should get you going.

Categories