locked
What CSS class (or classes) are used for the header of a list control (when you tick Show Header) in an LightSwitch HTML Client app? RRS feed

  • Question

  • I'm using a Wijmo Grid control in a LightSwitch HTML Client app. It doesn't have the same ability as LightSwitch's built-in List control to "Show Header" by ticking a checkbox in the designer.

    So I've added a text box control immediately above the grid control, & am attempting, by reading through all of the LightSwitch CSS files, to find the correct CSS class for the text box control's postRender method, using:

    element.className = "msls-header msls-control-header msls-font-style-large ui-title"

    Currently, that combination of CSS classes is "almost" right, but there still seems to be a missing bottom margin. Yes, I could keep fiddling around trying to manually find a combination of settings that simulate the List control's header text, but I'd really much rather use the exact class (or classes) that LightSwitch itself uses for the List control's header uses.

    If anyone knows what class/classes are used for this I'd be very grateful.


    Yann Duran
         - Co-Author of Pro Visual Studio LightSwitch 2011
         - Author of the  LightSwitch Central Blog

    FREE Download: Luminous Tools for LightSwitch
    (a Visual Studio productivity extension for LightSwitch)
     
    Click Mark as Answer, if someone's reply answers your question
    Click  Vote as Helpful, if someone's reply is helpful
     
    By doing this you'll help everyone find answers faster.

    Saturday, November 16, 2013 5:15 PM
    Moderator

All replies

  • bump

    Yann Duran
         - Co-Author of Pro Visual Studio LightSwitch 2011
         - Author of the  LightSwitch Central Blog

    FREE Download: Luminous Tools for LightSwitch
    (a Visual Studio productivity extension for LightSwitch)
     
    Click Mark as Answer, if someone's reply answers your question
    Click  Vote as Helpful, if someone's reply is helpful
     
    By doing this you'll help everyone find answers faster.

    Monday, November 18, 2013 5:04 AM
    Moderator
  • Hi Yann,

    I don't know off the top of my head but try using the F12 IE dev tools to drill down through the DOM. It will show you what attributes an element has and which style sheets they come from. Apologies if you already knew that.

    Cheers

    Dave


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    Monday, November 18, 2013 9:33 AM
  • Hi Dave,

    No need to apologise, I think everyone already knows how little "web stuff" I know :-)

    I tried looking in the css/js files, but there was just far too much there (plus only a bit of it all makes sense to me anyway). I didn't think of using the F12 tool, but I can give it a try. I was hoping someone might have known how to find the answer much quicker than I could.

    Thanks,


    Yann Duran
         - Co-Author of Pro Visual Studio LightSwitch 2011
         - Author of the  LightSwitch Central Blog

    FREE Download: Luminous Tools for LightSwitch
    (a Visual Studio productivity extension for LightSwitch)
     
    Click Mark as Answer, if someone's reply answers your question
    Click  Vote as Helpful, if someone's reply is helpful
     
    By doing this you'll help everyone find answers faster.

    Monday, November 18, 2013 1:06 PM
    Moderator
  • Hi Yann,

    I'm sure you will get to be self-sufficient quickly ;)

    Uisng IE F12 Dev Tools to navigate the DOM

    The above example uses the select element pointer tool to hover over your page, highlighting elements with a blue triangle. Click on an element, here a List header and it opens it in the DOM explorer. To the right is lists the styles being used/overridden. You can see that it is a SPAN with some DIV's and the class names are visible.

    Cheers

    Dave


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    Monday, November 18, 2013 1:30 PM
  • Thanks again Dave.

    Yes, I've already learned so much in such a short time. I'm getting there, & some bits are starting to fall into place in my head. I'm pretty much writing code now, that only a couple of weeks ago looked like absolute GREEK to me, lol.

    That example looks helpful. I guess I'd hoped it wound be just one simple css class name, but it looks like what I need is actually made up of a bunch of inherited and/or overwritten css classes.

    Thanks,


    Yann Duran
         - Co-Author of Pro Visual Studio LightSwitch 2011
         - Author of the  LightSwitch Central Blog

    FREE Download: Luminous Tools for LightSwitch
    (a Visual Studio productivity extension for LightSwitch)
     
    Click Mark as Answer, if someone's reply answers your question
    Click  Vote as Helpful, if someone's reply is helpful
     
    By doing this you'll help everyone find answers faster.

    Monday, November 18, 2013 1:52 PM
    Moderator