JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Buttons › Vertical radio button with image
Tagged: radi-button
- This topic has 1 reply, 2 voices, and was last updated 3 months ago by
Markov.
-
AuthorPosts
-
June 5, 2024 at 9:15 am #111006
tbettinazzi@axioma.it
ParticipantIn 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
-
This topic was modified 3 months ago by
tbettinazzi@axioma.it.
-
This topic was modified 3 months ago by
tbettinazzi@axioma.it.
-
This topic was modified 3 months ago by
tbettinazzi@axioma.it.
-
This topic was modified 3 months ago by
tbettinazzi@axioma.it.
June 5, 2024 at 10:51 am #111011Markov
KeymasterHi,
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,
MarkovSmart UI Team
https://www.htmlelements.com/ -
This topic was modified 3 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.