I'm a beginner with framework7. I'm trying to insert an icon in a button element.
I'd like to set the icon on the left of the label.
I've achieved my purpose partially.
<a class="button button-fill button-round button-small color- gray" href="#" id="add_field_button" style="float: left;"><i class="material-icons ">add_circles</i>Add</a>
I've put a demo here.
https://jsfiddle.net/ad72krqv/1/
Thank you in advance
Add this CSS
.button {
display: flex;
justify-content: center;
align-items: center;
}
.button > i {
width: 24px;
margin-right: 5px;
}
JSFiddle Link of working demo
Related
Not able to move the button to the right of the page and the text to the center of the page even though I have added the necessary CSS ( float right etc.,)
<div id="project-heading" style = "margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padding-top: 5px" text-align="center">
<span display="inline;" float = "center;" style="color: white;">Visual Analysis of US Accidents Data </span>
<button position = "absolute;" background-color ="black;" color = "white;" float ="right;" display="inline-block;" padding-left = "100%;" id="reset" onclick="reset">Reset
</button>
</div>
display, float, etc.
are all CSS variables that should be included in the style="" part of the HTML, not as keyword parameters. I have demonstrated the correct way to insert them in the snippet below. You can also use right: 0 to align an element to the right side of its parent. It is often more reliable than float. I used right: 10px in this example so the button had a bit of breathing room on its right side.
<h1>Only fixed syntax:</h1>
<div id="project-heading" style = "background: blue;margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padding-top: 5px; text-align: center;">
<span style = "display: inline; float : center; color: white;">
Visual Analysis of US Accidents Data
</span>
<button style="position: absolute; color: white; background-color: black; float: right; display: inline-block; padding-left: 100%" id="reset" onclick="reset">
Reset
</button>
</div>
<h1>Fully fixed version</h1>
<div id="project-heading" style = "background: blue;margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padding-top: 5px">
<span style = "display: inline; float : center; color: white;">
Visual Analysis of US Accidents Data
</span>
<button style="position: absolute; background-color: black; color: white; float: right; display: inline-block; right: 10px" id="reset" onclick="reset">
Reset
</button>
</div>
You have quite a few issues with your code, so let's clean them up and break down what's happening:
First off, don't style inline unless you have some specific reason for doing so. Use classes or ids or even just generic selectors but separating your HTML and your CSS will make your life much easier(and ours when you come looking for assistance! ;) )
You have tags that are opened and never closed which is causing some problems. The float isn't doing anything for you. If you want to position your button to the right of the page using absolute you need to tell it to be on the right using the right attribute. Your headline is centered, you just can't see it because it's white on a white background.
If you are going to style inline, you need to include your style information in the style="" section, otherwise, you're risking issues or invalid code altogether.
Let me know if you need any additional help or explanations :)
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: lightgrey;
}
#project-heading {
margin-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
padding-top: 5px;
text-align: center;
}
.title {
display: inline;
float: center;
color: white;
}
.btn {
position: absolute;
right: 10px;
background-color: black;
color: white;
display: inline-block;
}
<div id="project-heading">
<span class="title">Visual Analysis of US Accidents Data </span>
<button class="btn" id="reset" onclick="reset">Reset</button>
</div>
all i want to do is to be able to create this main page button.
i want to put an image and text next to each other in a button and when click on the button it'll link me to the main page. (i'll give it a <a href... later) i couldn't resize or stretch the image in button.
in order to observe what does my code, i expanded dimensions of the div and button. normally, my button is w:100px, h:30px and the div is w:1000px, h:30px. and it looks like this
i'm new to css & html and as well as asp.net. please help, thanks.
my codes:
<div style="width:800px; height:1000px; margin-left:auto; margin-right: auto; background-color:#D9FFFF">
<button style="width:725px; height:427px; background-size: 5%; background:url('pics/home.png') no-repeat 1px 1px; padding:0; margin:0;">Home Page</button>
</div>
Like I said in the comment, it is not a button it is an anchor. Shouldn't be too hard with basic HTML and CSS knowledge. The thing you probably struggling with is the home icon. Easiest way to get this is by using the font-awesome library by adding it to the head element: <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
and add it as innerHTML to the anchor: <i class="fas iconname"></i> TEXT
a {
text-decoration: none;
color: black;
background-color: lightgrey;
display: inline-flex;
padding: 5px;
width: 100px;
height: 30px;
font-size: 14.5px;
justify-content: space-between;
align-items: center;
}
a > i {
color: grey;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
<i class="fas fa-home"></i> MAIN PAGE
I want to change my icon to a button to use it as copy to clipboard method. But when I do it, the button moves to the right side. Only when I try a around the text it works but of course the formatting is broken.
<mat-list>
<h3 matSubheader>Persönliche Daten</h3>
<mat-list-item>
<button mat-icon-button ngxClipboard [cbContent]="firstname">
<mat-icon matListAvatar>account_box</mat-icon>
</button>
<h4 matLine>{{firstname}}</h4>
<p matLine>Vorname</p>
</mat-list-item>
<mat-divider [inset]="true"></mat-divider>
<mat-list-item>
<mat-icon matListAvatar>description</mat-icon>
<h4 matLine>{{lastname}}</h4>
<p matLine>Nachname</p>
</mat-list-item>
</mat-list>
My CSS:
mat-list-item mat-icon[matListAvatar], .mat-list-item-content mat-icon[matListAvatar] {
background-color: rgba(0,0,0,0.04);
}
mat-list-item mat-icon[matListAvatar], .mat-list-item-content mat-icon[matListAvatar] {
align-items: center;
align-content: center;
justify-content: center;
display: flex;
}
/deep/ .mat-list-item-content {
padding: 0!important;
}
/deep/ .mat-list-base .mat-subheader {
padding: 0!important;
}
p {
font-family: Lato;
color: rgba(0,0,0,.54);
}
Using the (click) property
You can just make the icon behave like a button.
Add a (click) property to it and call the function you want!
<mat-icon (click)="myFunction($event)" matListAvatar>account_box</mat-icon>
Then you can add some :hover css to it to make it feel like a button.
Using HTML/CSS
You can place any content next to the button in a wrapper, you can customize this one in the css to behave differently if needed (if you end up adding more data to display you might have to play around with the flex properties, margin... or you might need to have nested wrappers, etc...)
<button mat-icon-button >
<mat-icon matListAvatar>account_box</mat-icon>
</button>
<div class="test-wrapper">
<h4 matLine>{{firstname}}</h4>
<p matLine> Vorname</p>
</div>
with this css:
.test-wrapper{
padding-right: 0;
padding-left: 16px;
width: 100%;
display: flex;
flex-direction: column;
}
.test-wrapper > *{
margin: 0;
}
I'm trying to learn HTML/CSS better, and I'm trying to modify an existing template (https://github.com/codrops/AnimatedGridLayout).
The template has a grid layout, and I'm trying to make it so that when a grid item is moused over, it changes to show an image.
In the HTML, the code looks like this:
<a class="grid__item" href="#">
<h2 class="title title--preview">Demo</h2>
<div class="loader"></div>
<span class="category">Love & Hate</span>
<div class="meta meta--preview">
<img class="meta__avatar" src="img/authors/2.png" alt="author02" />
<span class="meta__date"><i class="fa fa-calendar-o"></i> 7 Apr</span>
<span class="meta__reading-time"><i class="fa fa-clock-o"></i> 5 min read</span>
</div>
</a>
In the CSS it looks like this:
a:hover, a:focus {
color: #333; outline: none;
}
/* Grid item */
.grid__item {
padding: 45px 55px 30px;
position: relative;
color: inherit;
background: #fff;
min-height: 300px;
cursor: pointer;
text-align: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: center;
justify-content: center;
}
I added the below code to see if I could have an effect at mouseover:
.grid__item:hover {
background-color: yellow;
}
However, this made no change. Was this not the right way to handle a hover?
Any help would be greatly appreciated!
try nesting one parent above to get it right...instead of !important try nesting one more parent class make it priority high
section.grid .grid_item:hover {
background-color: yellow;
}
Add This code to css/style2.css
a.grid__item:hover {
background: red;
}
if this not working try
a.grid__item:hover {
background: red !important;
}
if this still not working try clearing your browser cache CTRL + SHIFT + DEL this works for almost every browser on windows
I am trying to show an image inside the customized circular li. I just want to show a success tick image in that li. I have a CSS as -
span.round-tabs {
width: 50px;
height: 50px;
line-height: 50px;
display: inline-block;
border-radius: 100px;
background: white;
z-index: 2;
position: absolute;
left: 0;
text-align: center;
font-size: 25px;
}
li.success span.round-tabs.one {
background-image: url('img/if_Tick_Mark_Dark_1398912.png');
}
<li class="success">
<a href="#" aria-controls="home" id="DivPatientDetails" name="PatientDetails" >
<span class="round-tabs one">
<i class="icon icon-profile-male"></i>01
<h4>Patient's Details</h4>
</span>
</a>
</li>
But I am getting the result as:
instead of:
What am I missing here?
Either use
background-position: center center;
or use
background-position-y or background-position-x to position the image correctly.
Then you may want to make sure the size is correct using the background-size rule in CSS. If you post a jsfiddle, I'll be happy to implement this solution into that for you to see.