Steps:
1) Navigate to any content
2) Tap on Add Comment
3) Tap on image upload icon
4) Observe the screenshot

Actual: Cross button UI is not upto the mark and alignment of options under align heading is overlapping

comment-image

CommentFileSizeAuthor
#16 electra-updated_added_cross_button_and_fix_alignment-2974984-16.patch510 bytesrahulrasgon
#14 chrome.png46.16 KBbandanasharma
#14 firefox.png23.87 KBbandanasharma
#11 after-patch-11.png65.78 KBrahulrasgon
#11 electra-added_cross_button_and_fix_alignment-2974984-11.patch536 bytesrahulrasgon
#5 electra-comment-2974984-4.patch497 bytesbandanasharma
comment.jpg53.78 KBNeetika K

Comments

Neetika K created an issue. See original summary.

Neetika K’s picture

Neetika K commented
Title: When user taps on upload image icon in the comment section,the alignment under Align heading is misaligned. » Comment:Cross button UI and alignment under align is improper
Issue summary: View changes
Neetika K’s picture

Neetika K commented
Issue summary: View changes
bandanasharma’s picture

bandanasharma commented
Issue summary: View changes
bandanasharma’s picture

bandanasharma commented
Status: Active » Needs review
StatusFileSize
new electra-comment-2974984-4.patch497 bytes

Added the patch, please review it.

akash.addweb’s picture

akash.addweb commented

@bandanasharma, Thanks for providing patch, I checked your patch using simplytest.me & found that Your patch didn't work as expected. Can you please do the needful!..

rahulrasgon’s picture

rahulrasgon commented
Status: Needs review » Reviewed & tested by the community

@Ronak.addweb, bandanasharma provided the patch for SCSS file. Simplytest.me will not compile SCSS into CSS file, you have to apply the patch on your local machine and run Gulp or Grunt whatever approach is used in project. I have tested the patch. Works perfectly for me. RTBC + 1.

Neetika K’s picture

Neetika K commented

rahulrasgon : Please provide the screenshot of the visualize effect of patch applied

Neetika K’s picture

Neetika K commented
Status: Reviewed & tested by the community » Needs review
rahulrasgon’s picture

rahulrasgon commented
Assigned: Unassigned » rahulrasgon
rahulrasgon’s picture

rahulrasgon commented
Assigned: rahulrasgon » Unassigned
StatusFileSize
new electra-added_cross_button_and_fix_alignment-2974984-11.patch536 bytes
new after-patch-11.png65.78 KB

I have updated the patch provided by bandanasharma. There were some issues with bandanasharma's patch. It will only fix the alignment of radio button but not of Caption checkbox. Here is the updated patch and screenshot too.

bandanasharma’s picture

bandanasharma commented
Status: Needs review » Reviewed & tested by the community
bandanasharma’s picture

bandanasharma commented
Status: Reviewed & tested by the community » Needs review
bandanasharma’s picture

bandanasharma commented
StatusFileSize
new firefox.png23.87 KB
new chrome.png46.16 KB

@rahulrasgon I have checked caption alignment on Firefox and Chrome, it's working fine to me. See the attached files.
And according drupal standard there should be newline in the end of file.

rahulrasgon’s picture

rahulrasgon commented

@bandanasharma, according to your patch, it will fix only those alignment issues which are the child of .fieldgroup class, and caption checkbox does not comes under the children of any .fieldgroup class.

And sorry for not adding new line at the end of file. Making this in habit and will take care from now onwards.

rahulrasgon’s picture

rahulrasgon commented
StatusFileSize
new electra-updated_added_cross_button_and_fix_alignment-2974984-16.patch510 bytes

Here is the updated patch.

sreenivas bttv’s picture

sreenivas bttv commented
Assigned: Unassigned » sreenivas bttv

@rahulrasgon in #16 mentioned path, CSS related to UI dialog title bar close button code not needed. If facing issue please attach the screenshot.

Removing following code:

.ui-dialog-titlebar {
  .ui-dialog-titlebar-close {
    &:after {
      content: "X";
      display: block;
      font-size: 11px;
      font-weight: bold;
      width: 16px;
    }
  }
}
sreenivas bttv’s picture

sreenivas bttv commented
Assigned: sreenivas bttv » Unassigned
Status: Needs review » Fixed

Committed and pushed to 8.x-1.x branch

  • Sreenivas Bttv committed 4a5dc8b on 8.x-1.x 
    Issue #2974984 by rahulrasgon, bandanasharma, Neetika K, Sreenivas Bttv...
sreenivas bttv’s picture

sreenivas bttv commented
Status: Fixed » Closed (fixed)