471,602 Members | 1,287 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,602 software developers and data experts.

Positioning Dynamic buttons in a <div>

Frinavale
9,735 Expert Mod 8TB
I've created a ASP.NET control that displays a "book" of schedules.
It dynamically displays scheduling times and allows the user to page through the schedules. It also lets the user edit the schedule times if the user has permissions to edit schedules.

When the user is not editing, or the user is not allowed to edit, the buttons that let the user edit are not displayed. If the user is allowed to edit schedules but they are not editing a link allowing them to start editing is displayed...if they aren't allowed to edit then this link is not displayed.

I've been trying to come up with a CSS solution (which does not require server manipulation) that keeps the paging buttons at the bottom of the scheduling control but I have been unsuccessful.

Right now I'm setting the paging button section's margin property in my server code to move the buttons to the bottom of the page. The problem is that I have to keep changing the margin style in my server code according to whether or not the editing buttons were there.

I've also tried setting the paging button section's position style to relative and have moved it using the top style to position it. The problem is that now I'd have to keep changing the top style in my server code according to whether or not the editing buttons were there.

My goal is to remove as much style manipulation from the server code as possible. So, this solution isn't preferred either.


To simplify things I've been using the w3c schools try-it editor to play with the styles. If you copy the following code into it you can see something that sort of looks like my schedule control. The paging button section style is left empty because at this time I don't know what to set it to in order to move this section to the bottom of the control (containing div).
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. .buttonsSection
  5. {
  6.   text-align:right;
  7.   background-color:yellow;
  8. }
  9. .dynamicStuffPlaceHolder
  10. {
  11.   height:100px;
  12.   width:180px;
  13.   float:left;
  14.   border:solid 1px black;
  15.   background-color:orange;
  16.   text-align: center;
  17.   margin:2px;
  18.  
  19. }
  20. .dynamicEditingButtons
  21. {
  22.   float:right;
  23. }
  24.  
  25. .pagingButtonsSection
  26. {
  27.  
  28. }
  29. .spacer
  30. {
  31.   clear:both;
  32. }
  33. .containingDiv
  34. {
  35.   border:solid 2px green;
  36. }
  37. </style>
  38. </head>
  39. <body>
  40. <div class="containingDiv">
  41.   <div class="dynamicStuffPlaceHolder">There is a bunch of dynamic <br /> stuff here.</div>
  42.   <div class="dynamicStuffPlaceHolder">There is a bunch of dynamic <br /> stuff here.</div>
  43.   <div class="dynamicStuffPlaceHolder">There is a bunch of dynamic <br /> stuff here.</div>
  44.  
  45.   <div class="spacer"></div>
  46.  
  47.   <div class="dynamicStuffPlaceHolder">There is a bunch of dynamic <br /> stuff here.</div>
  48.   <div class="buttonsSection">
  49.  
  50.     <a href="">dynamic link to start editing</a>
  51.  
  52.     <div class="dynamicEditingButtons"><div></div></div>
  53.  
  54.     <div class="pagingButtonsSection">
  55.       <input type="button" value="<<" />
  56.       <input type="button" value=">>" />
  57.     </div>
  58.  
  59.     <div class="spacer"></div>
  60.   </div>
  61.  
  62. </div>
  63. </body>
  64. </html>
Any recommendations would be greatly appreciated.

Thanks for your time,

-Frinny
Mar 26 '09 #1
2 4248
hsriat
1,654 Expert 1GB
Use JavaScript to manipulate object.style.display.
Mar 27 '09 #2
Frinavale
9,735 Expert Mod 8TB
JavaScript would certainly work; but, seeing as I could just as easily set the style in server code, and setting it on the server requires less client side computing, I've decided to continue setting the margin style on the server.

Thanks for your help,

-Frinny
Mar 27 '09 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by Paul Thompson | last post: by
8 posts views Thread by Daniel Hansen | last post: by
6 posts views Thread by Gustaf Liljegren | last post: by
3 posts views Thread by Josef K. | last post: by
1 post views Thread by XIAOLAOHU | last post: by
reply views Thread by MichaelMortimer | last post: by
reply views Thread by CCCYYYY | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.