Align a button to top

Question

I am building a webapp in .net using some of the AJAX features; in this case it is TabContainer.

Below is a screenshot of the area I want to play with. The menu on the left is the tabs of TabContainer. The right side is tab's content. I would like to have the "Update PCR" button to be right underneath "Disciplines Affected". The problem is that the left and right side are a part of ONE block, which is TabContainer.

Are there any suggestions to how would I format the CSS of the Button to align right underneath TabContainer's menu? I could add the button as a part of the menu but, then I would have to set the control to AutoPostback, which defeats its purpose in this case in the first place... Any suggestions would be appreciated!

Screenshot

EDIT:

Here is the existing CSS

.ajax_tabController .ajax__tab_tab
{
    background-color: #3c6f91;
    padding: 5px;
    border: 1px solid #ffffff;
    color:#ffffff;
    border-left: 3px solid #5AB0DB;
}

.ajax_tabController .ajax__tab_hover .ajax__tab_tab
{
    background-color:#5AB0DB;
    text-decoration:none;
}

.ajax_tabController .ajax__tab_active .ajax__tab_tab
{
    background-color:#5AB0DB;
    text-decoration: underline;
}

Also, there is CSS that overrides some settings to make TabContainer Vertical instead of Horizontal. I know, that there is a property .UseVerticalStripPlacement but it messes up with the height of the control and throws a JavaScript error.

.ajax__tab_header
        {
            float: left;
        }
        .ajax__tab_body
        {
            margin-left: 160px;
        }
        .ajax__tab_outer
        {
            display: block !important;
        }
        .ajax__tab_tab
        {
            width: 210px;
            height: auto !important;
        }

Can you show what CSS you have in place already for the menu, please? — Paul, Feb 22 '13 at 22:02
Can you please provide what elements these classes are assigned to for example are they list items inside unordered lists? — iConnor, Feb 22 '13 at 22:14
It is an ASP.NET AJAX control, called TabContainer. When it is rendered, the menu items are within — Nikita Silverstruk, Feb 22 '13 at 22:18
The content (which is on the right) is a table and is within
. These divs are within the first div that I mentioned in a previous comment — Nikita Silverstruk, Feb 22 '13 at 22:20

score 2 · Answer 1 · edited May 23 '17 at 10:32

2

You need to position the top of the button relative to the bottom of the tab elements. This can be done with jquery. See How to position one element relative to another with jQuery?

edited May 23 '17 at 10:32

Community

1
1

answered Feb 23 '13 at 00:32

Mike Beeler

4,081
2
29
44

Paul · Accepted Answer · 2013-02-25T21:46:01.413

1

It's going to be a bit hit and miss, but try something along the lines of:

.updatePcrButton {
    position: absolute;
    top: 100px;   /* These will be whatever the measurement is to */
    left: 5px;    /* be directly under the last element */
    z-index: 99;  /* Arbitrary amount to put it above any other elements */
}

This is pretty messy to be honest - it relies on your not changing the position of the control thereafter.

Perhaps a better way would be to add an extra tab to the TabContainer and handle any Tab clicks yourself.

-- Edit -- May be more useful --

Nikita, I had completely forgotten about this as it was in an old Classic ASP app of mine, but you could try these two JS functions that are probably more useful to you:

function curTop(obj){
rv = 0;
while(obj) {
    rv += obj.offsetTop;
    obj = obj.offsetParent;
}
return rv;
}
function curLeft(obj){
rv = 0;
while(obj) {
    rv += obj.offsetLeft;
    obj = obj.offsetParent;
}
return rv;
}

They pull the position from the specified object. If you add the height of the button that you want to position under then you may find this improves the location for you and prevents any funny business with CSS.

Kind regards, Westie.

edited Feb 25 '13 at 21:46

answered Feb 22 '13 at 22:36

Paul

4,160
3
30
56

I was thinking about pozitioning but the reason I did not go there is because it is messy, as you stated. I was looking for something more elegant. But thanks! – Nikita Silverstruk Feb 22 '13 at 22:41
There's always the second idea of adding another tab and processing the clicks... – Paul Feb 22 '13 at 23:23
As I stated in the post, this would require enabling postback on the TabContainer, wouldn't it? This defeats the purpose of using AJAX in my case... – Nikita Silverstruk Feb 23 '13 at 01:29
I would go with Mike Beeler's suggestion, then, of using JQuery. – Paul Feb 23 '13 at 09:03
I will use your solution, the project does not need an additional library just for one button... Thanks! – Nikita Silverstruk Feb 25 '13 at 18:16

Align a button to top

2 Answers2