I have a black bottom border appearing after installing spiffy UI and I do not know how to get rid of it.

56 views
Skip to first unread message

Lord Silverhammer

unread,
May 3, 2013, 9:55:39 AM5/3/13
to spif...@googlegroups.com
I have integrated SpiifyUI according to the getting started page: http://www.spiffyui.org/?getStarted

Now I have a blank project with nothing in on module load (just to make sure) and when I run it, I get my starter page with a black bar at the bottom.  This appeared after I installed spiffy UI.  
What is it and how to I remove it?  If I put any GWT stuff in, it appears above the border which just moves down the page.

See the attached picture.

SpiffyImage.png

Zack Grossbart

unread,
May 3, 2013, 10:28:45 AM5/3/13
to spif...@googlegroups.com
Hello,

Thanks for trying Spiffy UI. My guess is that's the header bar without any
text in it. Does your project add a MainHeader? If you add items directly
to the page instead of the MainContent DIV they will show up above the
header bar.

You should be able to use Firebug to see what ID that element is using and
that should help you figure out what's adding it.

Good luck,
Zack
--
You received this message because you are subscribed to the Google Groups
"Spiffy UI" group.
To unsubscribe from this group and stop receiving emails from it, send an
email to spiffy-ui+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

Lord Silverhammer

unread,
May 3, 2013, 10:40:36 AM5/3/13
to spif...@googlegroups.com, za...@grossbart.com
I am not using headers or footers of any kind.  This project will be imbedded in another web page I am fairly sure.  I have a div defined which will be my "root" element.  I am not all that familiar with web page development.
I am running chrome, so I guess Ill install firefox to see what that element is.  I did view source but didn't see anything odd.

Bess Siegal

unread,
May 3, 2013, 10:42:43 AM5/3/13
to spif...@googlegroups.com, Zack Grossbart
You can inspect the element with Chrome's developer tools as well.  Once you find the element, you could also just hide it with css by setting it to display:none.

Lord Silverhammer

unread,
May 3, 2013, 10:49:17 AM5/3/13
to spif...@googlegroups.com, za...@grossbart.com
Ok, I installed firefox and it is the mainHeader.  Here is the div stuff:
<div id="loginPanel"></div>
<div id="mainWrap">
<div id="main" class="clearfix">
<div id="mainHeader"></div>
<div class="clear"></div>
</div>
</div>
<div id="mainFooter"></div>

However if I look at my HTML page, none of that is in there.  So how is it getting in and how do I prevent it from being added?

Lord Silverhammer

unread,
May 3, 2013, 11:05:46 AM5/3/13
to spif...@googlegroups.com, Zack Grossbart
How do I do that?  I went into spiffyui.css and added display: none; to the main header thing and that didn't have any effect.

Zack Grossbart

unread,
May 3, 2013, 11:16:53 AM5/3/13
to spif...@googlegroups.com
Take a look in the Index.java file. Most of a GWT application is added by
code in the Java files and won't show up in the HTML.

If you want to add CSS to hide the mainHeader DIV that would look like this:

#mainHeader {
display: none;
}

You can also remove the MainHeader from the Java code.

Spiffy UI is a framework based on GWT which has you write Java code to
generate your web page. I would recommend you find a book on Java
programming and a book on web development to help you navigate the basic
concepts of GWT programming.

Lord Silverhammer

unread,
May 3, 2013, 12:05:28 PM5/3/13
to spif...@googlegroups.com, za...@grossbart.com
Ill try that with the css.  I do not have an index.java.
I started with a normal GWT application and then made the changes via the web site's suggestions.  I did not create a project via the web site and use that.

Anyway, I put that in my projects CSS file, GWT_Spiffy_Test.css, and that did nothing.  I also tried putting it in the spiffyui.css which didn't work either.  At some point that css got remade and that change was lost.

I still have that header showing up.

Zack Grossbart

unread,
May 3, 2013, 12:18:57 PM5/3/13
to spif...@googlegroups.com
I'm not sure how your project is setup, but the source for that CSS file
must be in there somewhere. You might also try using the Spiffy UI project
generator to create a new project so you can see it up and running
correctly.

-Zack

Lord Silverhammer

unread,
May 3, 2013, 2:01:37 PM5/3/13
to spif...@googlegroups.com, za...@grossbart.com
I did create one from the web based application, however when I ran it and entered a user name just to test it, it crashed.  I couldn't figure out why.  I tried it as ant and maven, same thing.  
So I then made a stock GWT project with the sample code, the equivalent to the hello world app and cleared that out.  I then followed the instructions from the http://www.spiffyui.org/?getStarted site to add spiffy to existing projects.  I grabbed the jars, setup the stuff in the web.xml similar to the one made by the web page designer, and all the other changes.

I wrote some basic stuff which worked, only I get that header bar appearing. :(

Lord Silverhammer

unread,
May 3, 2013, 2:28:53 PM5/3/13
to spif...@googlegroups.com, za...@grossbart.com
In case this might help, I am attaching several files which may be relevant if anyone cares to look.  I could do the whole project if someone wants it.  There is a fair number of experimental things I am playing with.
The entry point is the only java file I have attached and it does nothing.
GWT_Spiffy_Test.css
GWT_Spiffy_Test.html
web.xml
GWT_Spiffy_Test.gwt.xml
GWT_Spiffy_Test.java
Reply all
Reply to author
Forward
0 new messages