CEF 1750 - Red border around dropdown menu

[JamesBateson]

We just upgraded to CEF3.1750 from CEF3.1650.

We are disabling pack loading with CefSettings.pack_loading_disabled flag in our release configuration. This now causes a thick red border to appear around the drop-down part of select elements. The drop-down also sometimes does not appear directly below the select element (see attached image).

The red border does not appear is pack loading is not disabled and the cef.pak and locales folder is present.

We are hosting CEF from C++/MFC but, it looks like this has been reported yesterday using CEFSharp on StackOverflow (http://stackoverflow.com/questions/2739 ... n-cefsharp).

[Sga]

Same here with cef_binary_3.2171.1902_windows32 in C++ application.
It only happens to me in a Windows 8 deployment environment, not on my Windows 7 development PC.
Trying right now to solve the problem.

[magreenblatt]

The red border does not appear is pack loading is not disabled and the cef.pak and locales folder is present.

Right. So you need to provide the resources via CefResourceBundleHandler in that case.

[mkoubaa]

I had this exact problem and copying the cef_100_percent.pak and cef_200_percent.pak into my application's executable location fixed the issue.

[Sga]

I had this exact problem and copying the cef_100_percent.pak and cef_200_percent.pak into my application's executable location fixed the issue.

Thanks, fixed for me too!

[MaNI]

Hi,

I'm seeking some further clarification on this.
Does anybody know why excluding "cef.pak" causes this red border? What can be done about it, is the only way currently to stop this to include "cef.pak"
I guess what I don't understand here is that the description of the .pak file(s) are "Note: Contains WebKit image and inspector resources." - How does this relate to a red border around dropdown menus?

Right. So you need to provide the resources via CefResourceBundleHandler in that case.

But what resources, it is just a border? Or does CEF use an image for drop down borders or something?

[MaNI]

Are the cef.pak contents available somewhere?

[magreenblatt]

Or does CEF use an image for drop down borders or something?

Yes, the select dropdown border is a series of images. You can style the select using CSS if you would prefer not to use the images.

Are the cef.pak contents available somewhere?

They are available in the Chromium source tree. Resource IDs are listed in the "include/cef_pack_resources.h" file from the CEF binary distribution. You can then search for the ID here to find the associated resource. For example, IMAGES_CHROMESELECT_PNG will lead you to "Images/chromeSelect.png" which exists at "third_party/WebKit/Source/devtools/front_end/Images/chromeSelect.png".

[MaNI]

Yes, the select dropdown border is a series of images. You can style the select using CSS if you would prefer not to use the images.

Perhaps I am missing something, but despite much searching I have yet to find any CSS that works for the pull down list of a select in chrome - I can style the select itself but not the pull down.
If anybody knows a way to do this it would be appreciated as I would indeed prefer to avoid the images and solve this via CSS if possible.

They are available in the Chromium source tree. Resource IDs are listed in the "include/cef_pack_resources.h" file from the CEF binary distribution. You can then search for the ID here to find the associated resource. For example, IMAGES_CHROMESELECT_PNG will lead you to "Images/chromeSelect.png" which exists at "third_party/WebKit/Source/devtools/front_end/Images/chromeSelect.png".

Are the ID's e.g. IMAGES_CHROMESELECT_PNG exposed by CEF somewhere? Unless I miss something they can change with every release so I can't hardcode based on number but I can't see anywhere where this is exposed by CEF.

[MaNI]

Code: Select all

const unsigned char IMAGES_CHROMESELECT_PNG_DATA[] = {0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00, 0x00, 0x00, 0x0d, 0x49, 0x48, 0x44, 0x52, 0x00, 0x00, 0x00, 0x08, 0x00, 0x00, 0x00, 0x08, 0x08, 0x06, 0x00, 0x00, 0x00, 0xc4, 0x0f, 0xbe, 0x8b, 0x00, 0x00, 0x00, 0x01, 0x73, 0x52, 0x47, 0x42, 0x00, 0xae, 0xce, 0x1c, 0xe9, 0x00, 0x00, 0x00, 0x04, 0x67, 0x41, 0x4d, 0x41, 0x00, 0x00, 0xb1, 0x8f, 0x0b, 0xfc, 0x61, 0x05, 0x00, 0x00, 0x00, 0x09, 0x70, 0x48, 0x59, 0x73, 0x00, 0x00, 0x0e, 0xc4, 0x00, 0x00, 0x0e, 0xc4, 0x01, 0x95, 0x2b, 0x0e, 0x1b, 0x00, 0x00, 0x00, 0x31, 0x49, 0x44, 0x41, 0x54, 0x28, 0x53, 0x63, 0xf8, 0x8f, 0x03, 0xa4, 0xa5, 0xa5, 0x81, 0x65, 0x18, 0xb0, 0xc9, 0xc3, 0x24, 0xb1, 0x2a, 0x40, 0x96, 0xc4, 0x50, 0x80, 0x2e, 0x89, 0xa2, 0x00, 0x5d, 0x12, 0xc5, 0x0d, 0xb8, 0x24, 0xc1, 0x26, 0xe0, 0x93, 0x04, 0x29, 0x60, 0x04, 0xab, 0xc2, 0x03, 0x00, 0xea, 0x6f, 0xd1, 0x30, 0x71, 0x13, 0x42, 0xea, 0x00, 0x00, 0x00, 0x00, 0x49, 0x45, 0x4e, 0x44, 0xae, 0x42, 0x60, 0x82};
const unsigned int IMAGES_CHROMESELECT_PNG_LEN = 156;
//const unsigned int IMAGES_CHROMESELECT_PNG = 4770;
const unsigned int IMAGES_CHROMESELECT_PNG = 22032;
bool CHTMLCefApp::GetDataResource(int resource_id, void*& data, size_t& data_size)
{
   if(resource_id == IMAGES_CHROMESELECT_PNG)
   {
      data = (void*)IMAGES_CHROMESELECT_PNG_DATA;
      data_size = IMAGES_CHROMESELECT_PNG_LEN;
      return true;
   }
   return false;
}


I have tried the above code with both IDs (from putting a log call 4770 is the only ID that is ever asked for) and it doesn't seem to help. I tried doing a memcpy into data as well incase the fixed memory address was somehow an issue and that didn't help either.

I'm not really sure how to proceed from here - I really need to big ugly red border gone Any further advice greatly appreciated.