The select box (text format) for Add Content and Add Comment differ in styling. I have tested on Firefox (Linux). Also screenshots have been attached.

Create bug:
1. Use Bartik theme as administration theme.
2. Visit Create Article from Content Section.
3. Below the body section, to select Text Format you will see this
content_btn

4. Submit the article.
5. Create a comment for the article.
6. In the text format select box for comment body you will see this
comment_btn

Both these Select boxex should have same styling.

Issue fork bartik-2826903

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:

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

codehimanshu created an issue. See original summary.

kostyashupenko’s picture

Status: Needs work » Needs review
FileSize
27.94 KB
445 bytes

I've just removed border-radius at this patch to make it absolutely 100% as on node create/edit pages. But i think we need more description about it, coz looks like on your first screen it is seven theme for administration theme, so i can't understand the phrase "1. Use Bartik theme to setup site."

On my screen there is bartik theme as default and as administration theme and it looks ok for now on my side after this little patch. But if you talk about bartik - default theme, and seven - administration theme => in this case i think we don't need any changes, coz selectboxes at administration theme doesn't have any styles. So styles are default, just related to browsers (everywhere it's different).

I'll resume. So:
1. I think we need more clear description of this task
2. Maybe more screens

Now how it looks at my FF (linux as well) after this patch
select_ff.png

codehimanshu’s picture

FileSize
29.72 KB
28.47 KB

@kostyashupenko

This is not what it looks like on my screen even after applying patch.
Even before applying patch, the font-family of both the pages node create comment and add article is different. I have attatched the screenshot of both the pages for FF(linux). This is after applying your patch.
content box
comment box

neerajpandey’s picture

In my case the dropdown button in comment body has a border-radius but there there is no such thing in the article body.
So I think this should work.

denutkarsh’s picture

@neerajpandey Thanks for picking this up. I tested your patch and it looks like the patch cannot be applied to drupal 8.2.x . Also I would advise you to apply the patch locally before posting it to the d.o , it saves a lot of time.. Or else you can use dreditor.

Status: Needs review » Needs work

The last submitted patch, 4: description-change_2840225_1.patch, failed testing.

denutkarsh’s picture

FileSize
432 bytes

@neerajpandey Try this patch, i think it does what you wanted to do. I have added you as author while submitting the patch.

denutkarsh’s picture

Status: Needs work » Needs review
denutkarsh’s picture

FileSize
140.25 KB
133.58 KB

Here are the screenshots after applying the patch in comment 7. According to this issue both these select boxes should have the same styling and this patch actually solves the issue.

Thew’s picture

Issue summary: View changes
Status: Needs review » Reviewed & tested by the community

I tested, confirmed this bug.
Also, tested that the patch changes the radius of the comment form.

Change issue summary
Change the step one of how to create bug.

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 7: 2826903-7.patch, failed testing.

denutkarsh’s picture

Status: Needs work » Fixed

Unrelated random fail b/c #2828559: UpdatePathTestBase tests randomly failing. The patch failed because of this, there is no problem with the patch. I am setting the issue as fixed.

denutkarsh’s picture

Status: Fixed » Reviewed & tested by the community

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 7: 2826903-7.patch, failed testing.

denutkarsh’s picture

Status: Needs work » Reviewed & tested by the community

Again settings this to RTBC as the fails were unrelated.

alexpott’s picture

Status: Reviewed & tested by the community » Needs work

So I think this needs more thought. Firstly I'm not sure I agree with the premise that the boxes should look the same. But anyway... even if so..

.comment-form input,
.comment-form .form-select {
  margin: 0;
  border-radius: 4px;
}

in bartik's form css is purposefully styling it like this.

Also this "issue" if it one can be caused by unticking the checkbox for "Use the administration theme when editing or creating content" on admin/appearance

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

surbhiG’s picture

Status: Needs work » Needs review
FileSize
436 bytes
45.19 KB

In this patch i have removed the border radius from the select field instead of overriding the border radius for select field and tested it also by unticking the checkbox for "Use the administration theme when editing or creating content" on admin/appearance.

Vidushi Mehta’s picture

I've checked on my machine in FF and both selects looks same didn't found any difference. Adding screenshots for the same.

legovaer’s picture

Issue tags: +Baltimore2017
sheavey’s picture

Assigned: Unassigned » sheavey
Status: Needs review » Needs work
FileSize
293.61 KB
331.72 KB

I tested the most recent patch on on a fresh instance and the issue appears to be still be active. The Text format select box is still displaying erroneously on the comment form doesn't match its counterpart on the Article creation form.

I am running the following specs:

Drupal Vers.: 8.4.0-dev
OS Vers.: macOS Sierra 10.12.4
Chrome Vers.: 58.0.3029
Firefox Vers.: 53.0 (64-bit)
Safari Vers.: Version 10.1 (12603.1.30.0.34)

I'm attaching screenshots from both Chrome and Firefox.

At this point I think the issue is still open and I will work on a new solution over the next few days.

Thank you for your time.

cilefen’s picture

Hi sheavey:

I found this issue on the triage spreadsheet for Baltimore while I've been assigning issue credit. Thank you for helping out. It looks as though you got partway through a triage. I could give you credit if you complete and document all triage steps. Thank you!

poojakural’s picture

FileSize
41.38 KB
34.89 KB
246.49 KB
211.48 KB

Issue tested on window and mac machine. it is working fine. Here are the attached screenshots.

@sheavey I have tested issue on mac firefox browser but could not replicate. I am using 53.0.2. What is yours?

poojakural’s picture

Status: Needs work » Reviewed & tested by the community

I am moving to RTBC as could not replicate this issue.
@sheavey if you still facing issue and mark this issue as need work status

Gábor Hojtsy’s picture

Issue summary: View changes

Reading through the issue summary I don't understand how does the patch address the problem? Would moving the border radius to not apply to the select box restore the original styling of the element?

Wim Leers’s picture

Status: Reviewed & tested by the community » Needs work
Issue tags: +Needs issue summary update

Per #25.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.6 was released on August 2, 2017 and is the final full bugfix release for the Drupal 8.3.x series. Drupal 8.3.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.4.0 on October 4, 2017. (Drupal 8.4.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.4.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.4 was released on January 3, 2018 and is the final full bugfix release for the Drupal 8.4.x series. Drupal 8.4.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.5.0 on March 7, 2018. (Drupal 8.5.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.5.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.6 was released on August 1, 2018 and is the final bugfix release for the Drupal 8.5.x series. Drupal 8.5.x will not receive any further development aside from security fixes. Sites should prepare to update to 8.6.0 on September 5, 2018. (Drupal 8.6.0-rc1 is available for testing.)

Bug reports should be targeted against the 8.6.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

pawandubey’s picture

In the comment form, I have applied the style in <select> element as similar to admin seven theme. After this patch you can find the same style as per the attached screenshot.

Please review this patch and let me know your feedback.

pawandubey’s picture

Version: 8.6.x-dev » 8.8.x-dev
Status: Needs work » Needs review

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

tanubansal’s picture

Assigned: sheavey » tanubansal
tanubansal’s picture

Assigned: tanubansal » Unassigned
FileSize
105.5 KB

@pawandubey : I have added the latest patch that you have provided. Tested on Firefox, chrome and other browsers.
Problem still exists when we change theme to 'Bartik' and create article content.
Text format select box for comment body still have different styling on Firefox.

poojakural’s picture

Assigned: Unassigned » poojakural

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

djsagar’s picture

Assigned: poojakural » Unassigned
Status: Needs review » Needs work
djsagar’s picture

Status: Needs work » Needs review
FileSize
171.74 KB
256.95 KB
432 bytes

Updating patch for drupal 9.2.x-dev.

Please review.

Thanks!

Abhijith S’s picture

Applied patch #39 on 9.2.x and it works fine.The selectbox styling is now same in comment and content section after this patch.Adding screenshot below.

After patch(Firefox browser):

Comment section
after

Content section
after2

RTBC +1

BhumikaVarshney’s picture

Status: Needs review » Reviewed & tested by the community
FileSize
80.71 KB
73.85 KB

Hi @djsagar ,
Thanks #39 patch resolve the firefox issue.

lauriii’s picture

Status: Reviewed & tested by the community » Closed (works as designed)

Bartik doesn't seem to have any styles that would customize the design of the select element. For that reason, I think it's fine to see different select element designs on different browsers.

lauriii’s picture

Title: selectbox styling differs on FF » Comment form select styling differs from other selects
Status: Closed (works as designed) » Needs work

I was confused by the title/issue summary at first. I read it as if there was a difference in how the select is rendered across different browsers. However, the issue summary explains that it's actually on Firefox but across different instances of the select.

+++ b/core/themes/bartik/css/components/form.css
@@ -299,6 +299,7 @@ input.form-submit:focus {
 .filter-wrapper .form-select {
...
+  border-radius: 4px;

I think we should set the border-radius in a rule targeting .form-select so that it's applied globally on all selects.

alexpott’s picture

There's another part of this that affects all browsers - the text box inputs are styled differently too - see the title and subject text input boxes in #40.

Not sure about the best way to resolve this issue.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

gumnut’s picture

Moving project to Bartik because its now a contrib module

gumnut’s picture

Project: Drupal core » Bartik
Version: 10.1.x-dev » 1.0.2
Component: CSS » Look and Feel

djsagar’s picture

Status: Needs work » Needs review

Hi All,

Created MR request for better look, kindly review.

Thanks!