I am using react-icons in one of my projects and I am not able to align the icons (vertically) with the text. Following is what I am getting currently.
As you can see -- The icons are a little higher than the text.
Following is my HTML code:
<div className="route-info-container">
<div>
<p>Difficulty (1-10)</p>
<h2><AiFillFire />{route.difficulty}</h2>
</div>
<div>
<p>Length</p>
<h2><GiTrail />{route.length}</h2>
</div>
<div>
<p>Est Driving Time</p>
<h2><RiTimerFlashFill />{route.estimatedDrivingTime}</h2>
</div>
<div>
<p>Permits</p>
<h2><IoNewspaperSharp />{route.permits? 'Required': 'Not Required'}</h2>
</div>
</div>
Following is my css:
.route-info-container {
display: grid;
grid-template-columns: auto auto;
}
.route-info-container h2 {
font-size: 25px;
margin-top: 10px;
}
It' s because the svg' s alignment. You can't do too much things to svg but try to do this to h2:
h2 {
display: flex;
align-items: center;
}
Related
I want to present tags in one div using ellipsis.
and in the end of the div I want to show how many more tags are not present in the line.
Do I have ant way to do that but to get the element from the dom?
my code:
<div>
<div className={styles.tags}>
tags.toString()
</div>
<div className={styles['more-tags']}>
<div className={styles.text}>{`+${moreTags}`}</div>
</div>
</div>
my scss:
.tags {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: inline-block;
max-width: 15rem;
white-space: pre-wrap;
}
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
I am having a layout which has text and a button on the left side and the image on the right side. The layout is working fine on the desktop but when i switch to the mobile view the ui breaks. On the mobile only the image is showing up. The text and the button is not there.I am using flex for the UI.
<div className='container-1'>
<div className='container-2'>
<div>
<h1>heading</h1>
<p>
Loren Ipsum
</p>
<Button>button</Button>
<p>
lorem ipsum
</p>
</div>
<div>
<img
src={homepage}
width="300"
height="300"
alt='home'
/>
</div>
</div>
</div>
My Css File
.container-1 {
position: relative;
background-image: linear-gradient(180deg, #0000FF 0%, #0000FF 70%);
min-height: 100%;
width: 100%;
}
.container-2 {
display: flex;
flex-direction: row;
justify-content: space-around;
padding-top: 10%;
}
The Problem was it was using display flew as row for mobile as well. I used a media query to display flex as column for mobile and it worked. Thanks
I've a problem with react.
I've one web app with some forms and inputs field.
When I click and use the input field with the keyboard from pc, smartphone or tablet on portrait mode it's all ok, but when I change the orientation of the device and click on one field the keyboard appears, but it cover all the view.
How can I solve this problem?
Example of my Search component form:
<div className="vv-search-form-layout">
<div className="d-flex flex-row search-form">
<input
type='text'
name="search"
value={searchValue}
className="form-control search-text"
onChange={changeSearch}
onKeyPress={onKeyPress}
ref={this.searchInput}
/>
</div>
</div>
css:
.vv-search-form-layout {
display: flex;
justify-content: center;
margin-bottom: 1rem;
#media (min-width: $md) {
margin-bottom: 0;
}
}
.search-form {
text-align: center;
justify-content: center;
align-items: center;
max-width: 35rem;
width: 100%;
}
I am looking for Tabs displayed top to bottom with tab navigation on the left. Is there anyway this can be achieved in Angular Material library?
This codepen by Rahul Sagore uses vanilla Material, not specifically for Angular, but it's exactly what you want. I was looking for the same thing as you; it's a shame Material doesn't offer this, but I can see how it would go against their principles and make Material too extensive.
It comprises of custom css (perhaps overriding, I'm not sure) and use of particular Material classnames. Below I've pasted the contents into a snippet.
I had an issue with the mdl-cell--n-col classes so I changed the content one from 10-col to 6-col so it wouldn't wrap the content beneath the tabs in the restrictive space of this post. You'll probably have to tinker with that yourself, or scrap that and use Material styles the way you know how. Similarly, I cannot see what the .hollow-circle spans are doing, so perhaps they aren't needed.
/*Vertical Tabs*/
.vertical-mdl-tabs {
margin-top: 30px;
}
.vertical-mdl-tabs .mdl-tabs__tab-bar {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding-bottom: 35px;
height: inherit;
border-bottom: none;
border-right: 1px solid rgba(10, 11, 49, 0.20);
}
.vertical-mdl-tabs .mdl-tabs__tab {
width: 100%;
height: 35px;
line-height: 35px;
box-sizing: border-box;
letter-spacing: 2px;
}
.vertical-mdl-tabs.mdl-tabs.is-upgraded a.mdl-tabs__tab.is-active {
border-right: 2px solid #ED462F;
}
.vertical-mdl-tabs.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
content: inherit;
height: 0;
}
.vertical-mdl-tabs.mdl-tabs.is-upgraded .mdl-tabs__panel.is-active, .mdl-tabs__panel {
padding: 0 30px;
}
.vertical-mdl-tabs.mdl-tabs .mdl-tabs__tab {
text-align: left;
}
<script src="https://storage.googleapis.com/code.getmdl.io/1.1.0/material.min.js"></script>
<link href="https://storage.googleapis.com/code.getmdl.io/1.1.0/material.indigo-pink.min.css" rel="stylesheet"/>
<div class="mdl-tabs vertical-mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-grid mdl-grid--no-spacing">
<div class="mdl-cell mdl-cell--2-col">
<div class="mdl-tabs__tab-bar">
<a href="#tab1-panel" class="mdl-tabs__tab is-active">
<span class="hollow-circle"></span>
Tab 1
</a>
<a href="#tab2-panel" class="mdl-tabs__tab">
<span class="hollow-circle"></span>
Tab 2
</a>
<a href="#tab3-panel" class="mdl-tabs__tab">
<span class="hollow-circle"></span>
Tab 3
</a>
</div>
</div>
<div class="mdl-cell mdl-cell--6-col">
<div class="mdl-tabs__panel is-active" id="tab1-panel">
Content 1
</div>
<div class="mdl-tabs__panel" id="tab2-panel">
Content 2
</div>
<div class="mdl-tabs__panel" id="tab3-panel">
Content 3
</div>
</div>
</div>
</div>
you can have verticval tabs by adding vertical attribute to the mat-tab-group and adding following css to your page.
mat-tab-group[vertical] .mat-tab-labels {
display: flex;
flex-direction: column!important;
}
mat-tab-group[vertical] {
display: flex;
flex-direction: row!important;
}
here's the mat-tab-group element with vertical attribute
<mat-tab-group flex="1" vertical>
<mat-tab label="Tab 1"> Loading ... </mat-tab>
<mat-tab label="Tab 2" > Loading ... </mat-tab>
</mat-tab-group>