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

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    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

  • Question
    Sign in to vote
    0
    Sign in to vote
    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