I am trying to center a spinner in a button. The spinner will appear while the system is getting a response. I have changed margins and padding and the changes show when I inspect element, but it just adds margin and padding to the bottom without moving the spinner further up within the button.
Here is my Jade:
div.form-group
div.col-sm-4
button.form-control.btn.btn-success.strong-button(type='submit' ng-model='pressed' ng-disabled="pressed") Delete
spinner(ng-show="submitDelete")
The css for spinner is
.font-awesome-spinner{
width: 100%;
text-align: center;
}
The spinner element creates a div inside the button element that looks like (taken from page source)
<button (all the stuff here)>
<div class="font-awesome-spinner ng-isolate-scope" ng-show="submitDelete">
<i class="fa fa-circle-o-notch fa-spin"
::before
</i>
</div>
</button>
You cannot center a block element like a DIV with text-align: center; Set the width of your spinner div and then add margin: auto; to the spinner div.
Also your HTML is malformed. Check (all the stuff here) in your button element.
<!DOCTYPE html>
<head>
<style type="text/css">
#button_element {
width: 100px;
}
#button_element .font-awesome-spinner {
width: 50px;
margin: auto;
}
</stlye>
</head>
<body>
<button id="button_element">
<div class="font-awesome-spinner ng-isolate-scope" ng-show="submitDelete">
<i class="fa fa-circle-o-notch fa-spin"></i>
</div>
</button>
</body>
</html>
Related
I want to adjust labels text gap automatically between labels.
"Labels" are under the "Buttons".
Here is the code:
<style>
.btn{
margin-right: 5px;
display: inline-block;
text-align: center;
position:relative;
}
.btn label {
display: block;
position:relative;
}
</style>
<!-- Html Part - All show horizontically -->
<button class="btn">Medicine 1</button>
<button class="btn">Medicine 2</button>
<button class="btn">Medicine 3</button>
<button class="btn">Medicine 4</button>
<br>
<!-- here I want to adjust position button relative -->
<!-- I want position/gap of labels adjust automatically under the buttons -->
<!-- Labels under the buttons looks good and aligned-->
<label class="btn">2 mg</label>
<label class="btn">500 mg</label>
<label class="btn">650 mg</label>
<label class="btn">250 mg</label>
https://jsfiddle.net/
Any idea or suggestions would be welcome.
Add a margin-bottom: 15px to the .btn label css that you have in your code. Keep the rest of the code too because label is in fact an inline-element so you have to override it to display: block so that it acts like a block element and only then would the margin work on it.
I have a button and some text next to it. I'd like to match the text's vertical alignment with the button's. Here's what I have now:
Basically, I'd like the or Sign Up text to go a bit higher. I'm using MaterializeCSS as well. Here's the code I have for this:
HTML
<div class="center">
<button class="btn waves-effect waves-green green darken-1">Sign In</button>
<span class="alternate-option">or Sign Up</span>
</div>
CSS
.alternate-option {
margin-left: 20px;
}
I have tried using padding-bottom as well as margin-bottom.
This is caused by MaterializeCSS's button style :
margin-bottom: 15px;
An alternate solution to Mousa Dirksz's span repositionning would be to
remove the button's default margin :
HTML
<div class="center">
<div class="alternate-option">
<button class="btn waves-effect waves-green green darken-1">Sign In</button>
<span>or Sign Up</span>
</div>
</div>
CSS
.alternate-option button {
margin-bottom: 0px;
}
.alternate-option span {
margin-left: 20px;
}
Try to use:
.alternate-option {
margin-left: 20px;
vertical-align: baseline;
position: relative;
top:-5px;
}
Also look at: http://www.w3schools.com/cssref/pr_class_position.asp
For anyone looking to center a button and a link it's possible to use the following snippet:
<div class="valign-wrapper">
<button class="btn waves-effect waves-green green darken-1">Sign In</button>
<span class="alternate-option">or Sign Up</span>
</div>
.alternate-option {
margin-left: 10px;
}
It's important to note that using Materialize valign-wrapper class will vertically align children elements but it will remove the spacing between them that's why we need to add a margin-left on the span children.
Without knowing the full CSS, I suspect that you need to vertically align the button and span..such as:
button, span {
vertical-align: middle;
}
Try this suggestion
Use absolute positioning
CSS:
.alternate-option {
position:absolute;
left:numeric value*(adjust according screen size)*
top:numeric value*(adjust according screen size)*
}
I have the following code. Only part of the image is clickable.
HTML
<div class="row">
<div class="col-md-4 text-center">
<div class="portfolio-item">
<a>
<img class="btn img-portfolio project-img-responsive" data-toggle="modal" data-target="#project-modal" src="img/map_image.jpg">
</a>
</div>
</div>
</div>
CSS
.btn -> bootstrap CSS class
.row -> bootstrap CSS class
.col-md-4 -> bootstrap CSS class
.text-center -> bootstrap CSS class
.img-portfolio {
margin: 0 auto;
}
.project-img-responsive {
display: block;
max-width: 50%;
height: auto;
}
.portfolio-item {
margin-bottom: 25px;
}
The problem is only with chrome. Works fine in mozilla.
What property am I missing out or getting wrong?
Hello try to add attribute Href
<a href="#" >
<img class="btn img-portfolio project-img-responsive" data-toggle="modal" data-target="#project-modal" src="img/map_image.jpg">
</a>
it works with me .
If #DStruOne's suggestion doesn't work trying adding display: inline-block to your anchor element.
a { display: inline-block; }
If you want to trigger a modal, then maybe move
data-toggle="modal" data-target="#project-modal"
to your anchor tag. In my opinion you shouldn't add '.btn' class to your image. Try moving it to anchor tag too.
Given that the JS fiddle works fine, I suspect another (invisible) element on the page is overlapping your image. I managed to fix a problem similar to this by setting the z-index and position (because the first won't work without the second) of the <a> tag...
position: relative;
z-index: 100;
I am using bootstrap & font awesome, and i am looking to make something like this:
I have this:
I want something like this:
Markup:
<div class="alert alert-success"><i class="fa fa-paperclip icon-alert"></i> Everything was edited!</div>
CSS:
.icon-alert {
font-size: 30px;
float: left;
margin-right: 10px;
opacity: 0.7;
}
You'll need to set a height to the container and then you can hide the overflow of the nested font-awesome icon, using overflow:hidden.
CSS:
.clipped-alert{
overflow:hidden;
height:55px;
}
HTML:
<div class="clipped-alert alert alert-success">
<i class="fa fa-paperclip fa-5x icon-alert pull-right text-success"></i>
Everything was edited!
</div>
DEMO
You would create a container around the icon that has the property of over-flow: hidden;
You can then position the element inside however you want.
http://jsfiddle.net/MathiasaurusRex/W9WC2/1/
I have a header graphic that is positioned in centre of the page, being in the centre it moves according to the windows size, however I would like to put some buttons below it that are anchored to the left of the header so that when the header moves the buttons are always shewn starting below the lower left corner of the header graphic.
Is this possible ?
this is what I have in the html:
<div id="header">
<p class="centeredImage"><img src="supt_files/main_back.jpg" width="804" height="116" border="0" alt=""></p>
<div id="centretext">
<button style="background-color: SlateGrey" type = "button" onmouseover="style.backgroundColor='DarkGoldenRod';" onmouseout="style.backgroundColor='SlateGrey'"> How Do I... </button>
<button style="background-color: SlateGrey" type = "button" onmouseover="style.backgroundColor='DarkGoldenRod';" onmouseout="style.backgroundColor='SlateGrey'"> Servers </button>
<button style="background-color: SlateGrey" type = "button" onmouseover="style.backgroundColor='DarkGoldenRod';" onmouseout="style.backgroundColor='SlateGrey'"> Significant services </button>
</div>
</div> <!-- Header -->
in the css :
#header
{
width: 100%;
height: 157px;
position: relative;
top: 0px;
background-color: SlateGrey;
}
#centretext
{
text-align: center;
}
I would do this with CSS. You can either create a class that's centered with a defined width (anything within the div tags would align) or put it into your background definition so everything aligns.
With DIV tags:
Alter the HTML in the following way:
<div class="anchored">
images, etc (whatever you put here)
</div>
and then add the following to your CSS document:
.anchored{
display:block;
margin-left:auto;
margin-right:auto;
width:<whatever your banner/desired width is>;
}
This means that anything within the div tags will be aligned.
Whole Document:
The HTML can stay as it is, and add the following to your CSS document under body:
body{
width:<whatever your banner/desired width is>;
margin:auto auto;
}
This will make everything on the page--text, pictures, etc.--fit within the specified width, much like this page.
I hope that helps!