JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Buttons › Buttons size

Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • October 31, 2024 at 1:19 pm #111684
    tbettinazzi@axioma.it
    Participant

    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

    November 4, 2024 at 4:10 pm #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, 2 days ago by admin.
    November 4, 2024 at 4:20 pm #111710
    tbettinazzi@axioma.it
    Participant

    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

    November 5, 2024 at 7:44 am #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/

    November 5, 2024 at 10:02 am #111719
    tbettinazzi@axioma.it
    Participant

    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

     

    November 8, 2024 at 8:10 am #111744
    tbettinazzi@axioma.it
    Participant

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

    What’s wrong ?

    Tks

    November 8, 2024 at 5:32 pm #111748
    tbettinazzi@axioma.it
    Participant

    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

    November 12, 2024 at 9:09 am #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/

    November 12, 2024 at 1:14 pm #111770
    tbettinazzi@axioma.it
    Participant

    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

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