Member Avatar for Lakhbir

Hello,

In sort by relevance mode, my cse at [website]() displays label "relevance" out of box and when label "date" is selected, it displays correctly.

Pure CSE's html and css code displays correctly, whereas when I add it to my site the above problem occurs.

Some css or javascript at my site is causing this, but I am not able to figure it out.

Thanks for any help.

  • 1 Contributor
  • 1 Reply
  • 230 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by Lakhbir

Dani AI

Generated

reported the problem was a CSS mistake. For future readers who find a third‑party widget’s selected label rendered “outside” its box while another option looks fine, the root cause is almost always site CSS leaking into the widget. Common culprits are global resets or broad rules that affect form controls (for example global select, option, * or generic label rules), flexbox alignment applied to a widget wrapper, transforms/position offsets, or mismatched line-height/height values.

Practical diagnostic steps: open browser DevTools and inspect the element that shows the label (check whether it’s a select, an input or a span inside the widget). Look at the computed styles and the rule origin column to find any site stylesheet rules overriding the widget. Toggle rules off one at a time to see which one fixes the rendering. Pay special attention to line-height, height, padding, position/top/transform, display/align-items, white-space and overflow.

Two straightforward fixes: 1) narrow or remove overly broad site rules so they don’t target the embedded control; 2) add a scoped override for the widget to restore normal metrics. Example override (adapt the selector to the widget’s top-level class):

/* scope overrides to the widget only */
.gsc-control-cse * {
  line-height: normal !important;
  white-space: normal !important;
  overflow: visible !important;
  transform: none !important;
}

Preventive notes: avoid global selectors that touch all form elements, test third‑party widgets on a clean page to confirm the widget’s baseline behavior, and keep global resets as small and targeted as possible. When convenient, posting the exact selector that caused the issue (as did) helps future searchers locate the same fix quickly.

Member Avatar for Lakhbir

Gotcha! a very silly mistake in css.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.