I want to write some basic mathematical formulas which I handle using mathjax as below:
<html>
<head>
<style>
body a {
float: left;
margin: 0 2px 20px 0;
border: 1px solid #ddd;
padding: 1px;
-moz-border-radius: 4px;
border-radius: 4px;
height:36px;
width: 36px;
}
</style>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</head>
<body>
<a title="\sqrt{a}">
$\sqrt{a}$</a>
<a title="\frac ab">
$\frac ab$</a>
<a title="\begin{bmatrix}a&b\\ c&d\end{bmatrix}">
$\begin{bmatrix}a&b\\ c&d\end{bmatrix}$</a>
</body>
</html>
The problem is the overlapping of big formulas. You can see the demo here:
https://jsfiddle.net/ev6wf0rd/
Is there a way to configure Mathjax to avoid this problem?
You could either :
Increase the a element size, like here (I modified your jsfiddle)
Remove size contraints so it's default to auto : demo here
Decrease size of MathJax items for the elements that overlap demo here
Related
I am working on various contact form 7 controls.
The one that I am having issues with so far is making a radio button bigger, changing the background color and adding a huge gap between the label and the button.
I have looked on the suggested popups here including the subject Make radio button bigger but none seems to make any difference.
Here is a screenshot that contains two images, top image is the out I am getting from my version.
The image below is my preferred version.
Here is what I have tried so far.
I made an ID code of customized-radio in the ID attribute of the radio button control I am using.
On my form, I added the id attribute:
[radio rehireable id:customized-radio label_first "Yes"]
Then custom CSS:
#cuustomized-radio {
background-color:#f1f1f1 !important;
gap: 3.3em; /* space between label and button */
appearance: none;
background-color: #fff;
margin: 0;
font: inherit;
color: currentColor;
width: 1.15em;
height: 1.15em;
border: 0.15em solid currentColor;
border-radius: 50%;
}
Any ideas what I could do differently to make this work?
I hope this simple CSS code will work for you
#cuustomized-radio {
background-color:#f1f1f1 !important;
background-color: #fff;
font: inherit;
color: currentColor;
width: 1.15em;
height: 1.15em;
border: 0.15em solid currentColor;
float:right;
margin:5px;
}
.divdiv {
width:50%;
margin-top:10px;
padding:10px;
background-color:#f1f1f1;
border:1px dashed #000;
border-radius: 5px;
font-size:18px;
}
body {
padding:5%;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body>
<h4>SUBJECT TO REHIRE? <span style="color:red;">*</span></h4>
<div class="divdiv">
<label> Yes </label>
<input id="cuustomized-radio" type="radio" name="test">
</div>
<div class="divdiv">
<label> No </label>
<input id="cuustomized-radio" type="radio" name="test">
</div>
</body>
I used this fiddle directly in my code. The idea is to create a circular button.
https://jsfiddle.net/yeyene/59e5e1ya/
This code is for bootstrap 3 though. When using it referencing bootstrap 4, the button is square rather than circular. Here's an example:
https://jsfiddle.net/NibblyPig/fsedc5p6/
The CSS that it is applying is:
.btn-circle {
width: 30px;
height: 30px;
padding: 6px 0px;
border-radius: 15px;
text-align: center;
font-size: 12px;
line-height: 1.42857;
}
As with all buttons I set the classes to btn and btn-success (or similar) as well as this class too.
Checking the inspector, it is definitely applying this, however something must be overriding or changing this behaviour because it still appears square.
I am unable to find any explanation or working code via google that will produce a circular button in bootstrap 4. Is there any advice?
It is because the .btn-success was overriding with a border-color. You can target them both using .btn-success.btn-circle. Also try to override the hover styles.
Added CSS:
.btn-circle.btn-success {
border-color: transparent;
}
.btn-circle.btn-success:hover {
border-color: transparent;
}
JSfiddle Demo
Need to Update -webkit-appearance: none;
Check the fiddle https://jsfiddle.net/f46ab37x/
If you are using <button></button> then Just add border-radius:50%!important and padding: 1.375rem 0.75rem!important; to .btn.
.btn {
border-radius: 50%!important;
padding: 1.375rem 0.75rem!important;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
I have a number of inline-block divs with plots in them. For now I connect them all to separate instances of the same plot, but they will be distinct in the end.
When I try to style them, e.g.
padding: 10px;
border: 1px solid gray;
Plotly comes up with a double border and ignores my padding.
Of course I could wrap the plotly divs in outer divs and style those,
but surely there must be a way to make plotly divs, meaning divs with an id that is picked up by Plotly.plot, obey general CSS rather than do their own thing?
I am using the Transcrypt Python to JavaScript compiler and the plain plotly.js library, without any of the remote stuff. Code is as follows:
HTML:
<html>
<head>
<style>
div {
display: inline-block;
overflow: hidden;
box-sizing: border-box;
padding: 10;
width: 500;
height: 500;
border: 1px solid gray;
}
</style>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="lin"></div>
<div id="log"></div>
<div id="polar"></div>
<div id="ribbon"></div>
<div id="wireframe"></div>
<div id="surface"></div>
<div id="bar"></div>
<div id="pie"></div>
<div id="gant"></div>
<script src="__javascript__/plotly_demo.js"></script>
</body>
</html>
Python:
__pragma__ ('jskeys') # For convenience, allow JS style unquoted string literals as dictionary keys
import numscrypt
import math
xValues = [2 * math.pi * step / 200 for step in range (201)]
yValues = [math.sin (xValue) + 0.5 * math.sin (xValue * 3 + 0.25 * math.sin (xValue * 5)) for xValue in xValues]
for id in ('lin', 'log', 'polar', 'ribbon', 'wireframe', 'surface', 'bar', 'pie', 'gant'):
Plotly.plot (
document.getElementById (id),
[{
x: xValues,
y: yValues
}],
{
margin: {t: 0}
}
)
}
I've updated your markup. Wrapped your graph divs with a .wrapper element for easier formatting. Inline block elements create some space on screen, you can prevent this simply using the CSS float property. Don't forget to clear float to prevent parent collapsing, like I've done in the updated code. I've also applied some negative margin to get rid of double border:
<html>
<head>
<style type="text/css">
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.wrapper{
padding: 1px 0 0 1px;
}
.wrapper div {
float: left;
overflow: hidden;
box-sizing: border-box;
padding: 10px;
width: 500px;
height: 500px;
border: 1px solid gray;
margin-top: -1px;
margin-left: -1px;
}
</style>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div class="wrapper clearfix">
<div id="lin"></div>
<div id="log"></div>
<div id="polar"></div>
<div id="ribbon"></div>
<div id="wireframe"></div>
<div id="surface"></div>
<div id="bar"></div>
<div id="pie"></div>
<div id="gant"></div>
</div>
<script src="__javascript__/plotly_demo.js"></script>
</body>
</html>
You can checkout this page to understand how .clearfix actually works - http://www.tutorialrepublic.com/css-tutorial/css-alignment.php
I've started out trying to build a HTML 5 website but have ran into a problem with CSS. Below is a MCVE of the issue:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
div.content {
margin-left: auto;
margin-right: auto;
text-align: left;
width: 75%;
}
div.topbar {
background-color: #777777;
border-bottom: 1px #000000 solid;
color: #FFFFFF;
padding: 5px;
}
</style>
<div class="topBar">
<p>MCVE</p>
</div>
<div class="content">
<p>Here is some content.</p>
</div>
</body>
</html>
If you take out the <!DOCTYPE html> tag, the top bar across the top of the page works but if you put it in, it doesn't render correctly as the background colour of the div element is not rendered and neither is the border.
What am I doing wrong here so that the div.topBar style definition isn't being fully respected?
The problem is that
div.topbar
Should be
div.topBar
Because <div class="topBar"> is not <div class="topbar">
It is still being rendered in quirks mode for some reason but html5 mode wont render it.
(Demo)
HTML and CSS are case sensitive.
'topbar' and 'topBar' are different. Either capitalize the name of the class or correct the div.topbar.
I have created a page action extension that uses a popup.html file. It used to work perfectly. When I click the icon it displays a small box with only the corner of the popup.html page visible. I set the body and html css height and width but had no luck of making the box bigger. I also moved the css onto another page called popup.css and added to the popup.html head.
Has anyone run into this issue?
Please help.
HTML:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="popup_script.js"></script>
<link href="popup.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul>
<li id="all">All</li>
<li id="title">Name</li>
<li id="artist">Artist</li>
<li id="album">Album</li>
<li id="art">Artwork</li>
</ul>
<textarea id="info" type="text"></textarea>
</body>
</html>
CSS:
body {
font-family: arial;
font-size: 13pt;
margin: 0;
padding: 0;
color: #06477D;
}
ul {
list-style-type: none;
cursor: pointer;
padding: 0;
margin: 0;
}
li {
text-align: center;
padding: 5px 20px;
}
li:hover {
background: #06477D;
color: white;
}
textarea#info {
position: absolute;
}
If you're running the latest Chrome Canary build, that could be the problem. All of my extension's popups are showing up like this.
Try on a different build of Chrome?
EDIT: Yeah, I just found some bug reports for Chrome/Chromium:
https://code.google.com/p/chromium/issues/detail?id=180724
https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/chromium-bugs/09xiPfAfrIc
Set the height and width properties in your html body tag. Means, simply add style to your existing body tag with height and width properties.