COMMUNITY FORUM

K2 Add/Edit form doesn't work on mobile devices

Start
Prev
1
Next
End

Pierre Balian
Topic Author
Offline
Junior Member

12 years 7 months ago #62388 by Pierre Balian

K2 Add/Edit form doesn't work on mobile devices was created by Pierre Balian

Hello,

I am building a responsive website for a client,

All and all k2 has been great for this. Out the box it responds very well.
However if you use the frontend add/edit form in the modal window it doesnt work on my android device.

It opens just fine, however it doesnt seem to detect the screen size and open proportionately to that. So you are stuck in the middle of the form. Then if you try to zoom or move the form around nothing happens.

Any ideas on how to fix? Is it posible to load the add edit form into a page and not a modal window?

Please Log in or Create an account to join the conversation.

santosh wilson
Offline
New Member

12 years 6 months ago #62389 by santosh wilson

Replied by santosh wilson on topic Re: K2 Add/Edit form doesn't work on mobile devices

is this issue solved? can any one pls answer to this query?

Please Log in or Create an account to join the conversation.

william white
Offline
Platinum Member

12 years 6 months ago #62390 by william white

Replied by william white on topic Re: K2 Add/Edit form doesn't work on mobile devices

Is it posible to load the add edit form into a page and not a modal window?

Check the old forum - community.getk2.org, there were a lot of posts there about the modal form and i remember one that talked about loading the form in a page instead of a window

Please Log in or Create an account to join the conversation.

tenuki
Offline
New Member

12 years 5 months ago #62391 by tenuki

Replied by tenuki on topic Re: K2 Add/Edit form doesn't work on mobile devices

I've been trying to gain access to the old forums, but I'm extremely interested in solving this issue for my site.
William, did the sollution you remember involve coding or just fiddling with menus? I can't seem to make it work through the menus, though I don't mind modifying the code if I knew what to modify...

Please Log in or Create an account to join the conversation.

william white
Offline
Platinum Member

12 years 5 months ago #62392 by william white

Replied by william white on topic Re: K2 Add/Edit form doesn't work on mobile devices

I have the text from an old post about the modal forms. I will look it up and post it here later today

Please Log in or Create an account to join the conversation.

tenuki
Offline
New Member

12 years 5 months ago - 12 years 5 months ago #62393 by tenuki

Replied by tenuki on topic Re: K2 Add/Edit form doesn't work on mobile devices

I've solved it :)

Actually, searching through google gave me a [url=http://http://blog.pagespot.org/page/item/23-k2-front-end-editor-iframe-adjustment.html]partial sollution[/url].

There are three files which need to be modified:
components/com_k2/templates/user.php
components/com_k2/templates/default/category.php
components/com_k2/templates/default/item.php

Look for the following code, normally quite close to the top of the file.
<a class="modal" rel="{handler:'iframe',size:{x:990,y:650}}" href="***THIS VARIES IN EACH FILE, COPY IT***">

Replace the original code with this.
<a rel="{handler:'iframe',size:{x:window.getSize().scrollSize.x, y: window.getSize().size.y}, onShow:$('sbox-window').setStyles({'padding': 0})}" href="***PASTE HERE WHAT YOU COPIED***">

Now you've got the screen adapted to smaller screens. In the end, I just removed the "modal" popup and allowed for different screen sizes, rather than forcing width and height.

TinyCME works like a charm on Android, but I've read it doesn't iPhone. I'll give it a go tonight. Since Simple Content Editor does work in iphones, I'll see if I can customize it somehow...

Please Log in or Create an account to join the conversation.

william white
Offline
Platinum Member

12 years 5 months ago #62394 by william white

Replied by william white on topic Re: K2 Add/Edit form doesn't work on mobile devices

Thats the code i was thinking of. Actually i think there were 13 or 14 references to the iframe scattered through out the code, so there may be more to fix.

Please Log in or Create an account to join the conversation.

Pierre Balian
Topic Author
Offline
Junior Member

12 years 5 months ago - 12 years 5 months ago #62395 by Pierre Balian

Replied by Pierre Balian on topic Re: K2 Add/Edit form doesn't work on mobile devices

Hmmmm,
I tried with no luck, using latest K2 on J2.5!

My modal code looks the same in two of the template files (user, and category.php)

<a class="modal" rel="{handler:'iframe',size:{x:990,y:550}}" href="<?php echo $this->addLink; ?>">

Which I replaced with

<a class="modal" rel="{handler:'iframe',size:{x:window.getSize().scrollSize.x-80, y: window.getSize().size.y-80}, onShow:$('sbox-window').setStyles({'padding': 0})}" href="<?php echo $this->addLink; ?>">

However the item.php and category_item.php is slightly different

<a class="modal" rel="{handler:'iframe',size:{x:990,y:550}}" href="<?php echo $this->item->editLink; ?>">

Which I replaced with

<a class="modal" rel="{handler:'iframe',size:{x:window.getSize().scrollSize.x-80, y: window.getSize().size.y-80}, onShow:$('sbox-window').setStyles({'padding': 0})}" href="<?php echo $this->item->editLink; ?>">

So now, when I click the edit, or add item links I get the item edit form Full Screen, (not in a modal window at all), which would be fine with me but now when you click the cancel or save buttons it does not close and return you to your page.

Any ideas?
Thanks for your help so far,

Please Log in or Create an account to join the conversation.

Pierre Balian
Topic Author
Offline
Junior Member

12 years 5 months ago #62396 by Pierre Balian

Replied by Pierre Balian on topic Re: K2 Add/Edit form doesn't work on mobile devices

Noticed that the code I used was the code from the link, not tenuki code,

So I tried his out...

//User

//original
<a class="modal" rel="{handler:'iframe',size:{x:990,y:550}}" href="<?php echo $this->addLink; ?>">

//modified
<a rel="{handler:'iframe',size:{x:window.getSize().scrollSize.x, y: window.getSize().size.y}, onShow:$('sbox-window').setStyles({'padding': 0})}" href="<?php echo $this->addLink; ?>"> 

//Category

//Orginal 
<a class="modal" rel="{handler:'iframe',size:{x:990,y:650}}" href="<?php echo $this->addLink; ?>">

//Modified
<a rel="{handler:'iframe',size:{x:window.getSize().scrollSize.x, y: window.getSize().size.y}, onShow:$('sbox-window').setStyles({'padding': 0})}" href="<?php echo $this->addLink; ?>"> 


//Item

//Original
<a class="modal" rel="{handler:'iframe',size:{x:990,y:550}}" href="<?php echo $this->item->editLink; ?>">

//Modified
<a rel="{handler:'iframe',size:{x:window.getSize().scrollSize.x, y: window.getSize().size.y}, onShow:$('sbox-window').setStyles({'padding': 0})}" href="<?php echo $this->item->editLink; ?>"> 


//Category Item

//Original
<a class="modal" rel="{handler:'iframe',size:{x:window.getSize().scrollSize.x-80, y: window.getSize().size.y-80}, onShow:$('sbox-window').setStyles({'padding': 0})}" href="<?php echo $this->item->editLink; ?>">

//Modified
<a rel="{handler:'iframe',size:{x:window.getSize().scrollSize.x, y: window.getSize().size.y}, onShow:$('sbox-window').setStyles({'padding': 0})}" href="<?php echo $this->item->editLink; ?>">

However I get the exact same thing, save button saves but doesnt close the add/edit form. Close button does nothing.

Please Log in or Create an account to join the conversation.

jason
Offline
New Member

12 years 2 months ago - 12 years 2 months ago #62397 by jason

Replied by jason on topic Re: K2 Add/Edit form doesn't work on mobile devices

I changed the above to stop the modal window popping up.

In the template folder the close and edit buttons are in the com_k2/templates/itemform.php file

I changed the link on line 46 <a class="toolbar" href="#" "> to:

<td id="toolbar-cancel" class="button">
<a class="toolbar" href="#" onclick="javascript:history.go(-2)"> <span title="<?php echo JText::_('K2_CANCEL'); ?>" class="icon-32-cancel"></span> <?php echo JText::_('K2_CLOSE'); ?> </a>
</td>

This now enables the window to go back to the previous window.

The only problem now is doesn't refresh the page, does anyone know how to get round this problem?

Jason

Please Log in or Create an account to join the conversation.

Start
Prev
1
Next
End