Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #111684

    I need to create some small (30px) flat buttons with only an icon inside but centered.

    I didn’t find any property to do that.

    how can I do ?

    Tks

    #111708
    admin
    Keymaster

    Please, refer to this sample with small buttons and icons: https://www.htmlelements.com/demos/button/basic/

    Regards,
    Markov

    Smart UI Team
    https://www.htmlelements.com/

    • This reply was modified 1 week, 1 day ago by admin.
    #111710

    In that sample I see some buttons smaller than others, however I don’t see any way to control dimensions.

    My need is to have button smaller than buttons shown in that example.

    Also change the background color is a need.

    Tks

    #111714
    admin
    Keymaster

    Hi,

    The size of the buttons is set through CSS. In CSS you have width and height properties which determine the size of the Button and any other HTML Element. For example, the round button in the sample is 48px. If you set it to 30px through CSS, it will be 30px.

    Regards,
    Markov

    Smart UI Team
    https://www.htmlelements.com/

    #111719

    I tried and I reduced the size using (cfg-button-inline is my class)
    smart-button.cfg-button-inline {

    height :24px;

    width:25px;

    }
    Now I see the correct size of the button but the icon is visible only partially in the bottom right corner.

    Inspecting the page I saw the internal <button> tag still have a 32×32 size.

    Tks

     

    #111744

    Also using material icons the icon is shown only partially in the lower right corner.

    What’s wrong ?

    Tks

    #111748

    I prepared a testcase in codpen

    https://codepen.io/tullio0106/pen/jOgQwrY

    You’ll see the first button is not shown in the expected way.

    Tks

    #111765
    admin
    Keymaster

    Hi,

    You can apply to the button tag using CSS the following: display: flex; and align-items: center; if you want the Text and Image to be aligned.

    Regards,
    Markov

    Smart UI Team
    https://www.htmlelements.com/

    #111770

    Tks but it still doesn’t work

    The only change is that display:flex adds also a harmful new line.

    I updated the testcase.

    Tks

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.