Checkboxes are not aligned with the text.

Created on 14 September 2023, 10 months ago
Updated 15 May 2024, about 1 month ago

Problem/Motivation

Checkboxes are not aligned with the text. Currently, the layout is breaking.

Steps to reproduce

  1. Install the theme and enable it
  2. Go to the search page
  3. Open advanced settings and see the checkbox

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Fixed

Version

9.1

Component

Code

Created by

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

Merge Requests

Comments & Activities

  • Issue created by @shweta__sharma
  • 🇪🇸Spain nesta_

    Thank You for Reporting the Issue

    Dear Shweta Sharma,

    I wanted to extend my heartfelt appreciation to you for bringing the issue to our attention. Your feedback is invaluable in helping us improve our contributed theme.

    We have acknowledged the problem you mentioned regarding the misalignment of checkboxes with the text, causing layout issues. Rest assured, our development team is actively looking into this matter. We are committed to addressing this issue promptly and will be working on a patch to resolve it.

    Your diligence in reporting this problem is a testament to our collaborative community, and your contribution plays a vital role in enhancing the overall quality of our theme. We will keep you updated on our progress, and please feel free to reach out if you have any further insights or questions.

    Once again, thank you for your valuable input. We greatly appreciate your support in making our theme even better.

    Warm regards.

  • 🇮🇳India shiv_yadav

    Hi Shweta,as your request , i have add some css for fix checkbox alignment .
    Attached screenshot and patch.

  • 🇮🇳India chetan 11

    Hi @nesta_
    I have fixed the checkbox alignment & attached the patch.
    Please review the attach file.

  • Status changed to Needs review 9 months ago
  • Status changed to Needs work 9 months ago
  • 🇵🇭Philippines clarkssquared

    Hi chetan 11,

    Thank you for your patch, I applied it and I confirmed that it changed the checkbox's text, however, the alignment of text is still not properly aligned for about a few pixels.

    Please look at the screenshots I attached for your reference.

    Thank you

  • 🇮🇳India shiv_yadav

    hello clarkssquared, Added some css for modified checkboxes as well. attached screenshot & patch as well.

  • Status changed to Needs review 9 months ago
  • Status changed to RTBC 9 months ago
  • 🇵🇭Philippines clarkssquared

    Hi shiv_yadav,

    I applied your new patch #7 and I confirmed that the checkbox's text/label is now properly aligned,

    Attaching screenshot of the checkbox after the patch.

    Thank you

  • Status changed to Needs work 9 months ago
  • 🇪🇸Spain nesta_

    I would like to express my sincere appreciation for addressing the issue titled "Checkboxes are not aligned with the text" in our Drupal theme. Your dedication to resolving this problem is highly valued.

    I would like to take this opportunity to provide a detailed description and explanation of how to address this issue more efficiently, aligning with development best practices and keeping our code cleaner and more organized.

    Issue Description:
    The current issue refers to an alignment problem with checkboxes in our Drupal theme. To address this issue, patches have been provided that directly modify the compiled CSS. While these patches may temporarily resolve the issue, it is essential to highlight that they do not follow best development practices and may lead to long-term maintenance issues.

    Explanation of the Suggested Solution:
    To address this issue more efficiently and sustainably, it is recommended to follow these steps:

    1.- Documentation:
    Before making any changes to the code, ensure you consult the documentation for our Drupal theme. This will provide you with a deeper understanding of the theme's structure and style conventions.

    2.- Modify the Corresponding Sass Partial:
    Identify the Sass partial that controls the styles of the checkboxes in question. Make sure this is the correct location for making style modifications.

    3.- Run the Gulp Task:
    Once you have made the necessary modifications to the Sass partial, execute the corresponding Gulp task to compile the CSS. This will ensure that the changes are reflected in the compiled CSS.

    4.- Submit the .sass Patch:
    Instead of directly modifying the compiled CSS, submit the patch containing the modifications to the Sass file (.sass). This will allow for a more transparent review and smoother integration of the changes into the codebase.

    Conclusion:
    I appreciate your commitment to resolving this issue and your attention to this detailed explanation of the suggested solution. By following these steps, we can keep our code more organized and adhere to development best practices, making future updates and maintenance of the Drupal theme more manageable.

    I hope this information is helpful, and we can work together to effectively and efficiently resolve this issue. If you have any further questions or need additional guidance, please do not hesitate to contact me.

    Sincerely,

    Nesta

  • Assigned to sourojeetpaul
  • Hello nesta_,
    Your point is absolutely valid, we need to make changes on the SCSS files rather than directly modifying the CSS files, otherwise whenever someone runs gulp the old SCSS will get compiled and replace the modified CSS.
    I think we can push both the SCSS files and CSS files so that on merger, the changes gets reflected instantly. Not sure if any build process is set up already through gitlab CI, that's why pushing both the SCSS and CSS files will be suitable. Nevertheless even if any build process is set up over there, it will again compile the SCSS file, resulting into the same CSS file as we push.

    I'm looking into it, and making the necessary changes!

  • Issue was unassigned.
  • Status changed to Needs review 3 months ago
  • Hi, I've resolved the alignment issue by modifying the SASS file and compiling it back to CSS file. Raised an MR for the same please have a look:
    https://git.drupalcode.org/project/da_vinci/-/merge_requests/1
    This is how it looks now:

  • Status changed to Needs work 3 months ago
  • Status changed to Needs review 3 months ago
  • Hello nesta_,
    Made the suggested changes please have a look. Though the compiled CSS will remain same!

  • Status changed to Fixed about 1 month ago
  • 🇪🇸Spain elgarcia

    When #3444883 is fixed I will create a new tag

  • Status changed to Fixed about 1 month ago
Production build 0.69.0 2024