I have problem with select options styling. I am able to change background and text color, but I can change size of dropdown. Maybe some could tell me what I am doing wrong?
My select:
<Select>
<option value="" hidden>Type</option>
<option value="1">Audi</option>
<option value="2">BMW</option>
<option value="3">Citroen</option>
<option value="4">Ford</option>
</Select>
My Styled-component:
const Select = styled.select`
width: 100%;
height:35px;
background: white;
color: gray;
padding-left: 5px;
font-size: 14px;
border:none;
margin-left: 10px;
option {
color: black;
background: white;
font-weight: small;
display: flex;
white-space: pre;
min-height: 20px;
padding: 0px 2px 1px;
}
`;
How my select looks like:
The styles that you can give to an option element are the background-color and color. The other options are ignored. You can see more details in the question below.
How to style the option of an html "select" element?
Related
I used Styled-components in my React.js app. I want to make some area blur on mouse hover action. So I tried to use &:hover and all line works fine in &:hover area except backdrop effect.
How to make blur effect (on mouse over) in styled-components?
My code
const Adiv = styled.div`
width: 300px;
height: 60px;
background: #ffa5;
&:hover {
backdrop-filter: blur(2px); // This line doesn't work
-webkit-backdrop-filter: blur(2px); // This line doesn't work
cursor: pointer;
border: 1px solid red;
}
`
But when I try in normal HTML (such as w3schools.com/"Try it yourself"), it works well.
<!DOCTYPE html>
<html>
<head>
<style>
#aaa {
width: 300px;
height: 60px;
position: absolute;
top: 150px;
left: 50px;
}
#aaa:hover {
cursor: pointer;
backdrop-filter: blur(5px);
border: 1px solid red;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<div id="aaa">bbbbbbb</div>
</body>
</html>
Edited
I want to get this effect like above image.
I don't want the text inside the div to blur. filter gives a blur effect to the text itself in the div. I just want to give blur effect to the letters behind div when mouse hover. So I want to use backdrop-filter.
Only when I use styled-components, it doesn't work. I am still curious why. What's wrong in my code?
It seems like the css entities backdrop-filter and -webkit.backdrop-filter are not what you have described in your image.
Backdrop-filter applies to the elements behind the target node, while filter applies to the node itself. In order to look like the image you added, the styled component would be:
const Adiv = styled.div`
width: 300px;
height: 60px;
background: #ffa5;
&:hover {
webkit-filter: blur(2px);
filter: blur(2px);
cursor: pointer;
border: 1px solid red;
}
`
The results looks like this.
We are new to Salesforce and we are trying to implement Quick action buttons in HTML Email templates of Salesforce.
Our scenario is -
When an opportunity is submitted for approval, we are sending an email to approvers. This email is generated using an Email Template, which has some text and a couple of links. Approvers receive this email and clicks on the reply button and then reply with 'Approved' or 'Rejected' words which are sent to Salesforce and opportunity is approved or rejected accordingly.
What we are trying to achieve? -
Instead of approvers replying by typing 'Approved' or 'Rejected' manually, we want to have Quick action buttons on the bottom of the email, upon clicking on them, it should type the text automatically as the reply. Please see the screenshot.
What we have already tried? - In our Salesforce email approval HTML template, we have added the HTML code for buttons and applied Javascript in them to create a response, the code is below. We are getting error - Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src xyz.com 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.
<input type="button" style=" font: bold 11px Arial;
background-color: #4BCA81;
color: white;
padding: 5px 6px 5px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;"
class="button" value="Approve" onclick="generateReply('Approved')"/>
<input type="button" style=" font: bold 11px Arial;
text-decoration: none;
background-color: #E1553C;
color: white;
padding: 5px 6px 5px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;" href="https://cgdstudios2017--
pdg.lightning.force.com/apex/RejectDeal?id={!Opportunity.Id}"
class="button" value="Reject" onclick="generateReply('Rejected')"/>`
The output that we are able to generate as Email is
Please let us know if anyone has any idea about it. Thanks in advance.
I have designed a tooltip using only html and css.I cannot use bootstarp.Below is my code for tooltip.
<div class="box">
<h3>Tooltip</h3>
</div>
h3 {
text-align:center;
line-height:33px;
}
div.box {
height:100px;
width:200px;
background-color:#eee;
border:1px solid #aaa;
position:relative;
top:50px;
left:50px;
border-radius:7px;
}
.box:before {
position:absolute;
right:-20px;
top:5px;
content:'';
height:0;
width:0;
border:10px solid transparent;
z-index:1;
}
.box:after{
position:absolute;
right:-17px;
top:25px;
content:'';
height:0;
width:0;
border-top: 8px solid transparent;
border-left: 8px solid #aaa;
border-right: 8px solid transparent;
border-bottom: 8px solid transparent;
z-index:1;
}
The tooltip is working.But i want this tooltip to come on button click that is on ng-click as i am using Angular1.
Can anyone please help me how to do this.I am very new to Angular1.
first add a ng-show to your tooltip
<div class="box" ng-show="displayTooltip">
<h3>Tooltip</h3>
</div>
and add ng-click to your button to make displayTooltip true
ng-click="displayTooltip = true"
if you want to make tooltip invisible on button click use
ng-click="displayTooltip = !displayTooltip"
or if you want to make it invisible on mouseleavevent use
ng-mouseleave="displayTooltip = false"
Are there any clear button included with md-input of type Search? I know that I can just add an clear button outside or the search input component, but I would rather like to get it as part of the input field.
I solve it using a negative margin-right
.search {
md-content.md-default-theme {
overflow: visible;
}
.search-cancel {
color: white !important;
fill: white;
border: none;
width: 16px;
height: 16px;
margin: 8px 0 0 -36px;
overflow: visible;
cursor: pointer;
border-radius: 50%;
transition: background 0.15s linear;
background: rgba(0, 0, 0, 0.3);
&:hover {
background: rgba(255, 0, 0, 0.8) !important;
}
}
}
<div layout="row" class="search">
<md-content flex="90" layout-padding>
<md-input-container md-no-float>
<md-icon md-svg-icon="search" class="name"></md-icon>
<input ng-model="search" type="search" title="Search" placeholder="Search">
</md-input-container>
</md-content>
<md-content flex layout-padding>
<md-icon ng-show="search" md-svg-icon="md-close" class="search-cancel"
ng-click="search=''"></md-icon>
</md-content>
</div>
The containing md-content also needs overflow-visible so that the icon is not clipped.
This is not possible with existing version of angular material (v0.9.0) but is targeted to v0.10.0. See more information here: https://github.com/angular/material/issues/2802#issuecomment-101764802
However, there is a Angular directive that might be used as a workaround. https://github.com/dcohenb/angular-clear-input
Okay so simply I have this layout consisting of two elements, a navigation ("left") and the actual site content ("right").
Now what I want is that the "left" div just stays like it is, but when downsizing the screen to a certain size, I would like the content div's width to decrease with it.
However, I have no idea on how to start. When I look up responsive web design I can only find skeletons for entire layouts with loads of divs and percentages but I just want this for one div only and I'm totally confused.
This is what I have right now:
.right {
width: 750px;
margin: 40px 0 40px 50px;
float: left;
position: relative;
}
.left {
margin: 40px 0px 40px 40px;
width: 210px;
float: left;
position: relative;
}
Hopefully this http://jsbin.com/uquzaw/1/ isn't too overwhelming.
Essentially, you need percentages in your css and a meta tag in your html to get the effect you are looking for.
What you're asking for isn't exactly responsive design. If I understand you correctly, you are going to need percentage widths.
HTML:
<div id="left">
Nav1 <br>
Nav2 <br>
Nav3 <br>
Nav4 <br>
</div>
<div id="right">
This is where the main content will go.
</div>
CSS:
body { margin: 0; padding: 0; }
#left {
width: 20%;
height: 100%;
background: red;
float: left;
text-align: center;
}
#right {
width: 80%;
height: 100%;
background: blue;
float: left;
text-align: center;
}