Canvas and Avatar Selection box not displayng

On edit profile, change canvas or Avatar selection boxes not displaying. Only a small thin line is visible on both. When the page is refreshed it gives a bit bigger display box but still nothing shows to select. It worked before but since update to Joomla 4.4.0 it is not displaying. On PHP 8.1.25

What could be the issue, I have cleaned the cache but that makes no difference, 

Looks like you have a CSS conflict causing the width of the dropdown to be nothing. Try switching to default Joomla template, clear cache, and see if issue persists. If using a custom CB template do the same for CBs template. If you've supplied any CB template CSS overrides review your overrides carefully. If still broken right click the dropdown, click inspect element, and review its CSS in your browsers developer tools.

Kyle
I have the same settings for the CB Template on another site with similar Joomla setup using CB to administrate the user on the site. The other one displays correctly, this one is one where I used Easy Profile before, and although I have removed it and implemented CB, it seems to be a bit of a struggle.

I have not done any overrides, using the default CB template. When I click on the CB Profile Edit link again in the breadcrumbs, It changes the drop down to be the correct width. When I select "select from Gallery" no gallery is displayed. The canvas is in the correct folder. It seems that their is a communication issue between the database and the display?

 

That's just a plain old HTML select input. There's nothing fancy about it. So the only reason for it to break is CSS or JS on your site is breaking it. I've seen some sites install a 3rd party Joomla extension that converts all selects to ChosenJS (for searchable select inputs) and that can cause issues like this.

Thanks Kyle

I have gone through all the third party plugins, removed all outdated plugins. The only search function is Joomla Project Smart Search that I can see. Have Hikashop and Events Booking installed but their Smart search functions is not activated. 

When I compare the two site setups, I cannot see any difference in the settings and plugins that could cause this. Seems I will just have to keep trying and see what will work.

What I can trace is the following:
Incorrect use of <label for = FORM_Element> 

1. The label's 
   Code:

   for
    attribute doesn't match any element 
   Code:

   id
   . This might prevent the browser from correctly autofilling the form and accessibility tools from working correctly.To fix this issue, make sure the label's 
   Code:

   for
    attribute references the correct 
   Code:

   id
    of a form field.
2. AFFECTED RESOURCES
   1. 2 resources

The two resources is:

<label for="canvas" id="cblabcanvas" class="col-form-label col-sm-3 pr-sm-2">Canvas image</label>   (The Copy JS Path is: document.querySelector("#cblabcanvas")
Outer HTM L is <label for="canvas" id="cblabcanvas" class="col-form-label col-sm-3 pr-sm-2">Canvas image</label>
Selecter is #cblabcanvas
Style is     -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    color: #666666;
    list-style: none;
    text-rendering: optimizespeed;
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 400;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    box-sizing: border-box;
    margin-top: var(--bs-gutter-y);
    display: inline-block;
    position: relative;
    width: 100%;
    flex: 0 0 25%;
    max-width: 25%;
    padding-top: calc(0.375rem + 1px);
    padding-bottom: calc(0.375rem + 1px);
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.5;
    padding-right: 0.5rem !important;
    padding-left: 0;
    float: none;
XPath is //*[@id="cblabcanvas"]
Full XPath is   /html/body/div[2]/section[2]/div/div/div[1]/main/div[3]/div/div/div/div/div/div[1]/form/div[1]/div/div[5]/div/div/div/label


<label for="avatar" id="cblabavatar" class="col-form-label col-sm-12">Profile image</label>  (The JS Path = document.querySelector("#cblabavatar")

Outer HTML is <label for="avatar" id="cblabavatar" class="col-form-label col-sm-12">Profile image</label>