I am just using float: left on an icon right now because I am struggling with positioning the text in my button such that the icon is in the "middle" (20% of the left) and the text is in the middle (80% of the right).
Like this:
**********************************
* Icon Text will be here *
* *
**********************************
Here is how I have the button set up:
<button class="button button-block">
<i class="ion-plus-round"></i><span>Add to Favorites</span>
</button>
Try CSS flexbox:
#container {
display: flex;
align-items: center;
}
#container > * {
margin-right: 5px;
}
<button>
<span id="container">
<img src="http://i.imgur.com/60PVLis.png" width="25" height="25" alt="">
<span>Add to Favorites</span>
</span>
</button>
I used a span to wrap the content because some browsers don't accept button elements as flex containers.
Browser Support
Flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE 10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.
How about something like this ?
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope) {
});
.button-block {
display: inline-block;
vertical-align: middle;
}
.button-block i {
margin-right: 15px;
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Pull to Refresh</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-content>
<div class="tabs" style="height:auto;">
<div class="row">
<div class="col" style="padding: 0">
<button class="button button-block button-positive">
<i class="ion-plus-round"></i><span>Add to Favorites</span>
</button>
</div>
</div>
</div>
</ion-content>
</body>
</html>
Here is an example using Font Awesome.
Add a left margin to the span to control the spacing between the two inline elements (i and span).
If you specify a width for the button, then you can set widths to the two child elements as needed.
button span {
margin-left: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<button class="button button-block">
<i class="fa fa-plus-circle"></i><span>Add to Favorites</span>
</button>
.btn-cont {Margin-left: 12px;}
<button><span class="btn-cont">Hello World</span><button>
Related
I followed the example code here to put a dismissible drawer under a top app bar but it doesn't work.
Here is what I tried:
// Note: these styles do not account for any paddings/margins that you may need.
body {
display: flex;
height: 100vh;
}
.mdc-drawer-app-content {
flex: auto;
overflow: auto;
position: relative;
}
.main-content {
overflow: auto;
height: 100%;
}
.app-bar {
position: absolute;
}
// only apply this style if below top app bar
.mdc-top-app-bar {
z-index: 7;
}
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Default Page Title</title>
<link rel="stylesheet" type="text/css" href="drawer.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap">
<link rel="stylesheet" href="https://unpkg.com/material-components-web#4.0.0/dist/material-components-web.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="./drawer.css">
</head>
<header class="mdc-top-app-bar app-bar" id="app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<button class="mdc-top-app-bar__navigation-icon mdc-icon-button material-icons" href="#">menu</button>
<span class="mdc-top-app-bar__title">Dismissible Drawer</span>
</section>
</div>
</header>
<aside class="mdc-drawer mdc-drawer--dismissible mdc-top-app-bar--fixed-adjust">
<div class="mdc-drawer__content">
<div class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated" href="#" aria-current="page">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
<span class="mdc-list-item__text">Inbox</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
<span class="mdc-list-item__text">Outgoing</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
<span class="mdc-list-item__text">Drafts</span>
</a>
</div>
</div>
</aside>
<div class="mdc-drawer-app-content mdc-top-app-bar--fixed-adjust">
<main class="main-content" id="main-content">
App Content
</main>
</div>
<body>
<script src="https://unpkg.com/material-components-web#4.0.0/dist/material-components-web.min.js"></script>
<script>
// Instantiate MDC Drawer
const drawerEl = document.querySelector('.mdc-drawer');
const drawer = new mdc.drawer.MDCDrawer.attachTo(drawerEl);
// Instantiate MDC Top App Bar (required)
const topAppBarEl = document.querySelector('.mdc-top-app-bar');
const topAppBar = new mdc.topAppBar.MDCTopAppBar.attachTo(topAppBarEl);
topAppBar.setScrollTarget(document.querySelector('.main-content'));
topAppBar.listen('MDCTopAppBar:nav', () => {
drawer.open = !drawer.open;
});
</script>
</body>
</html>
In order to have the header on the side of the dismissble drawer, you need the following structure:
// Instantiate MDC Drawer
const drawerEl = document.querySelector('.mdc-drawer');
const drawer = new mdc.drawer.MDCDrawer.attachTo(drawerEl);
// Instantiate MDC Top App Bar (required)
const topAppBarEl = document.querySelector('.mdc-top-app-bar');
const topAppBar = new mdc.topAppBar.MDCTopAppBar.attachTo(topAppBarEl);
topAppBar.setScrollTarget(document.querySelector('.main-content'));
topAppBar.listen('MDCTopAppBar:nav', () => {
drawer.open = !drawer.open;
});
// Note: these styles do not account for any paddings/margins that you may need.
body {
display: flex;
height: 100vh;
}
.mdc-drawer-app-content {
flex: auto;
overflow: auto;
position: relative;
}
.main-content {
overflow: auto;
height: 100%;
}
.app-bar {
position: absolute;
}
// only apply this style if below top app bar
.mdc-top-app-bar {
z-index: 7;
}
<!-- IMPORTS -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap">
<link rel="stylesheet"
href="https://unpkg.com/material-components-web#4.0.0/dist/material-components-web.min.css">
<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- CONTENT -->
<aside class="mdc-drawer mdc-drawer--dismissible">
<div class="mdc-drawer__content">
<div class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated"
href="#"
aria-current="page">
<i class="material-icons mdc-list-item__graphic"
aria-hidden="true">inbox</i>
<span class="mdc-list-item__text">Inbox</span>
</a>
<a class="mdc-list-item"
href="#">
<i class="material-icons mdc-list-item__graphic"
aria-hidden="true">send</i>
<span class="mdc-list-item__text">Outgoing</span>
</a>
<a class="mdc-list-item"
href="#">
<i class="material-icons mdc-list-item__graphic"
aria-hidden="true">drafts</i>
<span class="mdc-list-item__text">Drafts</span>
</a>
</div>
</div>
</aside>
<div class="mdc-drawer-app-content">
<header class="mdc-top-app-bar app-bar"
id="app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<button class="mdc-top-app-bar__navigation-icon mdc-icon-button material-icons"
href="#">menu</button>
<span class="mdc-top-app-bar__title">Dismissible Drawer</span>
</section>
</div>
</header>
<main class="main-content"
id="main-content">
App Content
</main>
</div>
<!-- IMPORTS -->
<script src="https://unpkg.com/material-components-web#4.0.0/dist/material-components-web.min.js"></script>
Changes to make this work:
First, you don't need the class mdc-top-app-bar--fixed-adjust since we won't need to adjust the items anymore
Next, move the header itself into the app content (here, called mdc-drawer-app-content).
I looked at this example's HTML in order to see how they did it themselves
Here is the custom CSS that worked for me. Mine is a permanent drawer, so you may need some JS to apply the changes dynamically if you want the drawer to be dismissible, but it solves the layout issues.
First, the critical bit:
.mdc-drawer {
position: fixed;
top: 64px;
}
Since the drawer is now fixed-position, it no longer affects the layout, and the top bar sees it has room to fill the whole width of the page. Pushing the drawer down 64 px keeps it from covering the top bar.
However, this has some side-effects that have to be dealt with. First, most obviously, your main content does the same thing the top bar does--it thinks it has room to fill the whole page, so it gets lost behind the drawer. This is fixable by simply pushing it over:
main {
margin-left: 255px;
}
Second, you will notice that if you resize the viewport, the drawer doesn't show a scroll bar when it should, and when the scroll bar does appear, it won't go all the way to the bottom. This is because you've pushed the bottom of the drawer down off the page.
To fix this, make the drawer's scrollable content shorter:
.mdc-drawer__content {
height: calc(100% - 128px);
}
(I would have expected it to be 100% - 64px, but for some reason it needs 128. I haven't figured out why.)
I am using Bootstrap 3 tooltip but on one page i want to increase the size of them.
I don't want to affect the rest of the site.
I have tried the following code but it doesn't work so i was wondering if i have the syntax wrong or something.
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
.dashboard+.tooltip>.tooltip-inner {
max-width: 350px;
width: 350px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-xs-12 col-md-7">
<p>This week:</p>
</div>
<div class="col-xs-12 col-md-4">
<p id="extTotalThisWk" class="dashboard" data-html="true" data-toggle="tooltip" data-placement="bottom" style="cursor: pointer" data-original-title="
<span class='text-left'>
<p style='padding-top: 5px'>This total number is made up from:</p>
<ul style='padding-bottom: 5px'>
<li>Added this week - Deleted this week</li>
</ul>
</span>">123</p>
</div>
<div class="hidden-xs col-md-1"></div>
</div>
I have also tried it without the +.tooltip in the CSS but it still doesn't apply it.
Also i have tried the following but still didn't work
<span class='text-left' style='max-width: 350px; width: 350px;'>
Obviously if i just use .tooltip-inner it works but this affects the whole site which i don't want to do.
If it is about selecting only that tooltip inside #extTotalThisWk, then you can use the id as a selector .
#extTotalThisWk + .tooltip > .tooltip-inner
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
#extTotalThisWk + .tooltip > .tooltip-inner {
max-width: 350px;
width: 350px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<p id="extTotalThisWk" class="dashboard" data-html="true" data-toggle="tooltip" data-placement="bottom" style="cursor: pointer" data-original-title="
<span class='text-left' >
<p>This total is:</p>
<div>Added this week - Deleted this week</div>
</span>">
123</p>
<p id="extTotalThisWkBis" class="dashboard" data-html="true" data-toggle="tooltip" data-placement="bottom" style="cursor: pointer" data-original-title="
<span class='text-left' >
<p>This total is:</p>
<div>Added this week - Deleted this week</div>
</span>">
another one , another id</p>
It is about
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.
You can wrap your code inside a div and can use > selector from parent class.Make sure that span elements are inline, so set them to block and give the style to it. Below is the working snippet
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
.main-holder>.tooltip>.tooltip-inner {
max-width: 500px;
text-align: center
}
span.text-left {
display: block;
width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="main-holder">
<p id="extTotalThisWk" class="dashboard" data-html="true" data-toggle="tooltip" data-placement="bottom" style="cursor: pointer" data-original-title="
<span class='text-left'>
<p>This total is:</p>
<div>Added this week - Deleted this week</div>
</span>">
123</p>
</div>
I have button which has icon in it. I am trying to display text on the left and icon on the right using CSS float: right; but icon and text is still shown centered.
Here is HTML:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/button/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.bootstrap.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.2.516/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<div>
<h4>Basic Button</h4>
<p>
<button id="primaryTextButton" class="k-button" title="Example of tool tip!" >Primary Button
<span class="k-icon k-i-info">
</button>
</span>
</p>
</div>
<script>
$(document).ready(function () {
});
</script>
<style>
.demo-section p {
margin: 0 0 30px;
line-height: 50px;
}
.demo-section p .k-button {
margin: 0 10px 0 0;
}
.k-primary {
min-width: 150px;
}
.k-button {
min-width: 400px;
}
.k-icon{
padding: 10px;
font-size: 32px;
}
</style>
</div>
</body>
</html>
What I am missing here? What do you I need to change to the the icon show on the right?
Try wrapping a div around your button and apply overflow: auto to it.
<div style="overflow: auto;"><button id="reportBtn_33301" type="button" class="k-button k-button-icontext" title=" data-role="button" role="button" aria-disabled="false" tabindex="0">
<span class="k-icon k-i-info"></span>
Example
</button></div>
<span class="k-icon k-i-info"></span>
'span' tag default display property is inline element.
You need to change it to display inline-block to work. Then the float will work
Change it to display block with some small width, so that it fits in button, then try giving float property to it.
Read this : https://developer.mozilla.org/en-US/docs/Web/CSS/display
I just wants to display a font awesome icon and text in a line:
<th>
<span>
<a>
<i style="color:green;font-size:22px;" class="fa fa-plus-circle" aria-hidden="true"></i>
</a>
</span>
<span> Add Task</span>
</th>
It's working but the problem is =>
If you take a look at above pic then you can see the text is not on the middle of the icon. I tried to put some margin there but it's not working. Can anybody help me?
Target the element containing the font-awesome icon. Set position as relative and adjust top value;
a {
text-decoration: none;
font-family: Arial;
color: #333;
}
/*Example 1*/
i {
color: green;
vertical-align: sub;
font-size: 50px;
}
i::before {
font-size: 30px;
}
/*Example 2*/
span {
color: green;
font-size: 50px;
position: relative;
top: 4px;
}
span::before {
font-size: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<!--Example 1-->
<a href="#">
<i class="fa fa-plus-circle" aria-hidden="true"></i> Add Task
</a>
<br>
<!--Example 2-->
<a href="#">
<span class="fa fa-plus-circle" aria-hidden="true"></span> Add Project
</a>
Example Code Pen: https://codepen.io/Omi236/pen/KqbQoO?editors=1100
In your case, you just need to use font size property at parent level.
Working example
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<a style="font-size:16px;"><i class="fa fa-plus-circle"style="color:green;"></i><b> Add New</b></a>
</body>
</html>
At the bottom of the page, I would like a yellow bar to go across and have social media links and other small details. I want the links to be on the right and small details to be on the left.
HTML:
<footer>
<div class="one-third"></div>
<div class="one-third"></div>
<div class="one-third">
<img src="images/facebook.svg" />
</div>
</footer>
CSS:
footer {
width: 100%;
background-color: #f5c300;
}
.one-third {
float:right;
}
As I was writing this, I figured that the .one-third is incorrect for the CSS part and maybe it should be footer a img {...}.
Update: No even as I did this ^ it still got rid of the background color of the footer. I then threw a BG color on the footer a img style and it only changed behind the icon, not the whole footer.
When you float an element you take it out of the current document flow. What does that mean? Well, as far as container elements are concerned those floated elements don't take up space. If the container element doesn't have any content taking up space (height), then the height of the container is 0 and no background color. Even though floated elements don't take up space, other elements will "see" them and flow around them.
How to fix? Clear the float. The most popular method is to use a clearfix. A clearfix is typically a CSS class. I use the micro clearfix by Nicolas Gallagher.
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
<footer class="cf"><!-- floated elements --></footer>
Another clearfix solution is to apply overflow: hidden; to the element containing floated elements. This has some drawbacks as sometimes you don't want to hide content that overflows the parent.
footer {
width: 100%;
background-color: #f5c300;
overflow: hidden;
}
Hi please check the plunker https://plnkr.co/edit/Zmp66hXeiYAhS3VUyl8E?p=preview
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<script data-require="jquery" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Basic plunk!</h1>
<!-- Put your html here! -->
<div class="footer">
<div class="pull-right">
<ul class="list-icons">
<li>
<a href="">
<em class="fa fa-twitter-square"></em>
</a>
</li>
<li>
<a href="">
<em class="fa fa-facebook-square"></em>
</a>
</li>
<li>
<a href="">
<em class="fa fa-google-plus-square"></em>
</a>
</li>
<li>
<a href="">
<em class="fa fa-instagram"></em>
</a>
</li>
<li>
<a href="">
<em class="fa fa-flickr"></em>
</a>
</li>
<li>
<a href="">
<em class="fa fa-pinterest-square"></em>
</a>
</li>
</ul>
</div>
<div>
<strong>Copyright</strong> Example
</div>
</div>
</body>
</html>
and CSS
/* Put your css in here */
h1 {
color: red;
}
.footer {
background: none repeat scroll 0 0 yellow;
border-top: 1px solid #e7eaec;
bottom: 0;
left: 0;
padding: 10px 20px;
position: absolute;
right: 0;
}
ul
{
list-style:none
}
ul li
{
float:left;
padding-right:20px;
}