Create Floating ASP.Net Button using CSS

phonghue
 
on Jan 04, 2022 11:24 PM
1409 Views

hello,

I have an input form that very long and i would like to create a floating save/update button whenever the client scroll the input page the button will follow on the right side of the page.

can you show me a example button how to do that please?

thank you.

Download FREE API for Word, Excel and PDF in ASP.Net: Download
arjunv
 
on Jan 05, 2022 01:53 AM

Hi Phonghue,

 Please refer below Sample.

HTML

<div style="height: 1800px">
    <div>
        <asp:Button CssClass="scroll" ID="btnSave" runat="server" Text="Save" />                
    </div>

    <div class="Content">
        <h2>What is Lorem Ipsum?</h2>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    <br />
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
    <br />
        when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    <br />
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    <br />
        It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
    <br />
        and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>

    <div class="Content">
        <h2>Why do we use it?</h2>
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. 
        <br />
        The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, 
        <br />
        content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as 
        <br />
        their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. 
        <br />
        Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </div>

    <div class="Content">
        <h2>What is Lorem Ipsum?</h2>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    <br />
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
    <br />
        when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    <br />
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    <br />
        It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
    <br />
        and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>

    <div class="Content">
        <h2>What is Lorem Ipsum?</h2>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    <br />
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
    <br />
        when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    <br />
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    <br />
        It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
    <br />
        and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</div>

CSS

<style>
    .scroll {
        position: fixed;
    }

    .Content{
        margin:10px;
        padding:10px;
    }        
</style>

Screenshot