How to keep a button control at bottom outside of a gridview as gridview grows.

Question

0.00/5 (No votes)

See more:

I have a button 'Continue shopping' at the bottom of a Gridview. I want this button to appear always at the bottom whenever the height of Gridview grows due to selection of more rows.
When I tried with 'footer template' , the button is inside the Gridview Gridlines.

XML

</Columns>
</asp:GridView>

<asp:Button ID="BtnContinueShopping"  runat = "server" Text='Continue shopping'    onclick="BtnContinueShopping_Click"
style="z-index: 1; left:450px; top:350px; position: absolute;width:150px;cursor:pointer;  font-family:Arial;  text-align:center; height:22px;  font-weight:600; " >
</asp:Button>

Posted 1-Dec-13 20:11pm

S.Rajendran from Coimbatore

Add a Solution

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 2-Dec-13 3:32am

So, what is the problem now? You have applied many styles.

S.Rajendran from Coimbatore 2-Dec-13 4:12am

I actually want the Button to be outside the Gridview at bottom whenever the Gridview increases.
In my code , whenever the GV height increase it overlaps the button at 350px.
In footer template it works but within the GridLines and doesnt look nice. Further I am unable to set the Left-Margin in footer template.
My footer template code:

<%-- <asp:TemplateField>
<footertemplate>
<br />
<asp:Button ID="BtnContinueShopping" runat = "server" Text='Continue shopping' onclick="BtnContinueShopping_Click" style=" margin-left:1px; position:absolute" >

--%>
<asp:CommandField ShowDeleteButton="True" />
<asp:CommandField ShowEditButton="True" ControlStyle-Width="100" EditText="Change Qty" />

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 2-Dec-13 5:10am

That is because you have many styles added to the Button like z-index and position absolute.
Try simple Button outside the GridView with no styles.

S.Rajendran from Coimbatore 2-Dec-13 10:10am

Yes Thank you I tried. But still it is overlapping. Hope you misunderstood my question!

$*Developer - Vaibhav*$ 2-Dec-13 9:28am

S.Rajendran from Coimbatore 2-Dec-13 9:56am

Pl be serious!

2 solutions

Solution 1

as the others said this is your problem. delete it from your button.

"z-index: 1; left:450px; top:350px; position: absolute;"

Posted 2-Dec-13 6:15am

bowlturner

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

C For Code!!! · Accepted Answer · 2013-12-02T06:53:00

Solution 2

What you should do you should remove z-index first and margin or padding
Try to give it in % not in pixel

Hope That Will Work!!

Posted 2-Dec-13 6:53am

C For Code!!!

Comments

S.Rajendran from Coimbatore 2-Dec-13 21:02pm

Thanks. It works. % is vital. I removed 'position' too.