Lookup with multiple columns misaligned

Aug 25, 2011 at 11:16 PM

Using the default MVC Razor project you get for the most recent release of MVC with the Tools Update, I tried creating a lookup with multiple columns, similar to the Person lookup in the demo.  However, the columns are not aligned and the lookup is also rendering the _Layout.cshtml inside the lookup dialog.  Each line item in the lookup list has a dot infront of it as well.  What is it that forces the header and all the row columns to be aligned in the demo project?  As you see below I am mimicking the same pattern followed in the PersonLookup from the Awesome Demo.

@model MfpSuite05.Models.Property
<li data-value='@Model.PropertyKey'>
<table>
    <tr>
        <td style="width:25%;">@Model.PropertyKey
        </td>
        <td style="width:25%;">@Model.PropertyName</td>
        <td style="width:25%;">@Model.PropertyCounty</td>
        <td style="width:25%;">@(Model.DeveloperName != null ? Model.DeveloperName : "")</td>
    </tr>
</table>
</li>

 

<table class="atbl">
<thead>
    <tr>
        <td>Property Key
        </td>
        <td style="width:25%;">Property Name
        </td>
        <td style="width:25%;">Property County
        </td>
        <td style="width:25%;">Developer Name
        </td>
    </tr>
    </thead>
</table>

 

public class PropertyKeyLookupController : LookupController
    {
        private MfpSuiteEntities db = new MfpSuiteEntities();

        [HttpPost]
        public ActionResult Search(string search)
        {
          var result = db.Properties.Where(o =>
                                  o.PropertyName.Contains(search)
                                            );

            return View(@"awesome\LookupList", result);
        }

        public override ActionResult Header()
        {
          return PartialView();
        }

        public ActionResult Get(int id)
        {
          if (id == 0) return Content("");
          var person = db.Properties.Where(o => o.PropertyKey == id).SingleOrDefault();
          return person == null ? Content("") : Content(person.PropertyName + " " + person.PropertyCounty);
        }

        protected override void Dispose(bool disposing)
        {
            db.Dispose();
            base.Dispose(disposing);
        }
    }

 

 

 

 

 

Coordinator
Aug 26, 2011 at 7:50 AM

css forces (width:25%)

try using web-forms (aspx ascx) views instead, with razor you never know if you have any errors

Aug 26, 2011 at 4:15 PM

I was able to find the problem.  You have to specify width:100% for the table defined in Item.cshtml/ascx.  It works fine in the demo project because you have this in the Site.css, but anyone else who tries to follow this pattern won't get the same results if they aren't using your Site.css file.

Aug 26, 2011 at 5:13 PM

Also to remove the bullet dots next to the li entries you need the below style.

ul {
padding-left: 0;
}

Since the Lookup control requires you to use li entries for items, then it seems like there should be a class defined by default for these and included in examples.

Aug 26, 2011 at 5:19 PM

You have a bug in Awesome.css, you are missing a colon after padding on line 45:

.ae-lookup-list
{
    margin: 0;
    padding 0;
}

Coordinator
Aug 26, 2011 at 6:30 PM

ok, thanx for noticing all this stuff