Regarding the design-MVC

Murali P

hi team,

can any one provide a solution for the below problem

here in this big box we have to display 10 icons with text but the space is less...

Icons sizes will be width 27pixels and height 23pixels.

i tried my best to show it as two rows but all the icons will be data based means dynamically will display based on certain conditions.

can anyone suggest me to display the text of icon to fix with in the height of icon. used
for text but looks odd

Note : All icons has to be display in a single line horizontally

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Murali P3y ago
hi deepak,

thanks for the reply.. but expected output is not that .. need to adjust the width of text with in the height of icon /check box since space of div is less and need to adjust
0

Deepak Rawat3y ago

Here is the solution i am not sure you are using icon or checkbox i asume you re using checkbox.




    Checkbox with Text in a Single Row
    


    
        
        Text next to the checkbox
    
    
        
        Text next to the checkbox
    
    
        
        Text next to the checkbox
    
    
        
        Text next to the checkbox
    
    
        
        Text next to the checkbox
    
    
        
        Text next to the checkbox

Output

Murali P3y ago
Didi not worked out well..

Thanks for the help
0

Mohammad Hussain3y ago


  
    
    Icon 1 Text Here

.icon-container {
  white-space: nowrap; /* Prevent text from wrapping to new lines */
  display: flex; /* Display icons and text in a single line */
  gap: 10px; /* Adjust the gap between icons */
}

.icon-with-text {
  display: flex; /* Display icon and text horizontally */
  align-items: center; /* Center text vertically with icon */
}

.icon-text {
  max-width: 27px; /* Set max-width to the icon's width */
  overflow: hidden; /* Hide overflowing text */
  text-overflow: ellipsis; /* Add ellipsis to indicate truncated text */
  font-size: 10px; /* Adjust font size as needed */
}