473,403 Members | 2,071 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,403 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 4418
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

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

Similar topics

13
by: Mikko Ohtamaa | last post by:
From XML specification: The representation of an empty element is either a start-tag immediately followed by an end-tag, or an empty-element tag. (This means that <foo></foo> is equal to...
1
by: Philo | last post by:
How do I select all <div> tags except those which contain a <table> tag somewhere within them? Example XML: <********************** sample input ***********************> <txtSectionBody>...
3
by: Paul Thompson | last post by:
When I put a <div ...> inside a <table> specification, functionality is not there. When I put the <table> inside the <div> everything works. Why is that?
8
by: Daniel Hansen | last post by:
I know this must seem totally basic and stupid, but I cannot find any reference that describes how to control the spacing between <p>...</p> and <div>...</div> blocks. When I implement these on a...
7
by: Herbman | last post by:
Hi, I'm trying to position a <tr> ("row") element with CSS. The table itself is positioned with <div> tags. The problem is when I use <div> tags to position the rows within the table nothing...
8
by: slim | last post by:
hi again all, i am still working on the website as mentioned in earlier threads and have hit another snag... http://awash.demon.co.uk/index.php http://awash.demon.co.uk/vd.css the php is...
6
by: Gustaf Liljegren | last post by:
Here's what I'm trying to achieve: 1. A <div>, centered on screen, 600px wide and 100px high, with a background-image (also 600 x 100). 2. Text (an <h1> element) positioned with precision inside...
3
by: Josef K. | last post by:
Asp.net generates the following html when producing RadioButton lists: <td><input id="RadioButtonList_3" type="radio" name="MyRadioButtonList" value="644"...
8
prino
by: prino | last post by:
Hi all, I've written code (in REXX) that takes files in legacy languages (PL/I, COBOL, z/OS assembler, etc) and converts them into HTML in a format similar to what's displayed in the z/OS ISPF...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

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.