I'm using Simple Dialog 2:
I have the dialog box below:
$('<div>').simpledialog2({
mode: 'button',
themeHeader: 'b',
headerText: 'Confirm',
headerClose: true,
buttonPrompt: message,
buttons : {
'OK': {
click: function () {
$.mobile.changePage(url, {changeHash: false});
}
},
'Cancel': {
click: function () {
},
icon: "delete",
theme: "c"
}
}
})
Screenshot:
I want to text-align the message to left and have some space from left and right side of the button. How can I achieve it?
Thanks.
you can use Firebug or another developer tool to examine the CSS to manipulate...
see docu
Overriding themes
The themes are meant as a solid starting point, but are meant to be
customized. Since everything is controlled by CSS, it's easy to use a
web inspector tool to identify the style properties you want to
modify. The set of of theme classes (global) and semantic structural
classes (widget-specific) added to elements provide a rich set of
possible selectors against which to target style overrides. We
recommend adding an external stylesheet to the head, placed after the
structure and theme stylesheet references, that contain all your style
overrides. This allows you to easily update to newer versions of the
library because overrides are kept separate from the library code.
Related
Is there a way to apply a style to all elements in Cypress? Like one would do with the star selector:
* {
overflow-x: hidden;
}
I need this for visual regression snapshots, because of scrollbars that appear, and haven't been able to find something simple and elegant in Cypress. Currently doing something like this:
cy.get('[data-cy="some-tag"]').invoke('css', 'overflow-x', 'hidden');
But of course this isn't great, because every element that has scrollbars has to be targetted and set.
You can change the DOM just before any screenshot is taken by using onBeforeScreenshot and onAfterScreenshot callbacks. This will hide the scrollbar on the element the screenshot command was called on, and restore it afterwards:
Cypress.Screenshot.defaults({
onBeforeScreenshot($el) {
$el.css('overflow', 'hidden');
},
onAfterScreenshot($el, props) {
$el.css('overflow', 'auto');
},
});
You can put this function in support/index.js file since it is loaded before any test files.
Note: if you just call cy.screenshot() then the $el will be the document and you can use .find(<selector>) command to get any child elements within the page.
Works great with cypress-visual-regression plugin.
Reference: https://docs.cypress.io/api/cypress-api/screenshot-api#Change-the-DOM-using-onBeforeScreenshot-and-onAfterScreenshot
I'm not having any luck figuring out how I can style the PayPal input boxes for debit/credit card payments. Unlike the pay with paypal button which creates a popup, when you click the debit card option the input boxes are displayed inline. The default styles of the input boxes screws up my design and I would like to make them smaller so they fit the page better (I read that you can't make them a pop-up like the pay with paypal option. Here is a pic:
From the paypal docs, it sounds like I should be able to style the input boxes directly from my own stylesheet using the input boxes id:
"Change the layout, width, height, and outer styling (for example,
border, box-shadow, background) of the card fields. You can modify the
elements you supply as containers (for example; #card-number { border:
1px solid #333; }) with your current stylesheets.
Typically, input elements calculate their height from font size and
line height (and a few other properties), but advanced credit and
debit card payments require explicit configuration of height. Make
sure you style the height of your containers in your stylesheets. The
text of the field components is configured with JavaScript."
I'm using react, I've tried modifying #card-number in my stylesheet but nothing I add changes the input box (font-size/height/background-color). I also render the buttons to a div called #paypalBtns, I tried styling the input boxes through that div as well but couldn't get anything to work (e.g #paypalBtns * {font-size: xx}). Has anyone had success styling these inputs?
Here is the code where I render the paypal buttons:
window.paypal
.Buttons({
createOrder: (data, actions) => {
return actions.order.create({
purchase_units: [
{
amount: {
value: braceletTotal()
}
}
],
application_context: {
shipping_preference: "NO_SHIPPING",
},
})
},
onApprove: async (data, actions) => {
setPaymentLoading('visible')
const order = await actions.order.capture();
const paypalTotal = order.purchase_units[0].amount
processOrder(paypalTotal, customer)
},
})
.render('#paypalBtns')
EDIT
pic of web html:
As mentioned in my comment, you can look into manipulating the iframe data with Javascript as suggested here: How to apply CSS to iframe?.
You can try to add new inline style tags or replace the existing ones with Javascript where Paypal use inline css tags, but it's hard to target the right html tag. Where Paypal use css classes you can try to override them with the !important flag on each css property in your own stylesheet, but you have to load these styles after Paypal's style (but before the whole iframe is rendered), so this too has to be injected with JS, otherwise it won't work.
Also: Is manipulating the css styles against Paypal's terms? I would say that's likely. And is manipulating this form good for conversion? Your end users probably trust Paypal, but will they trust a form that says it's Paypal but doesn't look like it?
I have my react app inside which i want to use vaadin-date-picker (v. 4.0.5).
I want to change some of the date pickers in a way that they would be above my modal by changing z-index to 1100 (for example)
and some to stay at 200.
In some examples, people put <style> tag inside
<vaadin-date-picker></vaadin-date-picker>
But react is not recognizing <style> attribute inside render function.
I can set class for
<vaadin-date-picker class='my-class'>
but it only changes control itself and not the backdrop part. Is there a way to change styles of some web components inside react app?
Make sure you are importing the file correctly
import './yourcssfile.css'; // if in same directory
also in react classes are applied using className keyword
<vaadin-date-picker className="my-class">
and lastly you have to follow the documentation vaadin. you can't add your own styles if the vaadin-date-picker doesn't support it.
Here in their documentation it says Vaadin Date Picker comes with both Lumo and Material design themes, and it can be customized to fit your application.
The cleanest way to use styles in my opinion is to use CSS files, so
import './classname.css';
Would be my default answer. However, if you want to set styles explicitly in your Component, these are two examples, how you can do it:
class Example extends Component {
getStyle1 = () => {
return {
fontWeight: 'bold'
};
}
render () {
return (
<div><div style={this.getStyle1()}>style1</div>
<div style={style2}>style2</div></div>
)
}
}
const style2 = {
fontStyle: 'italic'
}
Remember that it's JavaScript objects that you return with your styles, so you don't use CSS syntax with dashes (e.g. you type backgroundColor instead of background-color) and all values must be put in quotes.
I have a very niche use-case. I have to add a modal animation like this:
regular css animation
But I need to have a component (our own filter component for a datatable) inside said modal.
So I need to use the ModalService. But this service is only attaching my custom config like this:
toggleFilter = () => {
const modalOptions: ModalOptions = {
initialState: {
labels: this.datatableLabels, // needed for filter to have labels
filterGroups: this.filterGroups // needed to add filterGroups
},
class: 'filter-modal' // this sould be my custom class
};
this.bsModalRef = this.modalService.show(FilterComponent, modalOptions);
}
to modal-content and the above mentioned animation and styling uses divs above that. Not only it's working when encapsulation set toViewEncapsulation.None then it screws our other modals as well, since I cannot apply correct classes to the one I need to mess with.
How can I overcome this issue I'm having?
Instead of using the ModalService and open desired embedded component within the modal. You can basically inject the desired component into the body of the modal while using directive instead -> Here you are declaring the whole modal layout -> you can modify all the related classes so it's easier to modify a modal and have your ViewEncapsulation untuched so other modals are unaffected.
My target is to change header's font size for one single panel.
I tried to read http://docs.sencha.com/extjs/4.2.1/#!/guide/theming, but all what I found was theming the whole applications, theming all-the-panels-in-the-project and overriding config options in "Theme JS Overrides", but no CSS variables overriding for single component.
Is there any way to achieve it without fussing with this SASS for whole project?
Just add a class to the panel, then create a rule to match:
new Ext.panel.Panel({
cls: 'foo',
renderTo: document.body,
title: 'X'
});
.foo .x-header-text {
font-size: 24px;
}