This is a spin-off of this question - to the point and no css.
Why is the question mark icon (help_circle) having a wider container ?
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet' type='text/css'/>
<i class="material-icons" style="border:1px solid red;">help_circle</i>
<i class="material-icons" style="border:1px solid red;">delete_forever</i>
<i class="material-icons" style="border:1px solid red;">insert_chart</i>
Related
I'm using the latest version of font-awesome svg+js. I can only change the color of the icons with inline style.
Whenever I add a class, the icon stops showing and it becomes a flashing exclamation point.
This is a small fiddle showing the problem https://jsfiddle.net/CaioSantAnna/Lb5dpo7v/7/
<script defer src="https://use.fontawesome.com/releases/v5.8.2/js/all.js"></script>
<span class="fa-4x" style="background: #4CAF50">
<i class="far fa-circle" style="color:white"></i>
<i class="far fa-circle fa-white"></i>
</span>
<style type="text/css">
.fa-white{
fill:#ffffff;
color: #ffffff;
}
</style>
Is it possible to achieve the inline result with a common css class ?
Thanks.
Apparently the prefix fa-for an additional class will cause an error. The solution would be using an extra class without the prefix: for example white instead of fa-white
.white{
fill:#ffffff;
color: #ffffff;
}
<script defer src="https://use.fontawesome.com/releases/v5.8.2/js/all.js"></script>
<span class="fa-4x" style="background: #4CAF50">
<i class="far fa-circle"></i>
<i class="far fa-circle white"></i>
</span>
An alternative solution would be using the prefixed class on the wrapping span:
.fa-white{
fill:#ffffff;
color: #ffffff;
}
<script defer src="https://use.fontawesome.com/releases/v5.8.2/js/all.js"></script>
<span class="fa-4x fa-white" style="background: #4CAF50">
<i class="far fa-circle"></i>
<i class="far fa-circle"></i>
</span>
I have a basic MathJax code of
<script type="text/javascript">
MathJax.Hub.Config({
extensions: ["tex2jax.js", "TeX/AMSmath.js"],
jax: ["input/TeX", "output/SVG"],
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<div>$$a = b + c$$</div>
I expect the formula should be replaced with an SVG code, but the result is the same as HTML output, MathML codes:
<div>
<span class="MathJax_Preview" style="color: inherit; display: none;"></span>
<span class="mjx-chtml MJXc-display" style="text-align: center;">
<span id="MathJax-Element-1-Frame" class="mjx-chtml MathJax_CHTML" tabindex="0" data-mathml="
<math
xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mi>a</mi>
<mo>=</mo>
<mi>b</mi>
<mo>+</mo>
<mi>c</mi>
</math>" role="presentation" style="font-size: 113%; text-align: center; position: relative;">
<span id="MJXc-Node-1" class="mjx-math" aria-hidden="true">
<span id="MJXc-Node-2" class="mjx-mrow">
<span id="MJXc-Node-3" class="mjx-mi">
<span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.224em; padding-bottom: 0.279em;">a</span>
</span>
<span id="MJXc-Node-4" class="mjx-mo MJXc-space3">
<span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.058em; padding-bottom: 0.335em;">=</span>
</span>
<span id="MJXc-Node-5" class="mjx-mi MJXc-space3">
<span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.279em;">b</span>
</span>
<span id="MJXc-Node-6" class="mjx-mo MJXc-space2">
<span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.279em; padding-bottom: 0.445em;">+</span>
</span>
<span id="MJXc-Node-7" class="mjx-mi MJXc-space2">
<span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.224em; padding-bottom: 0.279em;">c</span>
</span>
</span>
</span>
<span class="MJX_Assistive_MathML MJX_Assistive_MathML_Block" role="presentation">
<math
xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mi>a</mi>
<mo>=</mo>
<mi>b</mi>
<mo>+</mo>
<mi>c</mi>
</math>
</span>
</span>
</span>
<script type="math/tex; mode=display" id="MathJax-Element-1">a = b + c</script>
</div>
How can I get the output as SVG vector elements?
MathJax configuration script should be type of text/x-mathjax-config not text/javascript. Moreover ?config=TeX-MML-AM_CHTML seems to be somehow overriding the output/SVG. I used ?config=default. You can get more information about the configuration files here
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js", "TeX/AMSmath.js"],
jax: ["input/TeX", "output/SVG"],
})
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=default"></script>
<div>$$a = b + c$$</div>
In case anyone is still using MathJax 2.7.x, modifying the config parameter will work for rendering svg on initial load.
So change TeX-AMS_CHTML to TeX-AMS_SVG
or change TeX-MML-AM_CHTML to TeX-MML-AM_SVG
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_SVG"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_SVG"></script>
I am facing some issue with object overlapping with SVG in IE 10 and IE 11.
To understand this problem i have created one html file with simple rectangle and line. We have used SVG to draw line element.
Here half of the line is being displayed, but rest of the line that is overlapping the rectangle is not visible even though the z-index of line is higher than rectangle.
Here is the content of HTML file,
<html>
<head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<line id="2" style="z-index:2; position:absolute;stroke:#000000;stroke-width:3px;" x1="990" y1="242" x2="567" y2="242"></line>
</svg>
<div ID="1" height="277">
<table id="1_rectangle" type="rectangle" height="277" style="position: absolute;top: 129;left: 242;width: 567;border: 1 solid #000000;color: #000000;color: #000000;background-color: #ffff00;border-collapse: collapse; table-layout: fixed;z-index:1;background-image: -ms-linear-gradient(top, #ffff00 0%, #ffff00 100%);">
<tr>
<td height="277"></td>
</tr>
</table>
</div>
</body>
</html>
<html>
<head>
<body>
<div style="position: relative; z-index:2; margin-top:300px; margin-left:100px; ">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<line x1="0" y1="10" x2="300" y2="10" style="stroke:#000000; stroke-width:15px;"/>
</svg>
</div>
<div ID="1" height="277">
<table id="1_rectangle" type="rectangle" height="277" style="position: absolute;top: 129;left: 242;width: 567;border: 1 solid #000000;color: #000000;color: #000000;background-color: #ffff00;border-collapse: collapse; table-layout: fixed;z-index:1;background-image: -ms-linear-gradient(top, #ffff00 0%, #ffff00 100%);">
<tr>
<td height="277"></td>
</tr>
</table>
</div>
</body>
</html>
i am now working for several days now on a header for our project. Everything is ok - but the layout not.
In my Layout I have on the left a logo, in the middle a navbar, and on the right Login/Logout/Register links.
My Problem is, that I can't center the navbar as I want, if I try, then it is only for my display resolution ok and e.g. if I zoom in or out, it is going bad.
This is also very nice, but I don't know how to do it.
I would be really glad if somebody could help me.
Thanks in advance.
HTML
<body>
<div class="row">
<div class="span3">
<img src="/resources/img/logos/bb_logotype_blue_110.png" />
</div>
<div class="span6">
<!-- NavBar -->
<ul id="navbar">
<li>Product</li>
<li>Support</li>
<li>Blog</li>
<li>About</li>
</ul>
</div>
<div class="span3"></div>
<div id="nav-account" class="nav-collapse pull-right">
<ul class="nav">
<li><a id="register" href="/register">Register</a></li>
<li><a id="login" href="/login/form">Login</a></li>
</ul>
</div>
</div>
</div>
<div class="container" style="margin-top:3em">
<h1 id="title"></h1>
... some stuff ...
</div>
CSS
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
#navbar li
{
display: inline;
border-right: 2px solid black;
padding-left: 20px;
padding-right: 20px;
font-weight: bold;
font-size: 16pt;
}
#navbar li:last-child
{
border-right: 0;
padding-right: 0;
}
</style>
In bootstrap, if you place elements inside a <container> block, they will be automatically centered and resized to fit in the grid layout. Perhaps that is what you are looking for.
I am starting with Twitter Bootstrap and have a question about how layout functions in it. Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Test</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4">a</div>
<div class="span8">b</div>
</div>
<div class="row">
<div class="span12">c</div>
</div>
</div>
</body>
</html>
style.css:
div.container
{
background-color:#aaa;
}
div.span4, div.span8, div.span12
{
background-color:#eee;
border: 1px solid #888;
border-radius:3px;
}
Adding border to span4 and span8 increases their width and I end up with this:
span4 and span8 get stacked while they should be on the same line. I realize I could decrease their width in my .css file and correct this, or use this:
http://paulirish.com/2012/box-sizing-border-box-ftw/
but does Bootstrap provide means to correct this (not adding extra CSS every time I add or remove border, etc)
The span classes in bootstrap have specific widths so adding a border throws off the total for the row and forces them to wrap. To get around this I usually put the border styling on a div inside the div with the span class. Something like this:
HTML
<div class="row">
<div class="span4">
<div>a</div>
</div>
<div class="span8">
<div>b</div>
</div>
</div>
CSS
.span4 > div, .span8 > div
{
background-color:#eee;
border: 1px solid #888;
border-radius:3px;
}
I had exactly the same issue and playing with the box-sizing didn't help at all. The only solution that worked for me in the end was to use row-fluid.
The difference with row-fluid is that they are based on percentages, not fixed pixels. Then the child spans in a row always add up to 12, instead of adding up to their parent span width in the normal pixel width rows.
So for example yours would now be
<div class="container">
<div class="row-fluid">
<div class="span4">a</div>
<div class="span8">b</div>
</div>
<div class="row-fluid">
<div class="span12">c</div>
</div>
</div>
Now you don't get any issues with changing margins, paddings, or borders.
It sounds like you want your divs to stay on the same line, yes? To do that you'll have to specify a width and float them. Divs tend to always want to stack on top of each other.
Here's a fiddle: http://jsfiddle.net/me73v/
Another option would be to tweak the span widths with JQuery:
$(".some-bordered-container [class*=span] ").each(function(index) {
$(this).width($(this).width()-1);
});
It seems to work well for me. I don't miss the pixels.
You may also use negative margins :
div.span4, div.span8, div.span12
{
background-color: #eee;
border: 1px solid #888;
border-radius: 3px;
margin: -1px;
}
It's not as good a solution as using box-sizing: border-box, IMHO, but it's just worth noticing it works, if you're forced to use box-sizing: content-box.