With CSS I provided, were you able to view your tab controls position
changing any bit?
Though you don't need any kind of animation here; Translate might be
helpful. Something like below in 'div.tabpanel div.tab-row' (in CSS)?
Here is one for chrome: -webkit-transform: translate(Xpx,Ypx); You will
have to make sure the div element has display:block set.
On Mon, Jun 9, 2014 at 1:51 PM, Tim Collins <tcoll...@greatergood.com>
wrote:
> Hmmm.... That did not work.
>
> To be clear, this is what the code looks like :
>
> package com.charityusa.janus.page.home;
>
> import com.charityusa.config.AppConfig;
> import com.charityusa.janus.panel.footer.Footer;
> import com.charityusa.janus.panel.vendor.CoolibarUpload;
> import com.charityusa.janus.panel.vendor.KettlerUpload;
> import com.charityusa.janus.panel.vendor.OWPUpload;
> import com.charityusa.janus.panel.vendor.PetEdgeUpload;
> import com.charityusa.janus.panel.vendor.StriderUpload;
> import com.charityusa.janus.panel.vendor.TimTestUpload;
> import org.apache.wicket.extensions.ajax.markup.html.tabs.AjaxTabbedPanel;
> import org.apache.wicket.extensions.markup.html.tabs.AbstractTab;
> import org.apache.wicket.extensions.markup.html.tabs.ITab;
> import org.apache.wicket.markup.head.CssUrlReferenceHeaderItem;
> import org.apache.wicket.markup.head.IHeaderResponse;
> import org.apache.wicket.markup.html.WebPage;
> import org.apache.wicket.markup.html.panel.Panel;
> import org.apache.wicket.model.Model;
> import org.apache.wicket.request.mapper.parameter.PageParameters;
> import org.apache.wicket.spring.injection.annot.SpringBean;
>
> import java.util.ArrayList;
> import java.util.List;
>
> /**
> * The home page class.
> */
> public class HomePage extends WebPage {
>
> // For serialization.
> private static final long serialVersionUID = 1L;
> @SpringBean
> private AppConfig appConfig;
>
> /**
> * Constructor with page parameters.
> *
> * @param pageParameters PageParameters
> */
> public HomePage(final PageParameters pageParameters) {
>
> super(pageParameters);
> final List<ITab> tabs = new ArrayList<>();
>
> tabs.add(new AbstractTab(new Model<>("Coolibar")) {
> @Override
> public Panel getPanel(final String panelId) {
> return new CoolibarUpload(panelId);
> }
> });
>
> tabs.add(new AbstractTab(new Model<>("Kettler")) {
> @Override
> public Panel getPanel(final String panelId) {
> return new KettlerUpload(panelId);
> }
> });
> add(new AjaxTabbedPanel<>("tabs", tabs));
> add(new Footer("footer"));
> }
>
> public void renderHead(final IHeaderResponse response) {
> if ("development".equals(this.appConfig.getType())) {
> // dev watermark added into the header via a css include
> response.render(new CssUrlReferenceHeaderItem("css/dev.css",
> null, null));
> }
> response.render(new CssUrlReferenceHeaderItem("css/janus.css",
> null, null));
> }
>
> }
>
> <!DOCTYPE html>
> <html xmlns:wicket="http://www.w3.org/1999/xhtml";>
> <head>
> <title>Janus Inventory File Upload Service</title>
> <link rel="shortcut icon" href="images/favicon.ico"
> type="image/vnd.microsoft.icon" />
> </head>
>
> <body>
>
> <div class="content">
> <div class="pageTitle"><img src="images/janus.png" height="120"
> width="120"/><br/>Janus Inventory File Upload
> Service
> </div>
> <ul style="list-style-type: none">
> <li><a href="network_auth_logout">Sign Out</a></li>
> </ul>
>
> <hr/>
> <div wicket:id="tabs" class="tabpanel">[tabbed panel will be
> here]</div>
> <br/>
> </div>
>
> <div style="clear:both;"></div>
>
> <div class="footer">
> <div wicket:id="footer">Our Footer Here</div>
> </div>
> </body>
>
> </html>
>
> (I removed a couple tabs from the Java code since they are just linear
> additions to the code and two ought to be enough to get the pattern).
>
> What that would show is a tab structure like this :
> Coolibar Kettler
> [Stuff in tab that changes based on which tab is shown]
>
> And I want a tab structure like this :
> Coolibar [Stuff in tab that changes based on which tab is shown]
> Kettler
>
>
>
> On 6/9/14, 8:47 AM, Mihir Chhaya wrote:
>
>> Tim,
>>
>> Do you need to show only titles in vertical or tabs in vertical with title
>> displayed horizontally? You can do that with CSS itself as below.
>>
>> div.tabpanel div.tab-row {
>> float: left;
>> background: #F2F9FC url("../images/tabs/bg.gif") repeat-x bottom;
>> line-height: normal;
>> /*-webkit-transform:rotate(270deg);*/ /* Use different element and values
>> for IE, Firefox etc...*/
>> }
>>
>> div.tabpanel div.tab-row ul {
>> margin: 0;
>> padding: 10px 10px 0;
>> list-style: none;
>> }
>>
>> div.tabpanel div.tab-row li {
>> background: url("../images/tabs/left.gif") no-repeat left top;
>> margin: 0;
>> padding: 0 0 0 9px;
>> }
>>
>> Un-commenting transform part in first will yield vertical titles with
>> horizontal tabs.
>>
>> -Mihir.
>>
>>
>>
>>
>>
>> On Mon, Jun 9, 2014 at 10:34 AM, Tim Collins <tcoll...@greatergood.com>
>> wrote:
>>
>> I am rather new to wicket and am trying to do something that ought to be
>>> rather easy... I want to make the tabs I display show up vertically
>>> rather
>>> than horizontally.
>>>
>>> I am currently building a arraylist of tabs and then passing them to
>>> AjaxTabbedPanel, but as far as I can see there is no way to make the
>>> resulting tabs on a page show up down the left side of a page rather than
>>> across the top... Is there an easy way to do that?
>>>
>>> ---------------------------------------------------------------------
>>> To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
>>> For additional commands, e-mail: users-h...@wicket.apache.org
>>>
>>>
>>>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
> For additional commands, e-mail: users-h...@wicket.apache.org
>
>
