CSS/Styles for Custom Panels

Module Development
1

Hello again,

I have been trying to create a scrolling table for my module (so that the table does not expand to infinity). I have seen mixed methods of adding CSS to wicket projects, however, I have not been able to get it to work within ignition. Is there a certain way of adding custom CSS files to apply to specific panels that I have created? I am not very well-versed in web-development so I may be missing something, but from what I can tell, any CSS I’m adding is being overwritten by ignition’s defaults.

My code so far:

ActivityPanel.html

[code]<?xml version="1.0" encoding="ISO-8859-1" ?>

message
[/code]

ActivityPanel.java

[code]public class ActivityPanel extends Panel {
public ActivityPanel(String id, int antennaID) {
super(id);
this.initComponents(antennaID);
}

private void initComponents(int id) {

	IModel activityList =  new LoadableDetachableModel()
	{
		protected Object load() {
			return LRSManager.getLogsFor(LRSManager.getByID(id));
		}
	};

	WebMarkupContainer listContainer = new WebMarkupContainer("activity-log-container");

	ListView activityLog = new ListView("activity-log", activityList){
		@Override
		protected void populateItem(ListItem item) {
			item.add(new Label("activity-message", item.getDefaultModelObjectAsString()));
		}
	};
	
	listContainer.add(activityLog);
	add(listContainer);
}

}[/code]

ActivityPanel.css

table { width: 100%; border-collapse: collapse; } td { border: 1px solid black; } .scrollingTable { width: 30em; overflow-y: auto; }

The ActivityPanel (whose CSS I’m trying to alter) is contained within a TabbedPanel which I have updating itself (every 30 seconds a heartbeat, or every time a message is sent)

LRSPage.html

[code]<?xml version="1.0" encoding="ISO-8859-1" ?>

Antenna ID:

[tabbed panel will be here] 
  </wicket:extend>
[/code]

LRSPage.java

[code]public class LRSPage extends ConfigPanel{

public LRSPage() {	
	super("LRS.nav.LRSPageTitle");
	this.initComponents();
}

private void initComponents() {
	
	 final Logger logger = LoggerFactory.getLogger(getClass());
	//components for sending messages to antenna
	Form form = new Form("form");
	TextField<String> MESSAGE = new TextField<String>("message", new Model("message"));
	NumberTextField<Integer> ANTENNA_ID = new NumberTextField<Integer>("antenna-name", new Model<Integer>(), Integer.class);
	Button myButton = new Button("submit-button"){
		public void onSubmit(){
			try {
				LRSManager.sendPage(Integer.parseInt(ANTENNA_ID.getValue()), MESSAGE.getValue(), 911);
				} catch (Exception e) {
				logger.error("On submit error: " + e.toString());
			}
		}
	};

	//finally, add them to the page
	form.add(new Component[] { ANTENNA_ID });
	form.add(new Component[] { MESSAGE });
	form.add(new Component[] { myButton });
	this.add(new Component[] { form });
	
	
	//displaying each antenna activity logs
	List<ITab> tabsList = new ArrayList<ITab>();

	for(Integer id: LRSManager.getAllConnectionNames()){
		AbstractTab tab = new AbstractTab(Model.of("Antenna " + id)){
			public WebMarkupContainer getPanel(String panelId) {
				return new 	ActivityPanel(panelId, id);
			}
		};
		
		tabsList.add(tab);
	}

	TabbedPanel activityPanel = new TabbedPanel("tabs", tabsList);
	activityPanel.setOutputMarkupId(true);
	activityPanel.add(new AjaxSelfUpdatingTimerBehavior(Duration.seconds(1)));
	
	add(activityPanel);

}

}[/code]