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>

edited Nov 10 at 16:07

Machavity

24k135478

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>

edited Nov 10 at 16:07

Machavity

24k135478

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>

edited Nov 10 at 16:07

Machavity

24k135478

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

edited Nov 10 at 16:07

Machavity

24k135478

asked Aug 26 '16 at 9:06

Vincent Toonen

6919

edited Nov 10 at 16:07

Machavity

24k135478

asked Aug 26 '16 at 9:06

Vincent Toonen

6919

edited Nov 10 at 16:07

Machavity

24k135478

edited Nov 10 at 16:07

Machavity

24k135478

edited Nov 10 at 16:07

Machavity

24k135478

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

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.

answered Aug 26 '16 at 9:19

user6327513

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

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

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

answered Aug 26 '16 at 9:19

user6327513

add a comment |

up vote
0
down vote

answered Aug 26 '16 at 9:19

user6327513

add a comment |

up vote
0
down vote

answered Aug 26 '16 at 9:19

user6327513

answered Aug 26 '16 at 9:19

user6327513

answered Aug 26 '16 at 9:19

user6327513

answered Aug 26 '16 at 9:19

user6327513

answered Aug 26 '16 at 9:19

user6327513

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky