フォーラム

ホーム » Alloy UI » English

構造的に表示 平面上に表示 ツリー上に表示
スレッド [ 前へ | 次へ ]
toggle
Dave Weitzel
aui-viewport and WYSIWYG images
2012/08/28 13:05
答え

Dave Weitzel

ランク: Regular Member

投稿: 169

参加年月日: 2009/11/18

最近の投稿

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
2012/08/29 8:09
答え

Juan Gonzalez

LIFERAY STAFF

ランク: Liferay Legend

投稿: 1865

参加年月日: 2008/10/28

最近の投稿

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
2012/08/29 9:36
答え

Dave Weitzel

ランク: Regular Member

投稿: 169

参加年月日: 2009/11/18

最近の投稿

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?