CSS and Materialize
up vote
-1
down vote
favorite
I have a question about my CCS code.
I got a button with above that a loading bar (that shows when you click on the button).
If I press the button, the loading bar comes but it pushes the button down and I've tried to make the button to position `fixed'.
Can someone tell me if there is another way or can you give a solution to my own code.
My HTML code with the button and loading bar:
<div class="row">
<div class="col s12 m8 l6">
<div id="loader" class="center"></div>
<a id="submitForm" class="btn green waves-effect waves-light">Add Contact
<i class="material-icons right">add</i>
</a>
</div>
</div>
This is my CSS for the button, the .btn selector is a class from materialize:
.btn
background-color: #88969c !important;
position: fixed !important;
margin-top: 100px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.css" rel="stylesheet"/>
<div class="row">
<div class="col s12 m8 l6">
<div id="loader" class="center"></div>
<a id="submitForm" class="btn green waves-effect waves-light">Add Contact
<i class="material-icons right"></i>
</a>
</div>
</div>
<script>
(function ()
$('#submitForm').on('click', function (e)
e.preventDefault();
if($("#submitForm").hasClass('disabled'))
return;
$('#submitForm').addClass('disabled');
var randId = Math.floor((Math.random() * 19990307) + 1);
$('#loader').append('<div id="'+ randId +'" class="progress"><div class="indeterminate"></div></div>');
var name = $("#name").val();
var phonenumber = $("#phonenumber").val();
$("#name").val('');
$("#phonenumber").val('');
var data =
name: name,
phonenumber: phonenumber
;
$.ajax(
url: 'addNew',
data: data,
method: 'post',
success: function (data)
Materialize.toast(' '+ data +' ', 4000, 'cool white-text');
console.log(data);
$('#'+ randId +'').fadeOut(150, function ()
$('#'+ randId +'').remove();
$('#submitForm').removeClass('disabled');
);
,
)
)
)();
</script>css css3
edited Nov 10 at 16:07
Machavity
24.1k135478
asked Aug 26 '16 at 9:06
Vincent Toonen
6919
add a comment |
up vote
-1
down vote
favorite
I have a question about my CCS code.
I got a button with above that a loading bar (that shows when you click on the button).
If I press the button, the loading bar comes but it pushes the button down and I've tried to make the button to position `fixed'.
Can someone tell me if there is another way or can you give a solution to my own code.
My HTML code with the button and loading bar:
<div class="row">
<div class="col s12 m8 l6">
<div id="loader" class="center"></div>
<a id="submitForm" class="btn green waves-effect waves-light">Add Contact
<i class="material-icons right">add</i>
</a>
</div>
</div>
This is my CSS for the button, the .btn selector is a class from materialize:
.btn
background-color: #88969c !important;
position: fixed !important;
margin-top: 100px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.css" rel="stylesheet"/>
<div class="row">
<div class="col s12 m8 l6">
<div id="loader" class="center"></div>
<a id="submitForm" class="btn green waves-effect waves-light">Add Contact
<i class="material-icons right"></i>
</a>
</div>
</div>
<script>
(function ()
$('#submitForm').on('click', function (e)
e.preventDefault();
if($("#submitForm").hasClass('disabled'))
return;
$('#submitForm').addClass('disabled');
var randId = Math.floor((Math.random() * 19990307) + 1);
$('#loader').append('<div id="'+ randId +'" class="progress"><div class="indeterminate"></div></div>');
var name = $("#name").val();
var phonenumber = $("#phonenumber").val();
$("#name").val('');
$("#phonenumber").val('');
var data =
name: name,
phonenumber: phonenumber
;
$.ajax(
url: 'addNew',
data: data,
method: 'post',
success: function (data)
Materialize.toast(' '+ data +' ', 4000, 'cool white-text');
console.log(data);
$('#'+ randId +'').fadeOut(150, function ()
$('#'+ randId +'').remove();
$('#submitForm').removeClass('disabled');
);
,
)
)
)();
</script>css css3
edited Nov 10 at 16:07
Machavity
24.1k135478
asked Aug 26 '16 at 9:06
Vincent Toonen
6919
add a comment |
up vote
-1
down vote
favorite
up vote
-1
down vote
favorite
I have a question about my CCS code.
I got a button with above that a loading bar (that shows when you click on the button).
If I press the button, the loading bar comes but it pushes the button down and I've tried to make the button to position `fixed'.
Can someone tell me if there is another way or can you give a solution to my own code.
My HTML code with the button and loading bar:
<div class="row">
<div class="col s12 m8 l6">
<div id="loader" class="center"></div>
<a id="submitForm" class="btn green waves-effect waves-light">Add Contact
<i class="material-icons right">add</i>
</a>
</div>
</div>
This is my CSS for the button, the .btn selector is a class from materialize:
.btn
background-color: #88969c !important;
position: fixed !important;
margin-top: 100px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.css" rel="stylesheet"/>
<div class="row">
<div class="col s12 m8 l6">
<div id="loader" class="center"></div>
<a id="submitForm" class="btn green waves-effect waves-light">Add Contact
<i class="material-icons right"></i>
</a>
</div>
</div>
<script>
(function ()
$('#submitForm').on('click', function (e)
e.preventDefault();
if($("#submitForm").hasClass('disabled'))
return;
$('#submitForm').addClass('disabled');
var randId = Math.floor((Math.random() * 19990307) + 1);
$('#loader').append('<div id="'+ randId +'" class="progress"><div class="indeterminate"></div></div>');
var name = $("#name").val();
var phonenumber = $("#phonenumber").val();
$("#name").val('');
$("#phonenumber").val('');
var data =
name: name,
phonenumber: phonenumber
;
$.ajax(
url: 'addNew',
data: data,
method: 'post',
success: function (data)
Materialize.toast(' '+ data +' ', 4000, 'cool white-text');
console.log(data);
$('#'+ randId +'').fadeOut(150, function ()
$('#'+ randId +'').remove();
$('#submitForm').removeClass('disabled');
);
,
)
)
)();
</script>css css3
edited Nov 10 at 16:07
Machavity
24.1k135478
asked Aug 26 '16 at 9:06
Vincent Toonen
6919
I have a question about my CCS code.
I got a button with above that a loading bar (that shows when you click on the button).
If I press the button, the loading bar comes but it pushes the button down and I've tried to make the button to position `fixed'.
Can someone tell me if there is another way or can you give a solution to my own code.
My HTML code with the button and loading bar:
<div class="row">
<div class="col s12 m8 l6">
<div id="loader" class="center"></div>
<a id="submitForm" class="btn green waves-effect waves-light">Add Contact
<i class="material-icons right">add</i>
</a>
</div>
</div>
This is my CSS for the button, the .btn selector is a class from materialize:
.btn
background-color: #88969c !important;
position: fixed !important;
margin-top: 100px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.css" rel="stylesheet"/>
<div class="row">
<div class="col s12 m8 l6">
<div id="loader" class="center"></div>
<a id="submitForm" class="btn green waves-effect waves-light">Add Contact
<i class="material-icons right"></i>
</a>
</div>
</div>
<script>
(function ()
$('#submitForm').on('click', function (e)
e.preventDefault();
if($("#submitForm").hasClass('disabled'))
return;
$('#submitForm').addClass('disabled');
var randId = Math.floor((Math.random() * 19990307) + 1);
$('#loader').append('<div id="'+ randId +'" class="progress"><div class="indeterminate"></div></div>');
var name = $("#name").val();
var phonenumber = $("#phonenumber").val();
$("#name").val('');
$("#phonenumber").val('');
var data =
name: name,
phonenumber: phonenumber
;
$.ajax(
url: 'addNew',
data: data,
method: 'post',
success: function (data)
Materialize.toast(' '+ data +' ', 4000, 'cool white-text');
console.log(data);
$('#'+ randId +'').fadeOut(150, function ()
$('#'+ randId +'').remove();
$('#submitForm').removeClass('disabled');
);
,
)
)
)();
</script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.css" rel="stylesheet"/>
<div class="row">
<div class="col s12 m8 l6">
<div id="loader" class="center"></div>
<a id="submitForm" class="btn green waves-effect waves-light">Add Contact
<i class="material-icons right"></i>
</a>
</div>
</div>
<script>
(function ()
$('#submitForm').on('click', function (e)
e.preventDefault();
if($("#submitForm").hasClass('disabled'))
return;
$('#submitForm').addClass('disabled');
var randId = Math.floor((Math.random() * 19990307) + 1);
$('#loader').append('<div id="'+ randId +'" class="progress"><div class="indeterminate"></div></div>');
var name = $("#name").val();
var phonenumber = $("#phonenumber").val();
$("#name").val('');
$("#phonenumber").val('');
var data =
name: name,
phonenumber: phonenumber
;
$.ajax(
url: 'addNew',
data: data,
method: 'post',
success: function (data)
Materialize.toast(' '+ data +' ', 4000, 'cool white-text');
console.log(data);
$('#'+ randId +'').fadeOut(150, function ()
$('#'+ randId +'').remove();
$('#submitForm').removeClass('disabled');
);
,
)
)
)();
</script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.css" rel="stylesheet"/>
<div class="row">
<div class="col s12 m8 l6">
<div id="loader" class="center"></div>
<a id="submitForm" class="btn green waves-effect waves-light">Add Contact
<i class="material-icons right"></i>
</a>
</div>
</div>
<script>
(function ()
$('#submitForm').on('click', function (e)
e.preventDefault();
if($("#submitForm").hasClass('disabled'))
return;
$('#submitForm').addClass('disabled');
var randId = Math.floor((Math.random() * 19990307) + 1);
$('#loader').append('<div id="'+ randId +'" class="progress"><div class="indeterminate"></div></div>');
var name = $("#name").val();
var phonenumber = $("#phonenumber").val();
$("#name").val('');
$("#phonenumber").val('');
var data =
name: name,
phonenumber: phonenumber
;
$.ajax(
url: 'addNew',
data: data,
method: 'post',
success: function (data)
Materialize.toast(' '+ data +' ', 4000, 'cool white-text');
console.log(data);
$('#'+ randId +'').fadeOut(150, function ()
$('#'+ randId +'').remove();
$('#submitForm').removeClass('disabled');
);
,
)
)
)();
</script>css css3
css css3
edited Nov 10 at 16:07
Machavity
24.1k135478
asked Aug 26 '16 at 9:06
Vincent Toonen
6919
edited Nov 10 at 16:07
Machavity
24.1k135478
asked Aug 26 '16 at 9:06
Vincent Toonen
6919
edited Nov 10 at 16:07
Machavity
24.1k135478
edited Nov 10 at 16:07
Machavity
24.1k135478
edited Nov 10 at 16:07
Machavity
24.1k135478
24.1k135478
asked Aug 26 '16 at 9:06
Vincent Toonen
6919
asked Aug 26 '16 at 9:06
Vincent Toonen
6919
asked Aug 26 '16 at 9:06
Vincent Toonen
6919
6919
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
First of all you should make .btn position: static; . So that when ever loading bar comes your btn also shift itself down. And for making this happen (shifting and all). You have to use javascript or jquery.
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
First of all you should make .btn position: static; . So that when ever loading bar comes your btn also shift itself down. And for making this happen (shifting and all). You have to use javascript or jquery.
add a comment |
up vote
0
down vote
First of all you should make .btn position: static; . So that when ever loading bar comes your btn also shift itself down. And for making this happen (shifting and all). You have to use javascript or jquery.
add a comment |
up vote
0
down vote
up vote
0
down vote
First of all you should make .btn position: static; . So that when ever loading bar comes your btn also shift itself down. And for making this happen (shifting and all). You have to use javascript or jquery.
First of all you should make .btn position: static; . So that when ever loading bar comes your btn also shift itself down. And for making this happen (shifting and all). You have to use javascript or jquery.
answered Aug 26 '16 at 9:19
user6327513
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f39162496%2fcss-and-materialize%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
