CSS problem with discourse search window after latest update

Product Support

AI-generated summary

The discussion revolves around a CSS issue with the Discourse search window after the latest update. Pravi noticed the problem and posted a screenshot, but codinghorror suspected it was related to Pravi’s custom CSS and not a Discourse problem.

Pravi shared their CSS code and asked for help from CSS experts, thinking there might be an issue with the code.

Johani identified the problem, pointing out that a rule in the desktop CSS was too broad and was forcing all divs with the container class to be 1110px wide, causing the issue with the inputs. Johani suggested making the selectors more specific or adding max-width: 100% as a quick fix.

Pravi thanked Johani for the solution and praised their CSS expertise.

1

Not sure its a bug or problem related to my custom CSS. Noticed since the last update.

discourse_prob
discourse_prob1920Ă—1080 151 KB

2

This is specific to your site and CSS, because I can’t repro it here on meta.

Unless it repros here, it is unlikely to be a Discourse problem.

3

Well, In that case, I need some help from some CSS Experts. I think something bad is in current CSS style.

@import url('https://fonts.googleapis.com/css?family=Redressed');
@import url('https://fonts.googleapis.com/css?family=Philosopher');

header #site-text-logo {
    font-size: 26px;
    //font-style: italic;
    font-family: 'Redressed', cursive;
    color: #2471a3;   //#5c998b;
    position: relative;
    top: -3px;
    left: 25px;
    filter: drop-shadow(1px 1px 1px #fff) drop-shadow(-1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff);
}

.d-header {
    padding: 0;
    height: 0; 
    background-color: #323433; // Header Background color
    width: 100%;
    padding-top: 0;
    height: 48px;
    box-shadow: none;
}

.d-header  .wrap {
    background-color: #fff;
    max-width: 1144px;
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25);
}

.d-header .panel {
    top: 3px;
}

#main-outlet {
    padding-top: 70px;
}

/* lt. gray container around main content area */
#main {
  width: 1110px;
  background-color: #ffffff;
  margin: 0 auto;
  position: static;
  padding: 0 25px 25px; 
}

.title-wrapper {
    padding-bottom: 3px;
}

.extra-info-wrapper .topic-link {
    font-family: 'Philosopher', sans-serif;  
}

.extra-info-wrapper .badge-wrapper.bullet span.badge-category {
    font-family: 'Philosopher', sans-serif;
    font-size: 13px;
}

#topic-title h1 a {
    font-family: 'Philosopher', sans-serif;
}

.badge-wrapper.bullet span.badge-category {
    font-family: 'Philosopher', sans-serif;
}

.d-header-icons .badge-notification {
    margin: 5px 0;
    //background: #00AEEF;
}

.d-header .contents {
   margin: 2px 0;
}
  /* dark gray background in body */
body {
  background-color: #323433;
  //height: 100%; 
    
}
html {
  background-color: #323433; 
    
}

/* set fixed container sizes */
div.full-width {
  width: 1110px; 
}
div.container {
  width: 1110px; 
}
.admin-content {
  width: 1110px; 
}
#user-menu {
  width: 1110px; 
}
.modal-outer-container {
  width: 1110px; 
}

/* keep reply control left justified */
#reply-control {
  left: 0;
  z-index: 999; 
}
  
/* login button color tweak for consistency */
.btn-primary {
  background-image: linear-gradient(to bottom, #00AEEF, #009EDA); 
}
  
/* top nav & admin button colors */
.nav-pills li>a:hover { /* inactive button hover (lt. blue) */
  color: #009EDA;
  background-color: #CADCEF;
  border-color: #BDBDBD; 
}
.nav-pills li.active>a, .nav-pills li>a.active { /* active button static (dk. blue) */
  border-color: #16617d;   
  background-color:#00AEEF;
  background-image: linear-gradient(to bottom, #00AEEF, #009EDA);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.33); 
}
.nav-pills li.active>a:hover, .nav-pills li>a.active:hover { /* active button hover (dk. blue) */
  border-color: #16617d;   
  background-color:#00AEEF;
  background-image:linear-gradient(to bottom, #00AEEF, #00B0F0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.33),inset 0 -1px 2px rgba(0,0,0,0.2);
  color: white; 
}
  
/* side nav button colors (profile pages, etc) */
.nav-stacked li.active a, .nav-stacked li.active a:hover { /* active button static */
  background-color: #CADCEF;
  color: #333; 
}
.nav-stacked .active .icon-chevron-right, .nav-stacked .active:hover .icon-chevron-right { /* arrow bg */
  color: #333;
  background-color: transparent;
  text-shadow: none; 
}
.nav-stacked li:hover .icon-chevron-right { /* button arrow hover */
  color: #333;
}
  
/* topic list table styling */
#topic-list tbody tr:nth-child(even) {
  background-color:#F0F0F0; 
}
#main #topic-list th {
  background-color:#E6E6E6; 
}
4

The rule starting at line #96 in your desktop CSS is too broad.

div.container {
  width: 1110px; 
}

You’re forcing all divs with the container class to be 1110px wide. The inputs you’re having problems with inherit that width.

The real fix is that your selectors should be more specific to the elements you want to target.

However you can try something like this if you’re looking for a quick fix:

div.container {
  width: 1110px;
  max-width: 100%;
}

1223
12231986Ă—966 45.6 KB

5

Thanks you so much @Johani .You are a CSS God.