I have a table with the search clear button enabled,
but I would like to change the icon from fa-trash to fa-undo.
I tried below but that doesn't work.
<table id="table"
data-icons="{ clearSearch: 'fa-undo' }"
data-search="true"
data-show-search-clear-button="true">
Is there an way to only change the clearSearch icon being used via the data-icons attribute? Or is there another way to do it?
I have overridden the clearSearch globally using:
$.extend($.fn.bootstrapTable.defaults.icons, {
clearSearch: 'fa-undo'
});
Related
I have a simple SAP UI5 application, where the user open an add dialog pop-up,
I want to change the style of the dialog, the xml of the dialog is something like this:
<core:FragmentDefinition xmlns="sap.m" xmlns:core ="sap.ui.core" xmlns:html="http://www.w3.org/1999/xhtml>"
<Dialog title="Add" class="sapUiPopupWithPadding">
<Input type="Text"/>
<buttons class="buttonsStyle">
<Button text="Save"/>
<Button text="Cancel"/>
</buttons>
</Dialog>
</core:FragmentDefinition>
The CSS:
.buttonsStyle {
background-color: #d8d8d8 !important;
}
I always get the same result as the picture no matter how I change the CSS, I want to change the color and size of the dialog title (Add) and the background color and font color of the buttons but I get no result by trying and searching.
Thank you.
For buttons you should favor the type attribute over custom CSS ;)
See the API reference & samples for ButtonType
https://sapui5.hana.ondemand.com/#/api/sap.m.Button%23controlProperties
https://sapui5.hana.ondemand.com/#/api/sap.m.ButtonType
https://sapui5.hana.ondemand.com/#/entity/sap.m.Button/sample/sap.m.sample.Button
For the Dialog, you can use the customHeader aggregation and use some customizable component in place of the title.
https://sapui5.hana.ondemand.com/#/api/sap.m.Dialog%23aggregations
I am trying to bind CSS styling to vuejs tags. I dont seem to be able to get it working.
Below is the code which i am trying. Can anyone help me out with this? I am not able to get the Styling to work. I am trying this as well as binding based on conditional. Both doesnt seem to work. Can anyone help me with this? I have tried all the ways i could find on stackoverflow, none of them seem to work for me. Can any one help me if i am doing something wrong?
<b-table
class="PatientTable"
borderless
hover
v-on:row-clicked="redirectToPatientView"
:items="users"
:fields="fields"
:current-page="currentPage"
:per-page="perPage"
id="tableData"
>
<template v-for="key1 in fields" v-slot:[`cell(${key1})`]="{ value }" id="tableData" >
<b class="patientData" id="tableData" v-bind:key="key1" v-bind:style="'{font-size:200px;}'">{{ value }}</b>
</template>
When you bind a style, pass in an object instead of a string of an object.
<!-- Instead of: -->
<b :style="'{font-size:200px;}'">{{ value }}</b>
<!-- Do: -->
<b :style="{ 'font-size' : '200px' }">{{ value }}</b>
Notice that, in the second line, the object is placed directly into the double-quotes, without its own set of single-quotes. The contents of those double-quotes are straight up JavaScript, so you don't have to escape the object in them. What you're essentially trying to do is along these lines:
<b :style="styleBinding">{{ value }}</b>
<script>
export default {
data: function() {
return {
styleBinding: {
'font-size': '200px',
'margin-top': '5em',
'other-css-property': 'value'
}
}
}
}
</script>
It's just that, since you're only using a single property, it's a little cleaner to do in-line in the template.
use :class binding instead?
<component :class="{'your-classname' : condition}">
Since inline styling is not really advisable. https://v2.vuejs.org/v2/guide/class-and-style.html
I want to build an Edit popup dialog with an input form in Angular2 using the PrimeNG widgets. I run into trouble with dynamic content of that dialog box (see screenshot).
I've naïvely been trying to wrap the CalendarModule in a div that is positioned above the other elements. (see Angular Template HTML below)
<p-dialog [(visible)]="display" [modal]="true" [resizable]="false">
...
<table class="ui-datatable-responsive">
<tbody>
<tr>
...
</tr>
<tr>
<td class="ui-cell-data">Start By:</td>
<td class="ui-cell-data">
<div [style]="generateSafeStyle('position:relative; z-index:1000')">
<p-calendar dateFormat="dd.mm.yy" [(ngModel)]="value"></p-calendar>
</div>
</td>
</tr>
</tbody>
...
</table>
</p-dialog>
However it seems the DialogModule frames all its content. Is there a hack to overflow that frame?
How would you handle that?
Thank you.
P.S: The generateSafeStyle Function just uses an injected DomSanitizer and works fine.
generateSafeStyle(style:string):SafeStyle{
return this.sanitizer.bypassSecurityTrustStyle(style);
}
just use appendTo="body", it will show calendar above all, even if it is in table, popup or scroll panel
<p-calendar [(ngModel)]="invariable.value" dateFormat="mm/dd/yy" required appendTo="body" readonly></p-calendar>
So I would guess things have changed since this was originally asked, but I found that if I added
[contentStyle]="{'overflow': 'visible'}"
to the p-dialog it allowed the calendar popup to overflow the dialog border.
The only thing that worked so far were the following style options:
<p-calendar dateFormat="dd.mm.yy" [(ngModel)]="dueDate" [style]="{'position': 'fixed', 'overflow': 'visible', 'z-index': '999'}">
This however smashed up the table. So I got rid of the table and used flexboxes to align the elements. Looks better anyway like this.
It's related to overflow:auto on .ui-dialog-content
In dialog there is a div with class .ui-dialog-content make overflow:visible in that div and it will fix this problem.
If you check official PrimeNG Calendar documentation, you will find list of attributes for calendar component, among them there's style attribute which you can use to add needed CSS:
<p-calendar dateFormat="dd.mm.yy" [(ngModel)]="value"
[style]="{ 'position': 'relative', 'z-index': '1000' }"></p-calendar>
I found a better solution for this. Just add a method on click listeners and select element ui date picker
(click)="modifyStyle()"
In ts file import elementRef and Renderer2
constructor(private ele: ElementRef, private ren: Renderer2)
{}
modifyStyle()
{
let ui = this.ele.nativeElement.querySelector(".ui-datepicker");
if(ui)
this.ren.setStyle(ui, "top", "unset")
}
That's it.
Is it possible to modify style of "Pay with Card" Stripe button? I've tried modifying by,
adding a new class defined in external style sheet
modifying its own class of stripe-button in external style sheet
and editing it inline with style=""
But I cannot get the button to change its style.
It looks like it might be possible with the custom integration instead of the simple integration (source: https://stripe.com/docs/checkout#integration-simple), but I was hoping there was something simpler.
Button with default style:
Does anyone have experience with this?
(I'm integrating into Ruby on Rails if that makes any difference.)
None of those worked for me. I ended up hiding the button in javascript and making a new one.
<form action="/your-server-side-code" method="POST">
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="xxx"
data-amount="999"
data-name="zzz"
data-locale="auto">
</script>
<script>
// Hide default stripe button, be careful there if you
// have more than 1 button of that class
document.getElementsByClassName("stripe-button-el")[0].style.display = 'none';
</script>
<button type="submit" class="yourCustomClass">Buy my things</button>
</form>
Search for this class:
.stripe-button-el span
I think this is where you have to modify your own button's style.
You may overwrite it within your own external css file.
Although a little hacky, for anyone wanting a super quick and simple way of using a different button along with the "simple integration", especially if you don't have "solid JavaScript skills", you can just hide the Stripe button with;
.stripe-button-el { display: none }
This way, any submit button within the form will call the checkout so you can just use the button you already had before introducing Stripe.
The following will override the background color with the custom color #EB649C. Disabling the background-image is required, as well as styling both the button and it's inside span tag.
button.stripe-button-el,
button.stripe-button-el>span {
background-color: #EB649C !important;
background-image: none;
}
You should use data-label its part of the regular stripe Checkout API:
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="<%= ENV.fetch('STRIPE_PUBLISHABLE_KEY') %>"
data-amount="10000"
data-label="Proceed to Pay with Card"
...
...
data-locale="auto">
</script>
Using jQuery, you can also simply scale the button like this:
<script>
$(function() {
$(".stripe-button-el").css({'transform': 'scale(2)'});
});
</script>
Or replace it by a button with any image you want, like this:
<script>
$(function() {
$(".stripe-button-el").replaceWith('<button type="submit" class="pay"><img src="/assets/paywithcard.jpg"></button>');
});
</script>
You can remove the button styles with Jquery and add your own. Worked a charm for me:
<script type="text/javascript">
$(document).ready(function(){
$(".stripe-button-el span").remove();
$("button.stripe-button-el").removeAttr('style').css({
"display":"inline-block",
"width":"100%",
"padding":"15px",
"background":"#3fb0ac",
"color":"white",
"font-size":"1.3em" }).html("Sign Me Up!");
});
</script>
The .stripe-button-el span actually works.
But you need to add !important in CSS to overwrite the default CSS.
You can try this,
$(".stripe-button-el").find("span").remove();
$(".stripe-button-el").html("Proceed to pay");
Pay with card is inside a span.
For those of you who want to change the background color of the button, make sure you do something like
.stripe-button-el span {
background: #5e366a !important;
background-image:none !important;
background-color: #5e366a !important;
}
in your css file. this will change the actual background of the button fr you. If you wish to have the parent div changed, you can do the same thing without the span or do a direct inline style.
I want to change background color of table row after selecting it. It works well for normal table. When i tried it to ng-table then only few styles are applied from ng-class not all styles are managed to apply including background color.
My [enter link description here][1].
[1]: http://plnkr.co/edit/O6PzlHXEhOyheNS8BbAT?p=preview
I am giving working example for it on above link,
here ng class work for making font bold of row content but not changing row's background.
Problem is not with ng-table. In fact problem is with class "table-striped" inside
"<table id="t1" ng-table="tableParams" show-filter="true" class="table table-condensed table-bordered table-striped">"
If you remove "table-striped", it works fine.
To go into the deep of how to override custom css over bootstrap css, you can follow below link. This link is very specific to this issue only.
custom css being overridden by bootstrap css
"https://stackoverflow.com/questions/19768794/custom-css-being-overridden-by-bootstrap-css"
Hope this helps.
Try to avoid $index in filtered lists. Try this instead:
<tr ng-repeat="user in userLocations" ng-class="{'selected':user.selected}" ng-dblclick="deselectAll(); user.selected = true;">
$scope.deselectAll = function(){
for(var i; i < userLocations.length i++;){
userLocations[i].selected = false;
}
}