So I noticed a small issue with the CSS for Alerts being added in the WYSIWYG.
So if I have some content that I wrap in an alert using the style dropdodwn - and that content has a link in it - The link is given some extra spacing.

This is because by default - Bootstrap Alerts find the first child - and adds some spacing - This is used for the "X" close button.
The CSS doing this looks like

.alert>:first-child { margin-left: 1.2em;
    margin-top: auto; }

But since the Alert is being added in the WYSIWYG - and the only thing added is a class for alert - The "X" close button is not there.
So the CSS finds the first child element - in this case it is an href - and adds the padding to it.

My suggestion would be to add this bit of CSS in the wetkit wysiwyg - which will remove that padding - only for alerts added into a body ( a Text with Summary )

.field-type-text-with-summary {
	.alert>:first-child { margin:0; }

Here is a picture of the issue I'm seeing.
Think this is something worth brining in / fixing ?

Screen Shot 2016-02-03 at 3.31.32 PM.png18.54 KBaastrong


aastrong created an issue. See original summary.

sylus’s picture

Priority: Major » Minor

Not sure should be tagged as a major? bringing down to minor.

Fix looks good will test it out and let you know ^_^

aastrong’s picture

haha, i meant to tag as minor, apparently my reading skills are lacking, thanks @sylus

sylus’s picture

Status: Active » Fixed

No worries, i used the following css declaration which should also work:

 * CKEditor
.wysiwyg-editor-body {
  margin: 10px !important;
  height: 400px;
  .alert > :first-child {

Committed thx!

  • sylus committed c887928 on
    Fixed WetKit WYSIWYG for Issue #2662148: CSS issue with Alerts inside of...
aastrong’s picture

Awesome, thanks @sylus

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.