locked
How to Override styles of WinJS.UI.HubSection and bind header dynamically

 > 

    Question

  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi,

    I want to override style of header in WinJS.UI.HubSection.

    I tried finding out the style of it in inbuild style class(win-hub-section-header) pasted below. I have over ridden this in my css file (just added color:red and font-size:40pt). But could not see any difference.

    .win-hub-section-header {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    margin: 4px 0;
    font-size: 20pt;
    text-align: left;
}

    How to bind the header dynamically in WinJS.UI.Hubsection(Generally the header is set via data-win-options:{header :'XXX'}).

    could some one assist me where am i going wrong.

    Thanks & Regards Tejaswi Chandrapatla


    • Edited by Teja510 Sunday, October 27, 2013 6:49 AM Adding details for dynamic binding
    Sunday, October 27, 2013 6:47 AM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi Teja510,

    You should not modify the .win-hub-section-header, instead you should apply the CSS on .win-hub-section-header-content which is the line 1089.

    For the binding stuff, take a look at the discussion here: http://stackoverflow.com/questions/16394645/can-i-bind-data-to-data-win-options I'm not quite sure if it is correct, I don't have experience with binding to an data-win-option element. But I saw the document which wrote following code, therefore I doubt if it can be binding backend. 

    var header = hubSection.header;
hubSection.header = header;

    Best Regards,

    --James

    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.



    Monday, October 28, 2013 7:58 AM
    Moderator