artisteer design break

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
4/7/2010 11:16:27 AM
Gravatar
Total Posts 16

artisteer design break

Hi

First off all thank you for a great product !.


I ran into a problem when using mojoPortal and artisteer,
i would like to ask the the community for help.

I use mojoPortal v. 2.3.4.1 together with aristeer v. 2.4
my DB is mssql, os win7, and vs2008sp1

i Found that that the Shared File Module is breaking design
in MSIE browsers when added to a page (testet msie7 and msie8)
I have not testet other modules.


I beleive artisteer uses CSS display: table for div's,
but in the artisteer script all msie browsers is (instead of)
added a table, a row, and a cell to the dom.
maybe this is done by artisteer because msie < 8 do not
fully support display: table on div's ?


For ie8 i tweaked the artisteer script to avoid the dom insert
of table, row and cell, and it worked fine again in msie 8.


I see two of mojoPortals included skins for artisteer do not show the design break,
(swirly and green lagoon) maybe because the 'div class="art-content-layout-row"'
is not included in theese skins, and the artisteer script checks if a div
with this class is found, and if not found it do not add the table, row and
cell to the dom for msie ?

Is there some css or some script i can add to mojoPortal, when using artisteer,
to avoid the design break in msie.

Appart from my own simple msie8 atisteer script tweak, i believe visitors who use
msie < 8, will see the design break.

 

Thanks in advance

Best regards
Peter

4/7/2010 12:20:48 PM
Gravatar
Total Posts 18439

Re: artisteer design break

Hi Peter,

I see what you mean, I had not noticed this before.

The reason those 2 skins don't have the problem is because they are for Artisteer 2.3 not Artisteer 2.4

I would be interested to know the script solution. Though it seems strange that it only happens on a page with the Shared Files, if we could figure out why that is true then perhaps a better solution can be found rather than editing the script.

Best,

Joe

4/8/2010 2:28:16 AM
Gravatar
Total Posts 16

Re: artisteer design break

Hi Joe

Thanks for the answer

in the function artLayoutIESetup() in the artisteer script,
it looks like table,row and cell is inserted into the dom.


in the section

if (!c || !c.length) continue;
var table = document.createElement("table");
table.className = l.className;

var row = table.insertRow(-1);
table.className = l.className;

it looks like the row is not assigned a className
the last line table.className =, looks like not needed.
experimented with a className for the row, to get the
Shared File Module to behave, all with out luck.

 

in the section

for (var j = 0; j < c.length; j++) {
var cell = row.insertCell(-1);

var s = c[j];

cell.className = s.className;

i added
cell.innerHTML = "table: " + table.className + " cell: " + cell.className;

just to see all the places where the table,row,cell is inserted in the dom / design.

 


I would rather like not to have artLayoutIESetup() invoked at all, and do needed
"quirks" by css. Also for my personal use of mojoPortal, i will not need any support
for visitors with msie < 7.


i tried "disabling" artLayoutIESetup(), and testet ie7, and ie8 all looks fine,
except a litle missing height in input tags / buttons on ie7, which i think a css
entry can correct. The Shared File Module also looks fine.

I dont know if i'm going the wrong way on this, also as i cant oversee the artisteer script,
and posible effects of "disabling" the function artLayoutIESetup()


Best regards

Peter

4/8/2010 6:32:42 AM
Gravatar
Total Posts 16

Re: artisteer design break

Hi Joe

 

Please disregard my previus post, as i looked closer, there would be need for more than a litte css to make it work.

instead in the artisteerscript i changed the while loop in the function

while (s.firstChild) {
if (s.firstChild.id != 'ctl01_mainContent_ctl00_progressBar_NeatUpload_dummyspan') 
{
cell.appendChild(s.firstChild);
}
else {break; }
}
 

maybe i will change the conditon to look for tag rather than the id,

Or better yet if you have another solution.

best regards

Peter

4/8/2010 6:43:50 AM
Gravatar
Total Posts 18439

Re: artisteer design break

Hi Peter,

I think you just gave me a clue to solve the problem since it seems you have identified the part of the markup that is getting messed up by Artisteer.

I think there must be a way to fix this by changing some of the markup in Shared Files feature, I will experiment today and try to find a solution. We have "almost" the same markup in the Administration > File Manager > Alternate File manager, and the problem does not happen there, so I will try to make the Shared Files markup more similar to the File Manager.

Best,

Joe

4/8/2010 7:19:23 AM
Gravatar
Total Posts 18439

Re: artisteer design break

Hi Peter,

I was able to solve the problem by wrapping the NeatUpload inside a table like this inside SharedFilesModule.ascx:

<table class="fileupload" cellspacing="1" width="99%">
                    <tr>
                        <td class="fileupload">
                            <asp:Panel ID="pnlUpload" runat="server" DefaultButton="btnUpload" CssClass="settingrow uploadpanel">
                                <NeatUpload:MultiFile ID="multiFile" runat="server" UseFlashIfAvailable="true">
                                    <portal:mojoButton ID="btnAddFile" Enabled="true" runat="server" />
                                </NeatUpload:MultiFile>
                                <portal:mojoButton ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
                            </asp:Panel>
                        </td>
                    </tr>
                    <tr>
                        <td class="fileupload">
                            <NeatUpload:ProgressBar ID="progressBar" runat="server">
                                <mp:SiteLabel ID="progresBarLabel" runat="server" ConfigKey="CheckProgressText" />
                            </NeatUpload:ProgressBar>
                            <GreyBoxUpload:GreyBoxProgressBar ID="gbProgressBar" runat="server" GreyBoxRoot="~/ClientScript/greybox">
                                <mp:SiteLabel ID="SiteLabel1" runat="server" ConfigKey="CheckProgressText"></mp:SiteLabel>
                            </GreyBoxUpload:GreyBoxProgressBar>
                        </td>
                    </tr>
                </table>

With this solution, no changes are needed in the script.

Thanks for your help in diagnosing this problem.

Best,

Joe

4/8/2010 8:47:51 AM
Gravatar
Total Posts 16

Re: artisteer design break

Hi Joe

 

Thank you !

implemented your markup into the usercontrol.

 

Best regards

Peter

You must sign in to post in the forums. This thread is closed to new posts.