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>
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 am wondering how the special text box in readthedocs.org is made.
For instance in:
I think there is much more than tweaking the css file, and I would really like to create one on my own.
Thanks in advance!
EDIT: I know the overall box comes from the note directive. However, my question is: how do they make this "!" mark? I cannot find the clue in the css file.
It's an FontAwesome icon
div {
background-color: skyblue;
padding: 3px 10px;
}
.fa-exclamation-circle {
color: white;
}
span {
color: white;
margin-left: 6px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />
<div>
<i class="fa fa-exclamation-circle" aria-hidden="true"></i>
<span>Note</span>
</div>
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
I was wondering is it possible to give each tooltip a different background color in materialize.css framework?
When the tooltip is activated I don't see any additional markup generated in the inspector, therefore can not target with CSS.
Tooltip color can be changed using css. You have to override default css as follow. Assign your color code to background-color in backdrop class.
<style>
.backdrop{
background-color: purple;
}
</style>
Following is sample working code snippet for 4 buttons which show tooltip.
<!DOCTYPE html>
<html>
<head>
<title>Tooltip</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--CSS for tooltip-->
<style>
.backdrop{
background-color: purple;
}
</style>
</head>
<body class="row">
<div class="col s12" >
<div class="col s12"> <h4> Click following</h4> </div>
<!-- data-position can be : bottom, top, left, or right -->
<!-- data-delay controls delay before tooltip shows (in milliseconds)-->
<a class="btn tooltipped col s2" data-position="bottom" data-delay="50" data-tooltip="I am tooltip"> Bottom</a>
<p class="col s1"></p><!--for making space-->
<a class="btn tooltipped col s2" data-position="top" data-delay="150" data-tooltip="I am tooltip"> Top</a>
<p class="col s1"></p><!--for making space-->
<a class="btn tooltipped col s2" data-position="left" data-delay="250" data-tooltip="I am tooltip"> Left</a>
<p class="col s1"></p><!--for making space-->
<a class="btn tooltipped col s2" data-position="right" data-delay="550" data-tooltip="I am tooltip"> Right</a>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
</body>
</html>
Tooltips appear like this in materialize:
I guess if you figure out the ID of the tooltip you want to change the background of you can do something like this: #TOOLTIP-ID.backdrop {background-color: red;}
You can customise a tooltip with the following css (Materialize 1.0.0)
.material-tooltip {
padding: 10px 8px;
font-size: 1rem;
z-index: 2000;
background-color: transparent;
border-radius: 2px;
color: #fff;
min-height: 36px;
line-height: 120%;
opacity: 0;
position: absolute;
text-align: center;
max-width: calc(100% - 4px);
overflow: hidden;
left: 0;
top: 0;
pointer-events: none;
visibility: hidden;
background-color: #323232;
font-family: "Roboto Mono";
font-size: 0.8em;
font-weight: 700;
}
To specify diffrent color for each tooltip you can do it like this:
while initializing tooltips add this function:
$('.tooltipped').tooltip({delay: 50}).each(function () {
var background = $(this).data('background-color');
if (background) {
$("#" + $(this).data('tooltip-id')).find(".backdrop").addClass(background);
}
});
and then on your tooltip specify it like this:
<a href="#!" class="tooltipped"
data-position="bottom"
data-delay="50"
data-tooltip="I'm a tooltip"
data-background-color="red lighten-3">
as you can see I'm changing the class attribute so you can use materialize-css colors
I solved it like this
$('.tooltipped').tooltip({delay: 50});
.material-tooltip .backdrop{
background-color: #DB0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css" rel="stylesheet"/>
<div class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am tooltip" >
Test Tooltip
</div>
For current version of materialize.css (1.0.0) you should style .material-tooltip and .tooltip-content
like this (sass):
.material-tooltip
background-color: white
border-color: gray
border-style: solid
border-width: 1px
.tooltip-content
padding: 3px
font-size: .8rem
background-color: transparent
color: #000
max-width: 250px
Updated Answer for 1.0
To style the tooltip's background etc:
.material-toolip {
background:#000;
}
To style the actual text within the tooltip use the following:
.material-tooltip .tooltip-content
{
font-size:12px;
}
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.