"justify-content: space-between;" doesn't work
#app {
width: 300px;
height: 40.8px;
border: 1px solid #409EFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.el-form {
.el-form-item {
/deep/ .el-form-item__content {
display: flex;
justify-content: space-between;
.el-input {
width: 165px;
}
.el-button {
width: 115px;
}
}
}
}
}
<div id="app">
<el-form>
<el-form-item>
<el-input placeholder="请输入验证码"></el-input>
<el-button type="primary">获取验证码</el-button>
</el-form-item>
</el-form>
</div>
I have provided complete code at JSFiddle.
As shown in the iframe,the el-input isn't flush with the main-start edge, and the el-button isn't flush with the main-end edge.
Why doesn't "space-between" work?it works just like "space-around".
The problem is related to the styling you got from element-ui. this selector should be overridden:
.el-form-item__content::after, .el-form-item__content::before {
display: table;
content: "";
}
To remove this add:
.el-form-item__content {
&:before, &:after {
content: none !important;
}
}
Related
I am working on a site where there is an info icon next to the logo in the center of the page. When hovering over the info icon, a text box displays. For some reason, when the screen width is shorter than around 1300px, the entire logo as well as the info box is pulled down vertically. Not sure what aspect of onhover could be causing this.
I tried to manually move down the info icon with media queries but that is not a good way of doing it.
Here is react component:
function HomeContent() {
return (
<>
<div className="center-div">
<img src={tenGreenLogo} className="ten-green-logo" alt=""></img>
<div className="info-div">
<img src={infoIcon} alt="" className="info-icon"></img>
<p className="hidden-info">
The 10Green Score indicates the health of your environment using a
number from 0 to 10. The higher the score, the healthier your
environment.
<br></br>
<br></br>
Factors that can reduce your score include unhealthy air quality
readings and poor environmental monitoring.
</p>
</div>
</div>
<Globe />
</>
);
}
export default HomeContent;
and here is CSS for that component:
.center-div {
display: flex;
justify-content: center;
align-items: center;
padding-top: 7rem;
padding-bottom: 0rem;
scroll-behavior: smooth;
}
.ten-green-logo {
max-width: 40%;
animation: transitionIn 1s;
padding-right: 1rem;
}
.info-div {
width: 2rem;
margin-top: auto;
margin-bottom: 0;
}
.info-icon {
width: 2rem;
animation: transitionIn 1s;
}
.hidden-info {
display: none;
}
.info-icon:hover + .hidden-info {
display: block;
position: relative;
background-color: white;
padding: 0.6rem;
border-radius: 5%;
width: 20rem;
font-size: 80%;
right: 7.5rem;
top: 10.5rem;
}
.info-icon:hover {
position: relative;
top: 10.6rem;
}
#keyframes transitionRight {
from {
transform: translateX(0rem);
}
to {
transform: translateX(2rem);
}
}
#keyframes transitionIn {
from {
opacity: 0;
transform: translateY(4rem);
}
to {
opacity: 1;
transform: translateY(0rem);
}
}
Any help would be greatly appreciated.
use this style, you have to use position absolute on hidden-info
.info-div {
position: relative;
}
.hidden-info {
display: none;
position: absolute;
background-color: white;
padding: 0.6rem;
border-radius: 5%;
width: 20rem;
font-size: 80%;
right: 7.5rem;
top: 10.5rem;
}
.info-icon:hover + .hidden-info {
display: block;
}
Just found out about and tags. Default gives out a very crude style. I had success using the ::marker Pseudo Element to remove the default marker, but don't know how to put it on the right side. Used the ::after Pseudo Element but can't animate it (Rotate 180deg or scale it) when the summary "opens". Is there a proper way to do it? Or did I miss anything with my method? Thanks.
PS: Since I am a newb, I don't know how to get the Google icon font to the codepen. However, you will see what I tried to do with the expand_arrow icon.
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
.thing {
background-color: cadetblue;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.new_game {
font-size: 3rem;
}
.what_is_question {
background-color: cornflowerblue;
cursor: pointer;
}
.what_is_question[open] {
background-color: darkmagenta;
}
.what_is_question {
font-size: 5rem;
}
.question_title {
position: relative;
}
.question_title::after {
content: url(./images/expand_more_black_24dp.svg);
}
.what_is_question[open] .question_title::after {
transform: rotate(180deg);
}
.question_title::marker {
content: none;
}
.answer {
background-color: darkkhaki;
font-size: 3rem;
padding-left: 3.5%;
}
<div class="thing">
<h1 class="new_game">QnA</h1>
<details class="what_is_question">
<summary class="question_title">What is the question?</summary>
<p class="answer">The question is the answer.</p>
</details>
</div>
https://codepen.io/consig1iere/pen/bGWXRMW
The problem is that you can't apply transforms to elements with display: inline.
So add display: inline-block; to your .question-title
.what_is_question[open] .question_title::after {
display: inline-block;
transform: rotate(180deg);
}
I have following image as following,
How can i write text on image above and achieve the outcome as the following?
Try this, I hope it'll help you out. Thanks
.wrapper {
position: relative;
}
.wrapper img {
width: 100%;
}
.wrapper label {
color: #fff;
font-size: 24px;
position: absolute;
}
.wrapper #id1 {
left: 20px;
top: 20px;
}
.wrapper #id2 {
right: 20px;
top: 20px;
}
.wrapper #id3 {
left: 20px;
bottom: 20px;
}
.wrapper #id4 {
right: 20px;
bottom: 20px;
}
.wrapper #id5 {
right: 20px;
top: 50%;
transform: rotate(90deg)
}
.wrapper #id6 {
left: 20px;
top: 50%;
transform: rotate(-90deg)
}
<div class="wrapper">
<label id="id1">Text Left!</label>
<label id="id2">Text Right!</label>
<label id="id3">Text Bottom Left!</label>
<label id="id4">Text Bottom Right!</label>
<label id="id5">Text Rotate Right!</label>
<label id="id6">Text Rotate Left!</label>
<img src="https://keyassets.timeincuk.net/inspirewp/live/wp-content/uploads/sites/12/2015/07/Depth-of-field-landscape.jpg" alt="" />
</div>
Assuming you have HTML like:
<div class="container">
<img />
<p>Foo</p>
</div>
something like this would work (you'll have to fiddle the values obviously):
.container {
position: relative;
img{ z-index: 1; // img styles here }
p { position: absolute; left: 0.5rem; top: 0.5rem; z-index: 3; transform: rotate(90deg) }
}
Step by step:
Position the text absolutely
Rotate it 90 degrees
Set a Z-index higher than the image
Position the text correctly on the image
Profit ...
I have a problem, I am using Angular2 , I want have differents styles with ngClass switch the index 'NgFor' but I dont get anything ....
Sorry for my English.
<div class='line'></div>
<clr-icon *ngFor="let step of steps; let i = index" shape="circle"
class='circle' attr.ng-class="circle{{ i + 1 }}"
size="36">
</clr-icon>
<clr-icon *ngIf="steps.length == 1" attr.ng-class="circle{{ 2 }}" shape="circle" class='circle' size="36"></clr-icon>
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.mycontainer {
position: relative;
width: 100%;
display: block;
}
.step {
position: absolute;
left: 0%;
width: 100%;
.circle {
color: black;
margin-top: -30px;
background-color: white;
}
.circle1 {
position: absolute;
left: 0%;
}
.circle2 {
position: absolute;
right: 0%;
background-color: black;
color: yellow;
/*#calcularposicion();*/
}
}
.line {
height: 5px;
width: 100%;
background-color: green;
}
In my second circle I would see color 'yellow' but I don't see anything.
If I inspect the Html I have class='circle' and class='circle2'
Change attr.ng-class to [ngClass]. NgClass is not an attribute. It is a directive provided by Angular.
<clr-icon *ngFor="let step of steps; let i = index" [ngClass]="'circle' + (i + 1)"></clr-icon>
<clr-icon *ngIf="steps.length == 1" [ngClass]="'circle2'"></clr-icon>
I tried the solutions here and here with no luck. My css file as it is:
.JFK {
position: relative;
left: 250px;
height: 200px;
width: 200px;
bottom: -45px;
background-image: url(https://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg);
line-height: 200px;
text-align: center;
}
.JFK a p{
position: relative;
top: -130px;
display: none;
}
.JFK a:hover p{
display: block;
}
.JFK:hover{
opacity: 0.6;
display: block;
}
My html:
<div class = "JFK">
<p>JFK</p>
<p>to</p>
<p>from</p>
</div>
I'm trying to have links appear at the bottom of the image upon hover. The solutions in previous posts have not worked. With my current setup, I cannot see "TO" or "FROM" at all when I load the page.
The hover should be on the .JFK not the .JFK a When you hover over the .JFK it should make the .JFK a p visible.
.JFK:hover a p {
display: block;
}
Here is a link to a jsfiddle with the change: https://jsfiddle.net/efv8ch70/
Hope this helps
.JFK {
position: relative;
top: 50px;
left: 250px;
background-image: url(https://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg);
}
.JFK,
.JFK > p {
height: 200px;
width: 200px;
}
.JFK > p {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
}
.link-wrapper {
display: none;
}
.JFK:hover .link-wrapper {
display: block;
}
<div class="JFK">
<p>JFK</p>
<div class="link-wrapper">
<span>to</span>
<span>from</span>
</div>
</div>
There are lots of ways to solve this problem. This solution is just an example. The actual paragraph has the same hight as the .JFK so it pushes the .link-wrapper down to exactly the spot you want in the normal flow. Hope this helps or gives you some ideas.