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

Issue fork da_vinci-3387300

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

shweta__sharma created an issue. See original summary.

nesta_’s picture

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.

shiv_yadav’s picture

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

chetan 11’s picture

StatusFileSize
new86.42 KB

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

shweta__sharma’s picture

Status: Active » Needs review
clarkssquared’s picture

Status: Needs review » Needs work
StatusFileSize
new203.54 KB
new44.63 KB

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

P.S. Sorry for the typo in one of my screenshot, I meant Proposed* not Purposed.

shiv_yadav’s picture

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

shiv_yadav’s picture

Status: Needs work » Needs review
clarkssquared’s picture

Status: Needs review » Reviewed & tested by the community
StatusFileSize
new51.42 KB

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

nesta_’s picture

Status: Reviewed & tested by the community » Needs work

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

sourojeetpaul’s picture

Assigned: Unassigned » 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!

sourojeetpaul’s picture

Assigned: sourojeetpaul » Unassigned
Status: Needs work » Needs review
StatusFileSize
new19.34 KB

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:
Checkbox Alignment

nesta_’s picture

Status: Needs review » Needs work
sourojeetpaul’s picture

Status: Needs work » Needs review

Hello nesta_,
Made the suggested changes please have a look. Though the compiled CSS will remain same!

elgarcia’s picture

Status: Needs review » Fixed

When #3444883 is fixed I will create a new tag

elgarcia’s picture

Status: Fixed » Closed (fixed)