Button issue in admin screens


Author Message
Matt

Posted: 2/19/2010
Quote message 

Hi,

I have an issue with creating filefield content as the styling for the buttons that artisteer creates mean the progress upload bar does not appear - see following generated HTML:

 <span class="art-button-wrapper"> <span class="l"></span> <span class="r"></span> <input type="submit" class="form-submit art-button ahah-processed progress-disabled" value="Upload" id="edit-field-training-audio-3-filefield-upload" name="op" disabled=""> <div id="ahah-progress-edit-field-training-audio-3-filefield-upload" class="progress ahah-progress ahah-progress-bar" style="display: block;"> <div class="bar"> <div class="filled"> </div></div><div class="percentage"></div><div class="message">Starting upload...</div></div></span>


I suppose I either need to somehow turn off the button styling, or change the CSS so it displays, but the problem is I've tried changing the CSS and the structure of the HTML means it is impossible to get it to display because of how the progress upload bar is a child of the span class for the button.

So I'm stumped. Can anyone help?
 
kiki34

Posted: 4/20/2010
Quote message 

:-( same problem here ... this is critical for my site, and the missing progress bar is really bad.

Can the Artisteer help here? Work around is very welcome?
 
Dan

Posted: 10/21/2010
Quote message 

Is there a solution to this? Please help this is a big deal. We need the upload progress bar to work with themes.
 
Alex

Posted: 10/28/2010
Quote message 

You may sucrifice the active image of the button when clicked to get this working by supplying some css overides for the filefield buttons on you theme`s style.css like the following:

.filefield-element div.ahah-progress-bar {
position: absolute;
margin-left: -263px;
margin-top: 50px;
width: 39em;
}

.filefield-element .widget-edit {
padding-bottom: 37.5px;
}

.filefield-upload .art-button-wrapper {
height: 21px;
overflow: visible;
}

.filefield-upload .art-button-wrapper .l, .filefield-upload .art-button-wrapper .r {
height: 29px;
}

.filefield-upload .art-button-wrapper.hover .l, .filefield-upload .art-button-wrapper.hover .r {
top: 0px;
}

.filefield-upload .art-button-wrapper.active .l, .filefield-upload .art-button-wrapper.active .r {
top: 0px;
}

Notice that the heights of the buttons as stated on the css snipet are variable depending on you custom theme but feel free to change the around until you get your desired effect.

The main thing here is that i made the positing of the progress bar from relative to absolute while overiding the overflow from hidden to visible just for the filefield upload button.