Tag, Description, edit field textareas need css class

Reported by chovynz on 2011-02-23
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Jakub Jankiewicz
Jakub Jankiewicz

Bug Description

Only when you are logged in.
When you click on any editable field, the edit in place text area that appears is too small. It's quite difficult to edit blocks of text, in an area so small. Bassel mentioned something about css styling it. So, I had a look.

I would like the textarea in dd class="viewtags" to be of class edit-tags

edit-tags {
  min-height: 100px;
  width: 500px;

The problem I'm having is that where I would normally do this with css, is hidden inside a couple of layers which I don't know how to navigate, and don't have the time to explore. The place to apply the class is inside some javascript or inside the database, which gets applied on the <edit> in place. I've had a look at the javascript but that is a generic javascript for all edit in place fields.

I do not want to style all edits, just this one only, for editing tags. Please help.

Complete script taken from detail page, rendered html source, via Firebug testing environment.

<dd id="viewtags"><span>
<script type="text/javascript">$(function () { $(".editready_2751upload_tags").live("click", function () {var htmldata = $(this).html();$(this).html('&lt;textarea&gt;' + htmldata + '&lt;/textarea&gt;&lt;br /&gt;&lt;button id="button_2751upload_tags"&gt;Save&lt;/button&gt; &lt;button id="cancel_2751upload_tags"&gt;Cancel&lt;/button&gt;');$(this).removeClass('editready_2751upload_tags');$(this).addClass('editdone_2751upload_tags');});$("#cancel_2751upload_tags").live("click", function () {var originaldata = $("#2751upload_tags textarea").text();$("div #2751upload_tags").removeClass('editdone_2751upload_tags');$("div #2751upload_tags").addClass('editready_2751upload_tags');$("div #2751upload_tags").html(originaldata);});$("#button_2751upload_tags").live("click", function () {var htmldata = $("#2751upload_tags textarea").val();var originaldata = $("#2751upload_tags textarea").text();if (htmldata != originaldata){$.post("?noheaders=true&amp;nogui=true&amp;widget=0", { edit_form: "ok", record_id: 2751, upload_tags: htmldata, form_id: "25" }, function(data){$("div #2751upload_tags").removeClass('editdone_2751upload_tags');$("div #2751upload_tags").addClass('editready_2751upload_tags');$("div #2751upload_tags").html(htmldata);});}});});</script>

<div class="editdone_2751upload_tags" id="2751upload_tags">
<textarea style="width: 500px; min-height: 100px;">history,historical,boat,ship,viking,sail,sailing,denmark,transport,transportation,sea_transport</textarea><br><button id="button_2751upload_tags">Save</button> <button id="cancel_2751upload_tags">Cancel</button></div>

chovynz (chovynz) on 2011-02-23
Changed in openclipart:
milestone: none → 3.0
assignee: nobody → openclipart.devel (openclipart.devel)
importance: Undecided → High
description: updated
chovynz (chovynz) wrote :

Actually I would like this class also applied to description please.

chovynz (chovynz) on 2011-02-23
summary: - edit field textareas need css class
+ Tag, Description, edit field textareas need css class
rejon (rejon) on 2011-04-09
Changed in openclipart:
assignee: openclipart.devel (openclipart.devel) → rejon (rejon)
status: New → Confirmed
rejon (rejon) on 2011-05-09
Changed in openclipart:
milestone: 3.0 → 3.1
rejon (rejon) wrote :

this is an aiki bug that may or may not be repaired. need advice on and then analysis for fix in aiki...then will get for free in update to aiki latest

Changed in aikiframework:
importance: Undecided → High
assignee: nobody → Christopher Adams (christopheradams)
milestone: none → 0.9
status: New → Incomplete

I don't understand this bug. Please give a minimal example that can be applied against a clean Aiki install that will demonstrate this problem.

Changed in aikiframework:
importance: High → Undecided
rejon (rejon) wrote :

The task is to check where the edit in place javascript is at in aiki, and make sure there is proper css class for it. The side effects are all from lack of proper class and/or id and bad default styling.

We all know it, your mouse doesn't change to a cursor, and ther eis no default hover. When you click editinplace, a textarea open up with ugly save and cancel buttons which are ajax-based.

rejon (rejon) wrote :

so the real thing is fix aiki, then all updated aiki sites will get the fix.

So, Aiki's method for doing in-place edits to a single field is documented here: http://www.aikiframework.org/wiki/Aikimarkup#Database_markup

OCAL uses this method heavily on each clip art detail page. I think the text areas should be easy enough to style if you reference them in the flow of the document, but classes & ids that aiki tacks onto the fields, while descriptive (and probably necessary for whatever aiki js is controlling them), definitely don't help.

I agree that aiki's source is the place to look to fix this issue. Here's an example of the id & class put on one of the description tags of an uploaded clip art: id="135571upload_description" class="editdone_135571upload_description".

Maybe, on the classes, these terms could simply be broken up into individual class declarations & a more generic class could be applied specifically for css styling?

Jakub Jankiewicz (jcubic) wrote :

I added styling to Description and Edit Tags for textarea, buttons and div hover effect (I believe that hover will not work in IE)

I simply use this css

dd#viewtags button {


dd#viewtags div {


rejon (rejon) wrote :

jcubic, did you commit this code?

Changed in aikiframework:
assignee: Christopher Adams (christopheradams) → Jakub Jankiewicz (jcubic)
importance: Undecided → High
status: Incomplete → Confirmed
Jakub Jankiewicz (jcubic) wrote :

rejon, It's not in AIKI it's in OCAL.

Jakub Jankiewicz (jcubic) wrote :

In AIKI this can be easy fixed by removing primary key id from class and use id in javascript

<div id="158845upload_name" class="editready_158845upload_name">

is should be
<div id="158845upload_name" class="editready_upload_name">...</div>

and in JavaScript

$(".editready_158845upload_name").live("click", function() { ... });

it should be
$("#158845upload_name").live("click", function() { ... });

Changed in openclipart:
assignee: rejon (rejon) → Jakub Jankiewicz (jcubic)
status: Confirmed → Fix Released


On Sat, Oct 8, 2011 at 7:35 PM, Jakub Jankiewicz
<email address hidden> wrote:
> rejon, It's not in AIKI it's in OCAL.
> --
> You received this bug notification because you are a member of
> openclipart.devel, which is subscribed to openclipart.
> https://bugs.launchpad.net/bugs/723901
> Title:
>  Tag, Description, edit field textareas need css class
> To manage notifications about this bug go to:
> https://bugs.launchpad.net/aikiframework/+bug/723901/+subscriptions

Jon Phillips
http://rejon.org/ | http://fabricatorz.com/
chat/skype: kidproto | irc: rejon
+1.415.830.3884 (global) | +1-510-499-0894 (sf)
+86-187-1003-9974 (beijing)

rejon (rejon) on 2012-02-04
Changed in aikiframework:
milestone: 0.9.0 → 0.9.1
To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Duplicates of this bug

Other bug subscribers