Foren

Home » Alloy UI » English

Kombinierte Ansicht Flache Ansicht Baumansicht
Threads [ Zurück | Nächste ]
toggle
Dave Weitzel
aui-viewport and WYSIWYG images
28. August 2012 13:05
Antwort

Dave Weitzel

Rang: Regular Member

Nachrichten: 203

Eintrittsdatum: 18. November 2009

Neue Beiträge

has anyone cracked the incompatibility between the responsive design ideas and how to handle images added into content (talking journal articles not forums/wikis at the moment) ?

When you add an image the WYSIWYG seems to add full set of styles for instance:
style="width: 30px; height: 29px; margin-left: 10px; margin-right: 10px; float: left;"


By setting element level styles you cannot AFAIK change them through styles such as
.aui-view-lt480 img {
max-width: 50%;
}

or even

.aui-view-lt480 img {
width: 15px; height 14.5px;
}

Is there a way to overwrite element styles or switch off this capability of WYSIWYG? (will help with new content not existing stuff)
Juan Gonzalez
RE: aui-viewport and WYSIWYG images
29. August 2012 08:09
Antwort

Juan Gonzalez

LIFERAY STAFF

Rang: Liferay Legend

Nachrichten: 2892

Eintrittsdatum: 28. Oktober 2008

Neue Beiträge

Dave Weitzel:
has anyone cracked the incompatibility between the responsive design ideas and how to handle images added into content (talking journal articles not forums/wikis at the moment) ?

When you add an image the WYSIWYG seems to add full set of styles for instance:
style="width: 30px; height: 29px; margin-left: 10px; margin-right: 10px; float: left;"


By setting element level styles you cannot AFAIK change them through styles such as
.aui-view-lt480 img {
max-width: 50%;
}

or even

.aui-view-lt480 img {
width: 15px; height 14.5px;
}

Is there a way to overwrite element styles or switch off this capability of WYSIWYG? (will help with new content not existing stuff)


What about adding !important to css classes?
Dave Weitzel
RE: aui-viewport and WYSIWYG images
29. August 2012 09:36
Antwort

Dave Weitzel

Rang: Regular Member

Nachrichten: 203

Eintrittsdatum: 18. November 2009

Neue Beiträge

Juan Gonzalez P:
Dave Weitzel:
has anyone cracked the incompatibility between the responsive design ideas and how to handle images added into content (talking journal articles not forums/wikis at the moment) ?

When you add an image the WYSIWYG seems to add full set of styles for instance:
style="width: 30px; height: 29px; margin-left: 10px; margin-right: 10px; float: left;"


By setting element level styles you cannot AFAIK change them through styles such as
.aui-view-lt480 img {
max-width: 50%;
}

or even

.aui-view-lt480 img {
width: 15px; height 14.5px;
}

Is there a way to overwrite element styles or switch off this capability of WYSIWYG? (will help with new content not existing stuff)


What about adding !important to css classes?


I've found now found that capability - thanks - but it still leaves a problem in resizing as width styles refer to the containing elements not the initial width of the element you are adjusting. It would also be better to only specify one dimension so scaling will be more automatic.

As you do not know the initial dimanesions of say journal content images I just want them to free form scale by the browser and so turn off the fixed width and height style in the element itself.
I don't think 'width:auto !important;' will work as it will hen fill the width potentially getting larger. and without knowing n advance the images to be used cannot put a max-width in.

Any chance the WYSIWYG can be changed to not put these elements in unless the user sets them?