This is a migrated thread and some comments may be shown as answers.

Expand node to fill available width

1 Answer 114 Views
Navigation
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 15 Jun 2016, 02:29 PM

Hi

Looking at the attached png the top row is a navigation menu and the bottom is a command bar inside a radgrid.  The command bar uses a table to have a left title of the grid and then the buttons are in another cell that is right aligned.  Because this command bar approach doesn't collapse as the width reduces I want to use a navigation menu.  

You can see it looks close.

The issue I have is making the buttons get right aligned rather than being left aligned.Obviously I could switch to the rtl approach but then I end up with the opposite issue whereby the title needs to be moved to the left.

With the sledgehammer approach I suppose that I could use some javascript to increase the width of the title node pushing the buttons to the right.  Is there a CSS approach that I could use?

Regards

Jon

1 Answer, 1 is accepted

Sort by
0
Jon
Top achievements
Rank 1
answered on 15 Jun 2016, 02:39 PM

Duh.  I knew there was an easy CSS way. See below in case anyone needs the same thing in the future

/* Change root group to block display to allow items to be floated */
.PageCommandMenu .RadNavigation .rnvRootGroup
{
    display:block!important;
}
/* Float all nodes to the right */
.PageCommandMenu .RadNavigation .rnvItem
{
    float:right!important;
}
/* Ensure that the first item is NOT right floated */
.PageCommandMenu .RadNavigation .rnvFirst
{
    float:left!important;
}

 

Tags
Navigation
Asked by
Jon
Top achievements
Rank 1
Answers by
Jon
Top achievements
Rank 1
Share this question
or