locked
UI design improvement sought to allow for more flexibility and addition of glyphicon RRS feed

  • Question

  • User379720387 posted

    I have a UI element that looks great but blows up (spills on to the next line), once I make any modifications. It is also difficult to maintain because the order of elements in code is counter intuitive.

    From left to right:

    1. user glyphicon
    2. name of customer (Wagner)
    3. a badge with the dollar value containing a <a> to some code
    4. eye glyphicon which is clickable and opens bootstrap modal

    Need to add a progress spinner in between Wagner and the badge with the dollar value, but closest to the badge with $ value.

    When I add it where is says ADD NEW GLYPH here, the logical place for me it blows up and ends up on the next line.

    I need a different approach here but am not seeing where.

    Any suggestions?

    <li class="list-group-item">
        <a href="#" billtoid="60" providerid="@providerid" class="pickBill" style="font-size: 1.25em; color:green; padding-right:5px; margin-left:20px">
             <span class="glyphicon glyphicon-eye-open pull-right" style="margin-left:24px;"
                   data-toggle="modal"data-target="#basicModal">
             </span>
        </a>
                                                
             <span class="glyphicon glyphicon-user pull-left" data-toggle="tooltip" data-placement="right" title="owner" style="font-size: 1.25em; color:beige;"> </span>
                                                
    
             <span class="badge" data-toggle="tooltip" data-placement="left" title="send bill"><a href="~/Billing/60" style="color: white;">$ @unbilled.ElementAt(ub).total.ToString("0.00")</a>
                                                
    
             </span>ADD NEW GLYPH HERE@unbilled.LName
                             
    </li>

    Thursday, December 7, 2017 3:29 PM

All replies

  • User-1838255255 posted

    Hi wavemaster,

    According to your description and needs, i make a modify based on your code, please check:

    Sample Code:

    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <li class="list-group-item">
            <a href="#" billtoid="60" providerid="@providerid" class="pickBill" style="font-size: 1.25em; color:green; padding-right:5px; margin-left:20px">
                <span class="glyphicon glyphicon-eye-open pull-right" style="margin-left:24px;"
                      data-toggle="modal" data-target="#basicModal">
                </span>
            </a>
            <a class="list-group-item-text">
                <span>@unbilled.LName</span>
            </a>
            <i class="fa fa-circle-o-notch fa-spin" style="font-size:24px"></i>
            <span class="glyphicon glyphicon-user pull-left" data-toggle="tooltip" data-placement="right" title="owner" style="font-size: 1.25em; color:beige;"> </span>
            <span class="badge" data-toggle="tooltip" data-placement="left" title="send bill">
                <a href="~/Billing/60" style="color: white;">$ @unbilled.ElementAt(ub).total.ToString("0.00")</a>\
            </span>
    
        </li>
    </body>

    Result:

    Best Regards,

    Eric Du 

    Friday, December 8, 2017 5:58 AM