# CSS/Styles for Custom Panels

**URL:** <https://forum.inductiveautomation.com/t/css-styles-for-custom-panels/12653>\
**Category:** Module Development\
**Created:** [February 7, 2017, 9:09pm UTC](https://forum.inductiveautomation.com/t/css-styles-for-custom-panels/12653 "2017-02-07T21:09:29Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![caitlinf](https://avatars.discourse-cdn.com/v4/letter/c/c68b51/32.png) [@caitlinf](https://forum.inductiveautomation.com/u/caitlinf)\
**Post date:** [February 7, 2017, 9:09pm UTC](https://forum.inductiveautomation.com/t/css-styles-for-custom-panels/12653/1 "2017-02-07T21:09:29Z")

</div>

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]