Can the default Bootstrap classes in the ExtLib application layout control be modified?

I am currently using the responsive Bootstrap theme in combination with the application layout control in extlib, but I have been unable to locate any documentation on whether it is possible to modify the predefined Bootstrap classes.

In the example below, there is a titlebar with tabs that utilizes the default Bootstrap class "nav nav-tabs". However, I would like to use the "nav-pills" class instead of "nav-tabs", but I cannot figure out how to make this change using the source editor. I know I can alter classes using client-side scripts, but I am hoping for a server-side method to achieve this.

<xe:this.configuration>
        <xe:bootstrapResponsiveConfiguration legal="Copyright " placeBar="true" banner="true" fixedNavbar="fixed-bottom" footer="true" invertedNavbar="true" placeBarName="#{javascript:compositeData.Title}" rightColumnLabel="RightColumnLabel" titleBar="true" defaultNavigationPath="/tab1/link1" productLogo="/logo.gif" pageWidth="full">
            <xe:this.titleBarTabs>
                    <xe:pageTreeNode label="page1" page="/page1.xsp"></xe:pageTreeNode>
                    <xe:pageTreeNode label="page2" page="/page2.xsp"></xe:pageTreeNode>
                    <xe:pageTreeNode label="page3" page="/page3.xsp"></xe:pageTreeNode>
            </xe:this.titleBarTabs>
        </xe:bootstrapResponsiveConfiguration>
</xe:this.configuration>

I attempted to add a class like this, but it had no effect on the HTML 

<xe:this.titleBarTabs styleClass="nav nav-pills">
javascriptcssxmltwitter-bootstrapxpages

Answer №1

The specific bootstrap CSS class is defined within the TitleBarTabsRenderer from the com.ibm.xsp.theme.bootstrap plugin. You can review the source code here. This renderer is utilized by the ResponsiveAppLayoutRenderer to display the tabs.

Given the current setup, your best options are either using CSJS as suggested or extending and overriding the TitleBarTabsRenderer and ResponsiveAppLayoutRenderer classes. While not the most straightforward solution, you could consider submitting an SPR/enhancement request for potential improvements in future extlib releases.

Answer №2

After some experimentation, I discovered a neat trick to customize the nav-tabs class from the boostrap theme by defining my own theme structure like this:

<theme extends="Bootstrap3.2.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="platform:/plugin/com.ibm.designer.domino.stylekits/schema/stylekit.xsd" >
<control>
    <name>TabbedPanel</name>
    <property>
        <name>styleClass</name>
        <value>nav nav-pills</value> 
    </property>
</control>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can you toggle the visibility of a text based on the selection of a jQuery radio button?

Is it possible to dynamically enable or disable a field based on the selection of a radio button? Here are the rules: The field should only be active when the "Inactive" radio button is selected Check out the code snippet below for reference: Radio B ...

javascriptjquerywebforms

Retrieve the attributes of a class beyond the mqtt callback limitation

Currently, I am utilizing npm-mqtt to retrieve information from a different mqtt broker. My objective is to add the obtained data to the array property of a specific class/component every time a message is received. However, I'm facing an issue wher ...

javascriptangulartypescriptscopemqtt

Error: The AjaxMethod "Class" is not defined

I have an older asp.net project that utilizes Ajax.AjaxMethod() to invoke server-side code from Javascript. It used to function properly, but now it has suddenly ceased to work. Here is the C# code behind: public partial class Signup : System.Web.UI.Page ...

javascriptasp.netajax

How can I convert a string to an integer in Node.js/JavaScript in terms of cardinality?

Imagine a scenario where a user can input any string such as "1st", "2nd", "third", "fourth", "fifth", "9999th", etc. The goal is to assign an integer value to each of these strings: "1st" -> 0 "2nd" -> 1 "third" -> 2 "fourth" -> 3 "fifth" -&g ...

javascriptnode.jsnpm

Error message "Unexpected token" occurs when attempting to use JSON.parse on an array generated in PHP

My attempt to AJAX a JSON array is hitting a snag - when I utilize JSON.parse, an error pops up: Uncaught SyntaxError: Unexpected token Take a look at my PHP snippet: $infoJson = array('info' => array()); while($row = mysqli_fetch_array($que ...

javascriptphpajaxjson

Complete Form Validation Issue Unresolved by Jquery Validation Plugin

I'm facing an issue with the jQuery validation plugin while attempting to validate a form. Strangely, it only works for one input field. Can anyone suggest a solution? <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.valid ...

javascriptjqueryhtmlcssvalidation

The CSS content spills beyond the edge of the screen

I am facing an issue with aligning my content in the center as it is currently shifting to the right side and going off the screen. Below is the code snippet I am working with: <?php /* Template Name: About Us */ $aboutheading = get_field('abou ...

htmlcsswordpress

Alignment issues with the layout

I am facing an issue with two containers stacked on top of each other. The bottom container is wider than the top one, and both have auto margins set for the left and right sides. I want the top container to be aligned evenly on top of the bottom one. I c ...

htmlcsslayoutcss-float

Vuejs allows objects to trigger the execution of methods through elements

My goal is to utilize a function in order to individually set the content of table cells. In this specific scenario, I aim to enclose the status with the <strong> - Tag (I refrain from modifying the template directly because it is stored within a com ...

javascriptfunctionobjectcallbackvue.js

Switch up primary and secondary color schemes with the Material UI Theme swap

Exploring Material UI themes for React JS is a new venture for me. I am facing a scenario where I need to dynamically change the theme colors (Primary & Secondary) based on a selected type from a dropdown menu. Similar to the color customization options av ...

javascriptreactjsmaterial-ui

"Error: Unable to locate module" encountered during the transition to Webpack 5

I am in the process of upgrading my React application to webpack version 5.72.0 (previously on 4.42.1). As part of this update, I have also upgraded webpack-cli to version 4.9.2, webpack-dev-server to version 4.8.1, and babel to version 7.17.9. However, I ...

javascriptreactjswebpackbackbone.jsbabeljs

Creating an optimized dashboard in Next.js: Expert tips for securing pages with specific roles, seamlessly implementing JWT authentication without any distracting "flickering" effect

Given our current setup: We have a backend ready to use with JWT authentication and a custom Role-Based Access Control system There are 4 private pages specifically for unauthenticated users (login, signup, forgot password, reset password) Around 25 priva ...

javascriptreactjsaxiosnext.jsjwt

Styling Divs Beside Each Other Using CSS

I'm attempting to display the "left" and "right" divs side-by-side in the following example. However, they are not appearing next to each other as expected. Can someone point out my mistake? Thank you. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

htmlcss

Show the cell data when the checkbox next to it is selected

I have a specific table setup and I am trying to display the content of the table cell if its corresponding checkbox is checked upon clicking a button. For example: If Row2 is checked, an alert box should display Row2 Below is my code snippet, Java ...

javascriptjqueryhtmlcss

The v-select menu in Vuetify conceals the text-field input

How can I prevent the menu from covering the input box in Vuetify version 2.3.18? I came across a potential solution here, but it didn't work for me: https://codepen.io/jrast/pen/NwMaZE?editors=1010 I also found an issue on the Vuetify github page t ...

javascriptcssvue.jsvuejs2vuetify.js

Obtain the month, day, or year from a timestamp

Can anyone provide guidance on extracting a specific date format (date, month, day, year) from a timestamp? I am interested in implementing this feature within a view using Backbone JS. ...

javascriptdatedate-format

Bootstrap datetimepicker is not showing the calendar for selecting a date, making it impossible to choose a specific date

I am facing an issue with integrating the bootstrap datetimepicker with Datatables to filter the data based on selected dates. The problem is that only an input bar is displayed on the page, and there is no calendar or calendar symbol visible. I suspect it ...

javascripthtmldatatablesbootstrap-datetimepicker

Combining two elements in Angular 2

I am looking to find the intersection of two objects. My goal is to compare these objects and if they have matching values on corresponding keys, then I want to add them to a new object. obj1 = { "Projects": [ "test" ], "Companies": [ "facebook", "google ...

javascriptangulartypescript

Troubleshooting Bootstrap bug caused by rollupPluginBabelHelpers

I am currently working on a Bootstrap 4 website. I noticed that in Internet Explorer, the modal works fine when opened for the first time, but then displays an error in the console and does not open when trying to do so a second time on the same window. On ...

javascriptbootstrap-4frontendrollupjs

Adjusting the size of an image based on the size of the window

I'm currently working on my first website project. I have successfully implemented a large image banner, however, I am facing an issue with setting its height. Whenever I try to adjust the height using percentage values, the banner disappears. My goal ...

htmlcssimage