I am using Stripe as my payment processor on BigCommerce. It works perfectly. The problem is that my site theme has a black background. When you type in your credit card info, the text is black in the Stripe inputs so you can't see it. I've tried to use CSS in both checkout.scss and optimized-checkout.scss to try and overwrite it, but since Stripe is loaded via JS and in what looks to be an iFrame, I can't figure it out.
I've added this css to both and it still doesn't work
input {
color: #eee !important;
}
May be you can use JavaScript for this,
document.getElementById("element_id").style etc...
I did not do that thing earlier, but this solution works on these types of scenarios!
but since Stripe is loaded via JS and in what looks to be an iFrame, I can't figure it out.
Indeed! It doesn't use the styling in your CSS, you have to specify it via Javascript by passing a style object when creating the Element:
https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options-style
https://stripe.dev/elements-examples/
If you're not the one writing the code that interacts with stripe.js at this level you probably want to reach out to Bigcommerce or something to ask them to expose access in some way.
var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
var elements = stripe.elements();
var card = elements.create('card', {
style: {
base: {
iconColor: '#666EE8',
color: 'white', // color of the text : https://stripe.com/docs/js/appendix/style
lineHeight: '40px',
fontWeight: 300,
fontFamily: 'Helvetica Neue',
fontSize: '15px',
'::placeholder': {
color: '#CFD7E0',
},
},
}
});
card.mount('#card-element');
* {
font-family: "Helvetica Neue", Helvetica;
font-size: 15px;
font-variant: normal;
padding: 0;
margin: 0;
}
body {
background: #171515;
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
}
form {
width: 480px;
margin: 20px 0;
}
.group {
box-shadow: 0 7px 14px 0 rgba(49,49,93,0.10),
0 3px 6px 0 rgba(0,0,0,0.08);
border-radius: 4px;
margin-bottom: 20px;
}
label {
position: relative;
color: #8898AA;
font-weight: 300;
height: 40px;
line-height: 40px;
margin-left: 20px;
display: flex;
flex-direction: row;
}
.group label:not(:last-child) {
border-bottom: 1px solid #F0F5FA;
}
label > span {
width: 80px;
text-align: right;
margin-right: 30px;
}
.field {
background: transparent;
font-weight: 300;
border: 0;
color: #31325F;
outline: none;
flex: 1;
padding-right: 10px;
padding-left: 10px;
cursor: text;
}
.field::-webkit-input-placeholder { color: #CFD7E0; }
.field::-moz-placeholder { color: #CFD7E0; }
<script src="https://js.stripe.com/v3/"></script>
<body>
<form>
<div class="group">
<label>
<span>Card</span>
<div id="card-element" class="field"></div>
</label>
</div>
</form>
</body>
Related
so I'm using a gorgeous search bar component that I found on codepen in my react (CRA) project.
I have imported css in the default src/index.js
Then I have my search component which is composed of Search.js and Search.module.css.
Clearly Bootstrap styling and the Search component styling doesn't work together, when I comment the bootstrap file import in src/index.js, the Search component will be working fine.
So how can I override bootstrap only on my Search Component?
Here is the css of the Search.module.css
#import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
* {
font-family: Roboto, sans-serif;
padding: 0;
margin: 0;
}
.flexbox {
background: linear-gradient(155deg, #cccccc, #e8ecee, #d4d4d4);
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.search {
margin: 20px;
}
.search>h3 {
font-weight: normal;
}
.search>h1,
.search>h3 {
color: white;
margin-bottom: 15px;
text-shadow: 0 1px #eaeff1;
}
.search>div {
display: inline-block;
position: relative;
}
.search>div:after {
content: "";
background: white;
width: 4px;
height: 20px;
position: absolute;
top: 40px;
right: 2px;
transform: rotate(135deg);
box-shadow: 1px 0 #eaeff1;
}
.search>div>input {
color: white;
font-size: 16px;
background: transparent;
width: 25px;
height: 25px;
padding: 10px;
border: solid 3px white;
outline: none;
border-radius: 35px;
box-shadow: 0 1px #eaeff1;
transition: width 0.5s;
}
.search>div>input::placeholder {
color: #5a5a5a;
opacity: 1;
}
.search>div>input::-ms-placeholder {
color: #efefef;
}
.search>div>input::-ms-input-placeholder {
color: #5a5a5a;
}
.search>div>input:focus,
.search>div>input:valid {
width: 250px;
}
As you haven't shared the code snippets. I am assuming the bootstrap search will be using: text and button tag. Now, the CSS of this would be coming from bootstrap.
You can do the following:
1) Make a search component level class eg "search-module"
2) Now, create css or scss file import in the search component and within that css
override the bootstrap css by :
.search-module input[type=search] {...}
OR
3) you can do this overriding on your main style.css file too.
You need do to step 2 for all the other conflicting classes, tags, and IDs in the bootstrap with the search component.
PS: This will bloat your CSS. Best would be if you can just pick that part of Bootstrap which is required and rest you write your own style.
Thank you.
I have a html table with table headings in a Netsuite advanced PDF Template. For some reason one of headings has the word with extra spacing in between the letters, so instead of printing
Delivery
Address
for the header it prints
D e l i v e r y
Address
The Address part does not get the extra spaces.
The code for the header is:
<table class="itemtable" style="width: 100%;"><!-- start items --><#list record.item as item><#if item_index==0>
<thead>
<tr>
<th colspan="3">Delivery Address</th>
I have looked at css properties like word-break, letter-spacing, etc.; but I can't find anything that seem appropriate to fix this.
Anybody know why this is happening? This does not happen in an html page with the same code, so not sure why this is happening in Netsuite.
The css is:
table {
font-size: 9pt;
table-layout: fixed;
}
th {
font-weight: bold;
font-size: 8pt;
vertical-align: middle;
padding: 5px 6px 3px;
background-color: #e3e3e3;
color: #333333;
}
td {
padding: 4px 6px;
}
td p { align:left }
b {
font-weight: bold;
color: #333333;
}
table.header td {
padding: 0;
font-size: 10pt;
}
table.footer td {
padding: 0;
font-size: 8pt;
}
table.itemtable th {
padding-bottom: 10px;
padding-top: 10px;
}
table.body td {
padding-top: 2px;
}
table.total {
page-break-inside: avoid;
}
tr.totalrow {
background-color: #e3e3e3;
line-height: 200%;
}
td.totalboxtop {
font-size: 12pt;
background-color: #e3e3e3;
}
td.addressheader {
font-size: 8pt;
padding-top: 6px;
padding-bottom: 2px;
}
td.address {
padding-top: 0;
}
td.totalboxmid {
font-size: 28pt;
padding-top: 20px;
background-color: #e3e3e3;
}
td.totalboxbot {
background-color: #e3e3e3;
font-weight: bold;
}
span.title {
font-size: 28pt;
}
span.number {
font-size: 16pt;
}
span.itemname {
font-weight: bold;
line-height: 150%;
}
hr {
width: 100%;
color: #d3d3d3;
background-color: #d3d3d3;
height: 1px;
}
.synb {
font-weight: bold;
}
.synh7 {
font-size: 10pt;
line-height: 120%;
}
.synh9 {
font-size: 8pt;
line-height: 120%;
}
tr.synbordertop td {
border-top: 1pt solid black;
}
span.syntitle {
font-size: 20pt;
}
span.synnumber {
font-size: 13pt;
}
EDIT:
Netsuite uses BFO with these PDFs. See the following regarding this specific issue: https://bfo.com/support/faq/#31
How can I stop the letters in my table from being stretched out?
By default the text in tables is justified. In order to prevent this
you need to set align="left". Remember that each element has a
<p> implicitly placed around the data, so the best way to achieve
this is to use a style sheet and add:
td p { align:left }
which will cause all the table data elements to align to the left.
I've had this same issue before. It seems to be an issue exclusively with Netsuite's rendering of the PDF.
Here's the code I implemented to fix it:
Netsuite/HTML
<th><p style="align: center;">Color</p></th>
CSS:
td {
text-align: left;
padding: 2px;
}
th {
padding: 2px;
}
Here's how it looks without the center align:
Here's how it looks with the center:
I'm sure it's not the most ideal situation, but this is the only way I was able to get it to work, I'm sure I tried many of the same things you did.
I used the information in this link for further reference:
"This article is relevant if you are working with NetSuite Advanced
PDF Templates, and you are encountering an unusual HTML table
cell alignment effect in the generated PDF."
http://blog.prolecto.com/2016/03/18/netsuite-advanced-pdf-templates-how-to-fix-table-cell-alignment-justification-anomaly/
Hope this helps, it's at least the solution I implemented whenever I ran into a similar issue.
My problem is that I have in my code the following .CSS for the structure "form":
form, .content {
font-family: Arial, Helvetica, sans-serif; /*Not yet a member? Sign up*/
width: 30%;
margin: 0px auto;
padding: 20px;
border: 1px solid #595959; /*Border register*/
background: white;
/*border-radius: 0px 0px 10px 10px;*/
}
But I would like it to be different for the button I have (I don’t want a border with a width):
<form action="#" method="post">
<input type="hidden" id="hiddenfield" name="hiddenfield">
<button class="button" name="search">Search</button>
</form>
I would want it to be with these characteristics:
.button {
display: block;
margin: auto;
border: none;
color: black;
padding: 8px 40px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
button:hover {
background:#333333;
color: white;
}
However, the .CSS of the structure is also applied to the button. I would like to differentiate it, but I do not know how. I have tried in several ways, including:
form, .button {
display: block;
margin: auto;
border: none;
color: black;
padding: 8px 40px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
Could you help me?
Thank you
The image of the button is here:
You need to know weights of elements in css
element (span, input, form...) = 1
class (.my-class) = 10
id (#my-id) = 100
attribute (style="color:red") = 1000
form, .button { - style for form and button (separate)
form .button { - style for only button (weight 1 + 10 = 11)
form button.button { here you can override previous styles for element .button (weight 1 + 1 + 10 = 12)
form {
border: none !important;
}
In your case not input has border, but form
I am using jqueryInputToken and acts-as-taggable-on gem. I was able to make the back-end work. However, as part of using the jqueryTokenInput plugin, my text_area became so slim and looks more like a tiny text_field.
Here is a picture of what my text_area looks like as a result of the jQueryInput plugin without hovering:
And when you hover the "X" sign to delete the tag apears like in the picture below:
I want to modify the css so that the text_area becomes big and the token looks exactly like below:
How should I modify the css below to reach my desired look for the text_field and tokens ?
Here is the css:
/* Example tokeninput style #2: Mac Style */
fieldset.token-input-mac {
position: relative;
padding: 0;
margin: 5px 0;
background: #fff;
width: 400px;
border: 1px solid #A4BDEC;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
fieldset.token-input-mac.token-input-dropdown-mac {
border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
}
ul.token-input-list-mac {
position: relative;
overflow: hidden;
height: auto !important;
cursor: text;
font-size: 12px;
min-height: 1px;
z-index: 999;
margin: 0;
padding: 0;
background: transparent;
}
ul.token-input-list-mac.error {
border: 1px solid #C52020;
}
ul.token-input-list-mac li {
list-style-type: none;
}
li.token-input-token-mac p {
display: inline;
padding: 0;
margin: 0;
}
li.token-input-token-mac span {
color: #231C34;
margin-left: 5px;
font-weight: bold;
cursor: pointer;
}
/* TOKENS */
li.token-input-token-mac {
position: relative;
display: inline-block;
width: auto !important;
font-size: 8pt;
line-height: 12pt;
margin: 0px 3px 3px 0px;
padding: 4px 10px;
background: none;
background-color: #0F004E;
color: #fefefe;
cursor: default;
float: left;
font-weight: bold;
}
li.token-input-highlighted-token-mac {
background-color: #231C34;
color: #fefefe;
font-weight: bold;
}
li.token-input-selected-token-mac {
background-color: #231C34;
color: #fefefe;
font-weight: bold;
}
li.token-input-highlighted-token-mac span.token-input-delete-token-mac {
color: #fefefe;
font-weight: bold;
}
li.token-input-selected-token-mac span.token-input-delete-token-mac {
color: #fefefe;
font-weight: bold;
}
li.token-input-input-token-mac {
border: none;
background: transparent;
float: left;
padding: 0;
margin: 0;
}
li.token-input-input-token-mac input {
width: 100px;
padding: 3px;
margin: 0;
}
div.token-input-dropdown-mac {
position: absolute;
border-top: none;
left: -1px;
right: -1px;
background-color: #fefefe;
overflow: hidden;
cursor: default;
font-size: 10pt;
}
div.token-input-dropdown-mac p {
font-size: 8pt;
margin: 0;
padding: 0 10px;
color: #fff;
}
div.token-input-dropdown-mac h3.token-input-dropdown-category-mac {
font-size: 10pt;
font-weight: bold;
border: none;
padding: 0 5px;
margin: 0;
}
div.token-input-dropdown-mac ul {
margin: 0;
padding: 0;
}
div.token-input-dropdown-mac ul li {
list-style-type: none;
cursor: pointer;
background: none;
background-color: #fefefe;
margin: 0;
padding: 0 0 0 10px;
color: #999;
text-transform: uppercase;
}
div.token-input-dropdown-mac ul li.token-input-dropdown-item-mac span.token-input-dropdown-item-description-mac {
float: right;
font-size: 8pt;
font-style: italic;
padding: 0 10px 0 0;
color: #999;
text-transform: uppercase;;
}
div.token-input-dropdown-mac ul li strong {
font-weight: bold;
text-decoration: underline;
color: #999;
text-transform: uppercase;
}
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac,
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd {
background: #0F004E;
color: #bb8322; //Official Red
text-transform: uppercase;
font-weight: bold;
}
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac:hover,
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd:hover,
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac:focus,
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd:focus {
color: #fff;
}
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac span.token-input-dropdown-item-description-mac,
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd span.token-input-dropdown-item-description-mac {
color: #fff;
}
I have been trying to do something like this and have at least a rough version of something working, so I'll put this here in case it's useful. I used the Facebook theme - it looks like you used a different theme. I mention that because this influences things like class names in my answer. Also I think that Facebook might be more of what you're after (see the cosmetic stuff below).
I'll split this into two parts: a structural part first, and then a cosmetic part.
Structure
Part of my problem was due to the fact that the token input code replaces your HTML with some of its own. I wrote this HTML
<div id="searchBar">
<input type="text" id="bigTextInput" />
</div>
and the combination of the insert-token-input-here call:
$("#bigTextInput").tokenInput(token_url, {
theme: 'facebook',...
and the user entering a couple of things, made it look like this (with my comments):
<div id="searchBar">
<ul class="token-input-list-facebook">
<li class="token-input-token-facebook"> <!-- one of these per user input -->
<p>first thing the user entered
<span class="token-input-delete-token-facebook">X</span></p></li>
<li class="token-input-token-facebook">
<p>second thing the user entered
<span class="token-input-delete-token-facebook">X</span></p></li>
<li class="token-input-input-token-facebook"> <!-- 1 on the end for entering the next selection -->
<input id="token-input-Y"> <!-- Y = whatever Id you gave to the original input (bigTextInput in my case) -->
</li>
</ul>
<input id=Y display:none /> <!-- the thing you created, but then is hidden and replaced by the ul etc. -->
</div>
The input I created has been hidden away, and in its place there's now a ul, with an li per thing the user entered and an extra li for the user to add more things.
To change the height successfully I had to set the height I wanted on the ul:
$("ul.token-input-list-facebook").height(newHeight + "px");
Bonus structure stuff - auto-resizing
I started with just a large box, but this didn't look good if the user had entered only a small amount of stuff. So I thought I'd try to make it start small (a single line high) and then grow on demand.
To do this I made sure that the ul wouldn't create scrollbars:
ul.token-input-list-facebook {
overflow-x: hidden;
overflow-y: hidden;
}
and then if the content overflowed, I would re-size things. I checked for overflow by adding a handler to the add and delete events of the token input:
$("#bigTextInput").tokenInput(token_url, {
theme: 'facebook',
onAdd: function(){
growSearchBoxSizes();
},
onDelete: function(){
shrinkSearchBoxSizes();
}
});
The best way I found to detect overflow in growSearchBoxSizes was to compare the offsetHeight and scrollHeight properties of the enclosing div:
var heightA = parseFloat($("#searchBar")[0].offsetHeight);
var heightB = parseFloat($("#searchBar")[0].scrollHeight);
I suggest you write these to console.log, experiment with what they show when the input does and doesn't overflow, and have code to add 1 line's height when they show you that there is overflow.
I couldn't come up with a good way to detect when it was time to shrink (e.g. after the user had deleted a line's worth of stuff), so in the delete handler I shrink the box down to its starting size and then grow it back up to whatever height is needed, i.e. until there is no overflow. (A hack, but it seems to work.)
Actually, I was already using a handler for the add and delete events because of wanting to prevent what the user had already entered from showing up in the auto-completion list for later inputs, which you might want to also consider.
Cosmetic
The reason why I suggested that you might want to switch to the Facebook theme is that it has the X present all the time as you want. The colours and shapes aren't as you want them, but I hope that this should be a matter of just defining overrides in your CSS as appropriate.
I have a delete button inside a form element right next to an edit anchor link. The HTML code looks like:
<button type="submit">Delete</button>
Edit
I have used the following CSS to style these so the look identical:
/* From html5reset.org */
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
/* Custom*/
a {
text-decoration: none;
color: #EB8E0B;
}
a.button {
display: inline-block;
padding: 9px 15px;
background: #617798;
border: 0;
font: normal 18px/100% Arial, Helvetica, sans-serif;
color: #FFF;
}
/* From html5reset.org */
button, input, select, textarea {
margin: 0;
}
button {
width: auto;
overflow: visible;
}
/* Custom */
button[type=submit],
button[type=button] {
width: auto;
padding: 9px 15px;
background: #617798;
border: 0;
font: normal 18px/100% Arial, Helvetica, sans-serif;
color: #FFF;
}
This renders correctly in IE, Safari, Chrome but not in Firefox. In Firefox the height of the button element is greater than the anchor link.
Any ideas how I can fix this?
Firefox does something weird to button elements, try adding this:
button::-moz-focus-inner {
padding:0;
border:0;
}