Incorrect alignment of the search input field and the submit button.

Created on 25 May 2023, over 1 year ago
Updated 31 May 2023, over 1 year ago

Problem/Motivation

Alignment of the search input and the search submit button looks incorrect.

Steps to reproduce

Install the theme and enable the kite theme on your machine.
Go to the search page. The search input field and the submit button is not aligned correctly.

Proposed resolution

Make changes on the css files to fix the issue.

๐Ÿ› Bug report
Status

RTBC

Version

1.0

Component

Code

Created by

๐Ÿ‡ฎ๐Ÿ‡ณIndia Mithun S Bangalore

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @Mithun S
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia ravi kant Jaipur

    ravi kant โ†’ made their first commit to this issueโ€™s fork.

  • @ravi-kant opened merge request.
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia ravi kant Jaipur

    I have fixed the issue and sent PR. Attaching screenshot.

  • Status changed to Needs review over 1 year ago
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia ravi kant Jaipur
  • Assigned to Akshay kashyap
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Abh1shek

    Hi @ravi kant, I checkout to your branch "3362675-incorrect-alignment-of". But still the issue of incorrect alignment is not fixed. Please check attached screenshot.

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Akshay kashyap

    @ravi kant Thanks for the Work

    I checked and applied #MR but couldn't apply it properly and I get an error message

    curl https://git.drupalcode.org/project/kite/-/merge_requests/24.diff | git apply -v 
      % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                     Dload  Upload   Total   Spent    Left  Speed
    100  307k    0  307k    0     0   175k      0 --:--:--  0:00:01 --:--:--  175k
    Checking patch PATCHES.txt...
    <stdin>:12: new blank line at EOF.
    +
    Checking patch css/sass/__block.scss...
    error: while searching for:
    .block-region-select {
      padding: 8px 25px;
    }
    select {
      background: url("/themes/custom/kite/images/arrow.png");
      background-position: right 12px center;
      background-size: 15px;
      background-repeat: no-repeat;
    
    error: patch failed: css/sass/__block.scss:263
    error: css/sass/__block.scss: patch does not apply
    Checking patch css/sass/__button.scss...
    error: while searching for:
      color: var(--color-primary);
    }
    .dropbutton-toggle button {
      background: url("/themes/custom/kite/images/arrow.png");
      background-repeat: no-repeat;
      background-size: 20px;
      background-position: center;
    
    error: patch failed: css/sass/__button.scss:144
    error: css/sass/__button.scss: patch does not apply
    Checking patch css/sass/__content.scss...
    error: while searching for:
      padding-bottom: 35px;
    }
    .js input.form-autocomplete {
      background-image: url("/themes/custom/kite/images/search.png");
      background-repeat: no-repeat;
      background-size: 23px;
    }
    
    error: patch failed: css/sass/__content.scss:236
    error: css/sass/__content.scss: patch does not apply
    Checking patch css/sass/__header.scss...
    error: while searching for:
    #header {
      padding-top: 35px;
      position: relative;
    }
    .header {
      position: relative;
      width: 100%;
      margin: 0;
      padding: 0;
      z-index: 5;
    }
    .header-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      @media (max-width: $mediaS) {
        justify-content: left;
      }
    }
    .header-right {
      display: flex;
      align-items: baseline;
    }
    .site-branding {
      display: flex;
      align-items: center;
    }
    .site-branding .site-logo img {
      width: auto;
      max-height: 65px;
    }
    // for Search
    
    .full-page-search {
      margin-bottom: 10px;
      border-right: 1px solid var(--color-primary);
      border-left: 1px solid var(--color-primary);
      padding: 0 12px;
    }
    
    .full-page-search .search-box {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: var(--black);
      z-index: 999;
    }
    .full-page-search .search-box-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      max-width: 70%;
      padding: 30px;
      border-radius: 5px;
      text-align: center;
    }
    .full-page-search .search-box-close {
      position: absolute;
      top: 95px;
      right: 20px;
      width: 30px;
      height: 30px;
      cursor: pointer;
      background-image: url("svg/cursor.svg");
      background-size: cover;
    }
    .search-icon .fa-search {
      color: var(--black);
      font-size: var(--font-20);
    }
    .form-search {
      width: 100%;
      height: 80px;
      padding: 0 20px;
    }
    .js-form-submit {
      width: 200px;
      height: 50px;
      margin-top: 10px;
      background: var(--color-primary);
      color: var(--white);
    }
    // end search
    
    // Navbar
    
    // /* Hide the sub-menu by default */
    .main-menu {
      display: flex;
    }
    .submenu {
      display: none;
      position: absolute;
      top: 48px;
      z-index: 1;
      background: var(--white);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
      transition: 0.3s;
      padding: 0;
      transition: 0.3s;
    }
    
    /* Style the parent menu item when hovered */
    .main-menu-item {
      list-style: none;
      padding: 0 22px;
    }
    
    /* Show the sub-menu on hover */
    .main-menu-item:hover .submenu {
      display: block;
    }
    
    /* Style the sub-menu links */
    .submenu li {
      display: block;
    }
    
    .submenu a {
      color: #333;
      padding: 10px;
      text-decoration: none;
    }
    
    .submenu a:hover {
      color: var(--black);
    }
    .main-menu .main-menu-item a {
      color: var(--black);
      font-size: var(--font-20);
      text-decoration: none;
      font-family: "Roboto";
      width: max-content;
    }
    
    .main-menu .main-menu-item a:hover {
      color: var(--color-primary);
      transition: 0.3s;
    }
    
    .main-menu-item a:after {
      bottom: 12px;
      content: "";
      display: block;
      height: 2px;
      left: 50%;
      position: absolute;
      background: var(--color-primary);
      transition: width 0.3s ease 0s, left 0.3s ease 0s;
      width: 0;
    }
    .main-menu-item a:hover:after {
      width: 100%;
      left: 0;
    }
    .main-menu-item a {
      color: var(--color-primary);
      text-transform: capitalize;
      text-decoration: none;
      display: inline-block;
      padding: 15px 0;
      position: relative;
    }
    .main-menu-item .is-active:after {
      bottom: 12;
      content: "";
      display: block;
      height: 2px;
      left: 50%;
      position: absolute;
      background: var(--color-primary);
      transition: width 0.3s ease 0s, left 0.3s ease 0s;
      width: 0;
    }
    .main-menu-item .is-active:after {
      width: 100%;
      left: 0;
    }
    
    .dropdown-arrow .fa-angle-down {
      transition: transform 0.4s ease;
    }
    .main-menu-item:hover .dropdown-arrow .fa-angle-down {
      transform: rotate(180deg);
    }
    
    .main-menu-item a.is-active {
      color: var(--color-primary);
    }
    
    .user-dropdown {
      position: relative;
    }
    
    .user-menu {
      display: none;
      position: absolute;
      top: 10px;
      left: 15px;
      z-index: 1;
      background-color: #fff;
      padding: 0;
      margin: 0;
      list-style: none;
      width: max-content;
      padding: 5px 25px;
      box-shadow: 0 3px 10px RGB(0 0 0 / 20%);
      @media (max-width: $mediaS) {
        left: -70px;
        top: 15px;
      }
    }
    .user-dropdown:hover .user-menu {
      display: block;
    }
    .fa-user {
      position: absolute;
      bottom: -7px;
      left: 18px;
      cursor: pointer;
    }
    .user-menu .menu-item a {
      color: var(--black);
      font-size: var(--font-20);
     
    error: patch failed: css/sass/__header.scss:1
    error: css/sass/__header.scss: patch does not apply
    Checking patch css/sass/__status.scss...
    error: while searching for:
      color: var(--white);
    }
    .button--dismiss {
      background-image: url("/themes/custom/kite/images/xmark-solid.svg");
      display: block;
      background-repeat: no-repeat;
    }
    
    error: patch failed: css/sass/__status.scss:39
    error: css/sass/__status.scss: patch does not apply
    Checking patch css/style.css...
    error: while searching for:
    #block-kite-content .view-frontpage {
      font-size: var(--font-26);
      margin: 50px 0;
      font-family: "Roboto"; }
    
    #footer {
      background: var(--black);
      color: var(--white);
      padding: 70px;
      display: block;
      width: 100%;
      z-index: 0; }
    
    .contextual-region {
      font-size: var(--font-26); }
    
    .footer-bottom {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
          -ms-flex-pack: justify;
              justify-content: space-between; }
    
    .social-icons {
      font-size: var(--font-26); }
    
    .icons a {
      display: -webkit-inline-box;
      display: -webkit-inline-flex;
      display: -ms-inline-flexbox;
      display: inline-flex;
      width: 30px;
      height: 30px;
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;
      text-decoration: none;
      font-size: 18px;
      margin: 10px;
      -webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
              box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
      -webkit-background-size: 100% 200%;
              background-size: 100% 200%;
      background-position: 0% 5%;
      -webkit-transition: background-position 0.5s, color 0.5s;
      -o-transition: background-position 0.5s, color 0.5s;
      transition: background-position 0.5s, color 0.5s; }
    
    .icons a:nth-child(1) {
      color: #1976d3;
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #fff), color-stop(50%, #1976d3));
      background-image: -webkit-linear-gradient(#fff 50%, #1976d3 50%);
      background-image: -o-linear-gradient(#fff 50%, #1976d3 50%);
      background-image: linear-gradient(#fff 50%, #1976d3 50%); }
    
    .icons a:nth-child(2) {
      color: #db6f44;
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #fff), color-stop(50%, #db6f44));
      background-image: -webkit-linear-gradient(#fff 50%, #db6f44 50%);
      background-image: -o-linear-gradient(#fff 50%, #db6f44 50%);
      background-image: linear-gradient(#fff 50%, #db6f44 50%); }
    
    .icons a:nth-child(3) {
      color: #000;
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #fff), color-stop(50%, #000));
      background-image: -webkit-linear-gradient(#fff 50%, #000 50%);
      background-image: -o-linear-gradient(#fff 50%, #000 50%);
      background-image: linear-gradient(#fff 50%, #000 50%); }
    
    .icons a:nth-child(4) {
      color: #03a9f5;
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #fff), color-stop(50%, #03a9f5));
      background-image: -webkit-linear-gradient(#fff 50%, #03a9f5 50%);
      background-image: -o-linear-gradient(#fff 50%, #03a9f5 50%);
      background-image: linear-gradient(#fff 50%, #03a9f5 50%); }
    
    .icons a:hover {
      background-position: 0% 100%;
      color: #fff; }
    
    .fa-brands {
      margin-right: 8px;
      font-size: var(--font-20); }
    
    .container {
      max-width: 1500px; }
    
    .view-content .views-field-info {
      padding: 15px 0; }
    
    .cols-4 {
      width: 100%; }
    
    tbody tr {
      border-bottom: var(--border-grey); }
    
    #slider {
      position: relative;
      width: 100%;
      min-height: 500px;
      margin: 0 auto;
      background-image: url("../../kite/images/kite.png");
      background-repeat: no-repeat;
      background-position: 0 10%;
      -webkit-background-size: cover;
              background-size: cover;
      overflow: hidden;
      z-index: 2; }
    
    #header {
      padding-top: 35px;
      position: relative; }
    
    .header {
      position: relative;
      width: 100%;
      margin: 0;
      padding: 0;
      z-index: 5; }
    
    .header-container {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
          -ms-flex-pack: justify;
              justify-content: space-between;
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center; }
      @media (max-width: 768px) {
        .header-container {
          -webkit-box-pack: left;
    error: patch failed: css/style.css:1
    error: css/style.css: patch does not apply
    Checking patch css/style.min.css...
    error: while searching for:
    #block-kite-content .view-frontpage{font-size:var(--font-26);margin:50px 0;font-family:Roboto}#footer{background:var(--black);color:var(--white);padding:70px;display:block;width:100%;z-index:0}.contextual-region{font-size:var(--font-26)}.footer-bottom{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.social-icons{font-size:var(--font-26)}.icons a{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:30px;height:30px;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-decoration:none;font-size:18px;margin:10px;-webkit-box-shadow:0 10px 10px rgba(0,0,0,.1);box-shadow:0 10px 10px rgba(0,0,0,.1);-webkit-background-size:100% 200%;background-size:100% 200%;background-position:0 5%;-webkit-transition:background-position .5s,color .5s;-o-transition:background-position .5s,color .5s;transition:background-position .5s,color .5s}.icons a:nth-child(1){color:#1976d3;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(50%,#fff),color-stop(50%,#1976d3));background-image:-webkit-linear-gradient(#fff 50%,#1976d3 50%);background-image:-o-linear-gradient(#fff 50%,#1976d3 50%);background-image:linear-gradient(#fff 50%,#1976d3 50%)}.icons a:nth-child(2){color:#db6f44;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(50%,#fff),color-stop(50%,#db6f44));background-image:-webkit-linear-gradient(#fff 50%,#db6f44 50%);background-image:-o-linear-gradient(#fff 50%,#db6f44 50%);background-image:linear-gradient(#fff 50%,#db6f44 50%)}.icons a:nth-child(3){color:#000;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(50%,#fff),color-stop(50%,#000));background-image:-webkit-linear-gradient(#fff 50%,#000 50%);background-image:-o-linear-gradient(#fff 50%,#000 50%);background-image:linear-gradient(#fff 50%,#000 50%)}.icons a:nth-child(4){color:#03a9f5;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(50%,#fff),color-stop(50%,#03a9f5));background-image:-webkit-linear-gradient(#fff 50%,#03a9f5 50%);background-image:-o-linear-gradient(#fff 50%,#03a9f5 50%);background-image:linear-gradient(#fff 50%,#03a9f5 50%)}.icons a:hover{background-position:0 100%;color:#fff}.fa-brands{margin-right:8px;font-size:var(--font-20)}.container{max-width:1500px}.view-content .views-field-info{padding:15px 0}.cols-4{width:100%}tbody tr{border-bottom:var(--border-grey)}#slider{position:relative;width:100%;min-height:500px;margin:0 auto;background-image:url(../images/kite.png);background-repeat:no-repeat;background-position:0 10%;-webkit-background-size:cover;background-size:cover;overflow:hidden;z-index:2}#header{padding-top:35px;position:relative}.header{position:relative;width:100%;margin:0;padding:0;z-index:5}.header-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}@media (max-width:768px){.header-container{-webkit-box-pack:left;-webkit-justify-content:left;-ms-flex-pack:left;justify-content:left}}.header-right{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline}.site-branding{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.site-branding .site-logo img{width:auto;max-height:65px}.full-page-search{margin-bottom:10px;border-right:1px solid var(--color-primary);border-left:1px solid var(--color-primary);padding:0 12px}.full-page-search .search-box{display:n
    error: patch failed: css/style.min.css:1
    error: css/style.min.css: patch does not apply
    Checking patch css/style.scss...
    Checking patch templates/navigation/menu.html.twig...
    error: templates/navigation/menu.html.twig: No such file or directory
    Checking patch templates/views/views-view.html.twig...
    error: templates/views/views-view.html.twig: No such file or directory
    Checking patch theme-settings.php...
    error: while searching for:
        '#description' => t('<h3>Manage Homepage Slider</h3>'),
        '#group' => 'kite',
      ];
    
    
    
    
    
      
      /**
       * Slider Settings
    
    error: patch failed: theme-settings.php:27
    error: theme-settings.php: patch does not apply
    
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Akshay kashyap

    Please review.

  • Issue was unassigned.
  • Status changed to RTBC over 1 year ago
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Abh1shek

    Hi @Akshay kashyap, your patch is applied successfully and it is working fine. The alignment issue of search input field is fixed now. Attached Screenshot. Moving it to RTBC.

Production build 0.71.5 2024