JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Buttons › Vertical radio button with image

Tagged: 

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • June 5, 2024 at 9:15 am #111006
    tbettinazzi@axioma.it
    Participant

    In a previous post I asked the possibility to have radio-buttons in vertical and You provided me a correct solution.

    Now I need to have, on the same line of each button in the radio group, a small image (the url of the image is determined at runtime).

    I tried to add a simple tag img but the image is shown or above or below the button (depending of the position of the img tag) but not on the right or left of the button itself.

    How can I solve ?

    Tks

    June 5, 2024 at 10:51 am #111011
    Markov
    Keymaster

    Hi,

    I would suggest you to use a DIV tag as a container and place images and radio buttons inside DIV tags with flex layout or Grid layout.

    Ex:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rows and Columns Layout</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="column">Column 1</div>
            <div class="column">Column 2</div>
            <div class="column">Column 3</div>
        </div>
        <div class="row">
            <div class="column">Column 1</div>
            <div class="column">Column 2</div>
        </div>
        <div class="row">
            <div class="column">Column 1</div>
        </div>
    </div>
</body>
</html>

    CSS

    * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}

.container {
    width: 80%;
    margin: 0 auto;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.column {
    flex: 1;
    padding: 15px;
    background-color: #ddd;
    border: 1px solid #ccc;
    margin: 5px;
    text-align: center;
}

/* Optional: Media queries for responsive design */
@media (max-width: 768px) {
    .column {
        flex: 100%;
    }
}

    Best regards,
    Markov

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

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