Expand node to fill available width

2 posts, 0 answers
  1. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 15 Jun Link to this post

    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

  2. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 15 Jun in reply to Jon Link to this post

    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;
    }

     

  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top