I'm using a styled-components to style a botton in a react application. The botton is an add to cart button and I want the text in the button to have the currency sign next to the price.
However when I run the application it displays a ? inside a diamond instead of a £ symbol.
Can someone explain why this is happening and how to fix it?
This is what the browser renders:
This is the styled-component code:
<AddToCartButton
data-item-id={productItem.ProductId}
data-item-price={productItem.Price}
data-item-url={productItem.ProductUrl}
data-item-description={productItem.Description}
data-item-image={productItem.ProductImageUrl}
data-item-name={productItem.ProductName}
{...dynamicProps[i]}>
ADD TO CART £{productItem.Price}
</AddToCartButton>
and this is the definition of the styled-component:
export const AddToCartButton = styled(Button).attrs(() => ({
className: 'snipcart-add-item'
}))`display:block;
color: #fff;
background-color: #009539;
border-color: #009539;
border-radius: 35px;
padding-left:35px;
padding-right:35px;
padding-top:15px;
padding-bottom:15px;
margin-left:auto;
margin-right:auto;
font-weight:900;
font-size:14px`
I'm not sure if this is something to do with CSS in genreal or a specfic problem when using styled-components.
Not sure if it's related to any of them, but can you replace it with £ ? also as a test, try changing your font-family property to make sure it's not related to it.
Related
I'm building a website using Contact Form 7 for WordPress and am having issues styling the select menu. Specifically, I cannot move the arrows or add padding to the dropdown so it's not so tight.
I've tried using this CSS to add spacing to the dropdown items (and some other CSS trickery) but it has no effect:
options {
padding: 20px 10px!important;
margin: 20px 10px!important;
line-height: 36px!important;
border-bottom: 10px solid tan!important;
}
Do you know if there's a way to control the styling behavior of CF7's select menu (arrow and options dropdown)?
Thank you!
Demo Website:
https://miles.birdhouse-demos.com/connect/
CSS styling for <select/> fields is very limited and does not allow you to achieve this. You will need to use a hybrid field plugin that constructs dropdowns with HTML lists that can be styled, such the Hybrid HTML Dropdown plugin, which can be styled and can be loaded on your page to convert your existing <select/> fields into hybrid ones,
<script type="text/javascript">
(function(){
let sel, hyd;
document.addEventListener('DOMContentLoaded', (e) => { //instantiate on document ready.
sel= document.querySelector('#my-select-list');
hyd = new HybridDropdown(sel,{});
})
})
</script>
Alternatively, you can install the Smart Grid-layout extension for CF7 which has a dynamic-dropdown field tag you can use instead of the CF7's default dropdown, and has as the option to display as a Hybrid Dropdown field for you.
Try this
It's possible to customize the dropdown arrow with this code:
select {
-webkit-appearance: none;
-moz-appearance: none;
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png);
background-repeat: no-repeat;
background-position-x: 98%;
background-position-y: 2px;
}
Here is a list about what you can do with this code:
Remove completely the arrow, to do so, simply remove this line: "background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png);"
Customize the arrow size. You need to add the following line to the code given above: background-size: 30px 30px;
You can change the value in px.
Change the arrow, to do so, replace the URL in the following line of code: "background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png);"
This guide will help you to inject the code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
If you have any questions, let me know.
Thanks.
Credit: Kevin - From: https://www.jotform.com/answers/2449062-how-can-i-remove-modify-change-the-dropdown-arrow-using-css
I got react-toastify installed, and my toasts are working, but I want to add them some custom styling depending on a theme, and none of the solutions I saw are working in my case.
I don't want to overcomplicate it, I just want to change background color, maybe borders, font color, etc.
I tried class overriding which documentation is saying about - it's not working.
.Toastify__toast-theme--colored.Toastify__toast--error {
color: white;
background-color: red;
}
I tried my own className and pass it to certein toast - it's not working.
toast.error('here some error', {
className: 'toast-error'
});
.toast-error {
color: white;
background-color: red;
}
And these themed classes are not even added to the toast.success() or toast.error()
I tried to override values in the core css file that im importing, and it's not working.
And if I set background-color: red to the actual class that is added, then I get red background on toast.success() as well.
Here is documentation.
How to deal with this?
using classnames should be the solution to your problem
className={classnames("Toastify__toast-theme--colored", {
"toast-error": // here the condition by which toast-error class should pop up
})}
I am trying to style my react component. But i get for my understanding weird behaviour.
<div className={classNames(scss[isOdd ? 'timeline-item-icon-odd'
: 'timeline-item-icon-even'], [inProgress])}>
What i get in the dom is:
timeline-item-icon-odd___3K5am progress
where progress is from the variable inProgress.
In my opinion i tought this is the way to do it but apparently it only renders the first class and completely ignoring the second.
I have set up a single html an css file where i checked my styles before applying and there they all work correctly.
CSS:
.timeline-item-icon-odd {
background-color: gray;
border-color: gray;
}
.progress {
background-color: green !important;
border-color: green !important;
}
So what i want to achieve is as to have the background according to the variable in inProgress.
I hope somebody has any idea.
Thank you in advance!
Regards
If you want to add inProgress together with your other conditional css classes you need to add inProgress like this:
<div className={classNames(scss[isOdd ? 'timeline-item-icon-odd'
: 'timeline-item-icon-even',inProgress])}>
I hope this would solve the issue. I have tried this and it worked.
The Solution:
<div className={classNames(
scss[isOdd ? 'timeline-item-icon-odd' : 'timeline-item-icon-even'],
scss[inProgress]
)}
>
The solution was the scss in front. So a syntax error.
I'm new to React.
I'm trying to create 2 different styles of Modals with the React-Bootstrap Modal component: one with an orange header, and another white header (aka no header).
2 types of headers img
The style of modal used depends on where it's used. For example, I want the white header to appear for sign in and sign out, and only those 2 modals. Right now, the .modal-header CSS seems like the default style applied to any declaration of Modal.Header. My modal-header class has styling for the orange header:
.modal-header {
color: #fff;
background-image: linear-gradient(255deg, #f9b25e, #f17b30);
}
I don't want this style applied to the sign up and sign in modals. I tried creating this new CSS ID modal-no-header and adding it to the Modal.Header declaration in the signup and signout js files:
in my CSS:
#modal-no-header{
background-color:#fff !important;
}
in SignupModal.js:
render() {
return (
<Modal show={this.props.showModal} onHide={this.props.closeModal} >
<Modal.Header id="modal-no-header" closeButton>
</Modal.Header>
<Modal.Body> blah... <Modal.Body>
</Modal>
)
}
However, the #modal-no-header styling isn't overriding the default .modal-header class:
not working, inspect element screenshot included
Question: Is this the right way to specify multiple styles for Modal components in React-Bootstrap? If not, is there a better method and how do you go about it? I checked out the documentation but wasn't able to spot anything helpful. Thanks in advance.
I have a web user control where I have ten asp buttons.
I want that when I hover on these buttons the cursor should change to hand cursor, I am able to do that.
Now I want that when I press a button it should change it's back and fore colors so that it looks selected.
I tried to do that by code but it's not working. Following is my css file content:
.buttonclass
{
background-color: Olive;
cursor: pointer;
}
.selectedItemClass
{
background-color: Blue;
color: White;
}
and on the button click I have written like:
Button btn = sender as Button;
btn.CssClass = "selectedItemClass";
but it's not working any idea or another way to achieve the required behavior.
Your code will only work after post-back, and then the button will remain with the selectedItemClass.
You will need to use client-side code to change the class of your button.
One option would be to use a javascript/jquery solution like:
$(".buttonclass").mousedown(function(){
$(this).addClass("selectedItemClass")
});
$(".buttonclass").mouseup(function(){
$(this).removeClass("selectedItemClass")
});
Have you checked if the class is added or replaced? or you can do:
.selectedItemClass
{
background-color: Blue!important;
color: White!important;
}
to check if the order of your css is ignoring the fact there are two different background-color and the priority of them.