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
Related
I want to make a hover animation effect in scss. The idea is when cursor hover on the card, another hidden card appear on top of the hovered card.
But now I got stuck on making the hidden card scss: I am not sure how to make the card the same size and the same position as the bottom card(dark blue card). It is for the className "card-hover"
Below is the code for js:
<div className="gallery">
{data.map((item)=>
<div className="card-holder" key={item.id}>
<div className="card-head">
<img className="card-img" src={item.image} alt="project item" />
</div>
<div className="card-body">
<h2 className="item-name">{item.title}</h2>
<div className="item-date">{item.year}</div>
</div>
<div className="card-hover">
<div className="item-role">{item.role}</div>
<div className="item-type">{item.type}</div>
<div className="item-decs">{item.desc}</div>
</div>
</div>
)}
</div>
Code for scss:
.gallery{
margin-left: 10rem;
margin-right: 10rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 8px;
justify-content: center;
}
.card-holder{
border-radius: 4px;
margin-top: 1rem;
background-color: $darkBlue;
box-shadow: 0px 8px 56px rgb(15 80 100 / 16%);
}
.card-hover {
position: absolute;
background-color: #D62839;
display: inline;
width: 100%;
height: 100%;
}
The current result:
enter image description here
I have looked through tutorial videos of how to make this kind of hover effect, but all solutions so far were to set
width:100%;
height:100%
or
top:0;
bottom:0;
left:0;
right:0;
However, when I tried them the result is like the screenshot above. Can someone help me with this? Thank you
currently i'm have issue with generating html with gatsby-transformer-remark.
The problem is, converted markdown to html has images with a link, and transformed to sth like :
<a class="gatsby-resp-image-link" href="/static/8058f3f26913fea3b6a89a73344fe94a/2b40c/salty_egg.jpg" style="display: block" target="_blank" rel="noopener">
<span class="gatsby-resp-image-background-image" style="padding-bottom: 75%; position: relative; bottom: 0px; left: 0px; background-image: url("data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMB/8QAFwEAAwEAAAAAAAAAAAAAAAAAAAEEBf/aAAwDAQACEAMQAAABgik0dXC//8QAGRABAAMBAQAAAAAAAAAAAAAAAQACEhEy/9oACAEBAAEFAkqW2DlnRj73yf/EABcRAQADAAAAAAAAAAAAAAAAAAAREkH/2gAIAQMBAT8B1WX/xAAWEQEBAQAAAAAAAAAAAAAAAAAAEQL/2gAIAQIBAT8Bi6f/xAAbEAABBAMAAAAAAAAAAAAAAAAAAQIRISIxMv/aAAgBAQAGPwK9GNocyS8hCj//xAAbEAADAQADAQAAAAAAAAAAAAABESEAMUGBof/aAAgBAQABPyGxNMfrLHmCDZmAzzvJJDjEQCHv/9oADAMBAAIAAwAAABDIL//EABYRAQEBAAAAAAAAAAAAAAAAAAERAP/aAAgBAwEBPxARhylZv//EABgRAAIDAAAAAAAAAAAAAAAAAAABESFR/9oACAECAQE/EFoktI//xAAdEAEBAAICAwEAAAAAAAAAAAABEQAxIWFBcYHh/9oACAEBAAE/EEbMLQ0fMHDVaPIXyI4pk4JUnWacNCtO8ojDE9TGIYES7/Jn/9k="); background-size: cover; display: block; transition: opacity 0.5s ease 0.5s; opacity: 0;"></span>
<img class="gatsby-resp-image-image" alt="Chinese Salty Egg" title="Chinese Salty Egg" src="/static/8058f3f26913fea3b6a89a73344fe94a/c739e/salty_egg.jpg" srcset="/static/8058f3f26913fea3b6a89a73344fe94a/8ee9c/salty_egg.jpg 148w,
/static/8058f3f26913fea3b6a89a73344fe94a/ebbe7/salty_egg.jpg 295w,
/static/8058f3f26913fea3b6a89a73344fe94a/c739e/salty_egg.jpg 590w,
/static/8058f3f26913fea3b6a89a73344fe94a/5413e/salty_egg.jpg 885w,
/static/8058f3f26913fea3b6a89a73344fe94a/4efde/salty_egg.jpg 1180w,
/static/8058f3f26913fea3b6a89a73344fe94a/2b40c/salty_egg.jpg 2048w" sizes="(max-width: 590px) 100vw, 590px" loading="lazy" style="opacity: 1; transition: opacity 0.5s ease 0s; color: inherit; box-shadow: white 0px 0px 0px 400px inset;">
</a>
starter blog demo hello-world post has this link on image.
I am looking a way to remove that link and use medium-zoom package instead.
thanks in advance
I have created a feature in my application wherein one can copy contents of an existing invoice to create a fresh new invoice. All other fields are getting copied. But the field 'note to customer' isn't getting displayed somehow. I've used text angular for adding a 'note to customer'.
<div layout="row" flex>
<div flex-xl="" ng-if="documentEntity.noteToCustomer"
ng-click="noteToCustomer($event,documentEntity.noteToCustomer)"
style="border: 1px solid rgba(0, 0, 0, 0.12); background-color: #fdf7f7; padding: 15px; border-width: 2 0 1px; line-height: 26px; width: 100%; box-sizing: border-box; float: left;"
class="flex-xl" ><span ng-bind-html="documentEntity.noteToCustomer"></span></div>
</div>
What might be the issue here?
text angular directive is missing in above
<div text-angular flex-xl="" ng-if="documentEntity.noteToCustomer" ....>...</div>
add a plunker for clear understanding..
In the documentarion of textangular, something is said about using ng-bind-html. Try using ta-bing instead.
I would like to add an arrow effect to Angular Material cards (see image below) and I am not sure how to do so. I have set up a fiddle for help.
https://jsfiddle.net/er1187/rng1pv4u/1/
<md-card flex layout-align='center center'>
<md-card-content>
TESTING
</md-card-content>
</md-card>
Create that using transparent border & box shadow.
md-card:after {
content: "";
position: absolute;
box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 2px ;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
top: 35px;
left: 48%;
border-width: 15px;
border-style: solid;
border-color: transparent #FFF #FFF transparent;
}
Change border width according to what size of that that border made triangle you need (& accordingly you've to handle its position top value).
https://jsfiddle.net/shantanu_k/a8omvs2b/1/
Hi Need to select "New South Wales" using By.xpath() any suggestions please?
This is a reactjs page jedwatson.github.io/react-select
<div class="Select-control">
<span class="Select-multi-value-wrapper" id="react-select-2--value">
<div class="Select-value State-NSW">
<span class="Select-value-label" role="option" aria-selected="true" id="react-select-2--value-item">New South Wales</span>
</div>
<div class="Select-input" style="display: inline-block;">
<input role="combobox" aria-expanded="false" aria-owns="" aria-haspopup="false" aria-activedescendant="react-select-2--value" value="" style="width: 5px; box-sizing: content-box;">
<div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 14px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; letter-spacing: normal;"></div>
</div>
</span>
<span class="Select-clear-zone" title="Clear value" aria-label="Clear value">
<span class="Select-clear">×</span>
</span>
<span class="Select-arrow-zone">
<span class="Select-arrow"></span>
</span>
</div>
Tried with the below code without success
driver.findElement(By.xpath("//input[#role='combobox'][#value='New York"']")).click();;
Below exception was observed
org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element: {"method":"xpath","selector":"//input[#role='combobox'][#value='New York']"}
(Session info: chrome=59.0.3071.86)
Please follow the below step to select your desired element
Click on the down arrow of dropdown
Select the desired option
Here is the code for same :
driver.findElement(By.xpath("//h3[contains(text(),'States')]/..//span[#class='Select-arrow']")).click();
driver.findElement(By.id("react-select-2--option-1")).click();
Updated
Use the below method to select the value dynamically based on text :
public void selectCombo(String valueText)
{
driver.findElement(By.xpath("//h3[contains(text(),'States')]/..//span[#class='Select-arrow']")).click();
WebElement dropdownValue = driver.findElement(By.xpath("//div[contains(text(),'"+valueText+"')]"));
dropdownValue.click();
}
Call this method from your code and pass the value which you want to select
e.g.
new TestClass().selectCombo("Tasmania");
You can try with the xpath //*[#role="option" and text()='New South Wales']