Style LabArchives Widgets with Bootstrap and CSS

Tutorial for how to add Bootstrap and use CSS to style LabAchives widgets

This article is part of a series on how to get started with designing custom LabArchives Widgets. You can find the introduction and links to the other articles in the series here.

Bootstrap

Demonstration of responsive widget based on window width

Adding Bootstrap styling within your widget is especially helpful for creating visually appealing and responsive elements that adjust based on the screen size. The snippet below is added within the HTML editor with Source enabled.

Because the LabArchives parent form calls its own version of jQuery, which does not meet the minimum standards for Bootstrap, I’ve had to load a newer version of jQuery. But, for the widget to work appropriately within the LabArchives environment, control of $() and other jQuery functions have to be returned to the LabArchives version of jQuery, which is achieved with the noConflict function.

CSS Styling

I have also defined some additional CSS rules to further customize the form style. This code should be placed toward the top of the HTML Editor with Source enabled. You can read more about CSS styling here.

In this example, I mainly focus on the styling for tables. Applying Bootstrap CSS overrides some of the LabArchive table styling defaults, which I’ve found actually makes it easier to style tables as I desire. The media query is used to ensure that at smaller screen sizes, tables don’t overflow the page, as I have had issues even when using table-responsive div classes to wrap the table.

@media (max-width: 576px) {
  .xsTableDiv {
    width: 300px !important;
    overflow-x: scroll;
  }
}

I use the fullWidth class for extending the input elements across the entire width of the column that the are within. This helps to standardize the look of the form, as shown in the figure below.

Screenshot showing the aligned inputs by using the fullWidth class

Using Bootstrap to Design Form

In this example, I have included these form elements within a wrapping <div class="container">. This is one of the key classes for accessing Bootstrap styling. Within containers, I have added an additional wrapping <div class="row align-items-end">. This creates a row within the container, and I have specified that items within this row should be aligned at the end. This ensures that, if some of the text in the left-hand column goes on two lines, the input aligns with the end of the label. You can read more about alignment in Bootstrap here.

Rather than repeating the same set of Bootstrap classes for each element that I want to be in the left-hand column, I’ve used my own class myLeftCol and then in the JavaScript for the widget, when setting up the initial state, I include the following line of code to add the classes that I want to each of these <div>s.

//Add classes to add bootstrap styles for left column in form
$('.myLeftCol').addClass("col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 text-right");

This set of classes specifies that for an extra-small window(like a phone screen), myLeftCol elements should take up 12 Bootstrap columns (which is the full screen). When the window is small, myLeftCol takes up 6 Bootstrap columns. The number of Bootstrap columns for medium, large, and extra-large are 4, 3, and 2, respectively.

In addition, I have added the required attribute to the elements that I want the user to fill out before being able to save the widget to the page, and I added the needForTable class to those that I want the user to fill out before being able to save or copy the data in the output table.

To indicate to the user what these different elements are, I use a requiredLab and needForTableLab class to mark the labels for these required fields. Within my addRequiredFieldIndicators method, I specify that a red * should be added before elements of the requiredLab class and a blue # should be added before elements of the needForTableLab class.

My GitHub Repository with Widget Templates

You can find the full code for this template widget and other examples at https://github.com/gibson-amandag/LabArchivesWidgetTemplates.

gibson-amandag/LabArchivesWidgetTemplates