locked
button size RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote

    I would like to display the button size according to the font

    <button class="divclass" id=000>a</button>                      one byte

    <button class="divclass" id=000>bbbbbb</button>             six bytes

    It always displays the same size button.

    What am I missing? Outside Store App, it works that way.

    Sunday, April 21, 2013 1:56 AM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote

    So what I get is that this solution works. Or it doesnot ?

    • Marked as answer by my-ped01 Tuesday, April 23, 2013 9:17 PM
    Tuesday, April 23, 2013 6:47 PM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote

    The standard css files for Windows Store Apps (ui-dark.css and ui-light.css) define a min-width of 90 px for a button (have a look at line 252 in those files). If you want to have the button sizing itself according to its content, you have to overwrite this min-width.

    For example, you could add the following css rule to your css-file 

    button { min-width: 0px;}

    Just make sure that your css file gets loaded after ui-darks.css/ui-light.css

    Sunday, April 21, 2013 10:09 AM
  • Question
    Sign in to vote
    0
    Sign in to vote

    That did not work. The problem is I am displaying this move

    <button class="divclass" id=5>Nf6</button>

    where id gives me a clue and Nf6 is the text display. It looks very unprofessional to have the move displayed as a box with spaces around it.

    There must be a way this can be done.

    Monday, April 22, 2013 3:33 AM
  • Question
    Sign in to vote
    0
    Sign in to vote

    This worked for me :

    <body id="bd">
    <button class="divclass" id=000>a</button>

    <button class="divclass" id=Button1>bbbbbb</button>    

</body>

    CSS :

    button { 
    min-width: 0px;
    margin:0px;
    padding:0px;
}
#bd{
	height:100%;
    width:100%;
   
}

    Not sure why it does not work for you ? Can you share you full HTML and CSS ?

    - Girija


    Monday, April 22, 2013 11:09 PM
  • Question
    Sign in to vote
    0
    Sign in to vote

    It works.

    I also added boder-style: none; and margin: 2px; to get some space around he text.

    button {
        min    -width: 0px;
        margin    :2px; padding:0px; border-style: none;
    }

    Tuesday, April 23, 2013 3:27 PM
  • Question
    Sign in to vote
    0
    Sign in to vote

    So what I get is that this solution works. Or it doesnot ?

    • Marked as answer by my-ped01 Tuesday, April 23, 2013 9:17 PM
    Tuesday, April 23, 2013 6:47 PM