9,735
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
- <html>
- <head>
- <style type="text/css">
- .buttonsSection
- {
- text-align:right;
- background-color:yellow;
- }
- .dynamicStuffPlaceHolder
- {
- height:100px;
- width:180px;
- float:left;
- border:solid 1px black;
- background-color:orange;
- text-align: center;
- margin:2px;
- }
- .dynamicEditingButtons
- {
- float:right;
- }
- .pagingButtonsSection
- {
- }
- .spacer
- {
- clear:both;
- }
- .containingDiv
- {
- border:solid 2px green;
- }
- </style>
- </head>
- <body>
- <div class="containingDiv">
- <div class="dynamicStuffPlaceHolder">There is a bunch of dynamic <br /> stuff here.</div>
- <div class="dynamicStuffPlaceHolder">There is a bunch of dynamic <br /> stuff here.</div>
- <div class="dynamicStuffPlaceHolder">There is a bunch of dynamic <br /> stuff here.</div>
- <div class="spacer"></div>
- <div class="dynamicStuffPlaceHolder">There is a bunch of dynamic <br /> stuff here.</div>
- <div class="buttonsSection">
- <a href="">dynamic link to start editing</a>
- <div class="dynamicEditingButtons"><div></div></div>
- <div class="pagingButtonsSection">
- <input type="button" value="<<" />
- <input type="button" value=">>" />
- </div>
- <div class="spacer"></div>
- </div>
- </div>
- </body>
- </html>
Thanks for your time,
-Frinny
