Customizing the Default CSS for ASP.NET AJAX Control Toolkit's TabContainer Control

Within my web application, I am utilizing the ASP.NET AJAX TabContainer control. Instead of text, I opted to include images in the headers for each tab. However, I encountered a problem where the images were being cut off due to the default CSS setting the header height to only 13px:

.ajax__tab_xp .ajax__tab_header .ajax__tab_tab 
 {
    height:13px;
    padding:4px;
    margin:0px;
    background:url("tab.gif") repeat-x;
  }

To address this issue, I modified my CSS file and added the following line to override the default height set by TabContainer:

.ajax__tab_xp .ajax__tab_header .ajax__tab_tab 
 {
    height:83px;
    padding:4px;
    margin:0px;
    background:url("tab.gif") repeat-x;
  }

Despite these changes, the tab headers continue to display at the default 13px height. Why is this happening?

If you want to view the default CSS file, you can access it here: Default CSS File

asp.netcssajaxasp.net-ajaxajaxcontroltoolkit

Answer №1

To achieve this, consider utilizing the !important rule in your CSS code:

.custom__container .custom__header .custom__tab {
    width: 50px !important;
}

Also, if you are only modifying a specific property and not others within the same class, there is no need to repeat them.

Answer №2

Finally got it to work after trying various methods, although the exact solution is a bit of a mystery to me...

It seems like I needed to:

  1. Manually include CssClass in ajaxToolkit:TabContainer because setting it through properties wasn't generating properly.

  2. I attempted to override the existing class ajax__tab_xp without success, so I ended up creating my own class called ajax__custom which did the job. Here's how my final CSS looked:

    .ajax__custom .ajax__tab_header .ajax__tab_tab
{
    height: 100px;
}

Hopefully this information proves useful for someone else dealing with similar issues.

Answer №3

Hey Dave,

I recently found myself in a similar situation where I copied Tab CSS and made some modifications. However, when attempting to disable tabs, I encountered some issues with my version. Upon inspecting the generated source code, it appears that TAB generates some JavaScript on the page to handle enable/disable functionality - something I would have opted for jQuery initially if allowed on this project.

To save yourself from unnecessary hassle, consider using !Important to override default CSS instead of delving into JavaScript complexities.

Answer №4

I recently had to make some adjustments to web forms after upgrading to bootstrap, and I suddenly noticed that certain pages were displaying oddly.

Upon examining the generated code, I came across this class:

class="ajax__tab_xp"

After referring to previous responses, I determined that setting the height to 25px should solve the issue:

.ajax__tab_xp .ajax__tab_header .ajax__tab_tab 
{
    height:25px !important;
}

This solution should hopefully work for others as well.

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

Replacing appsettings.json values with values from Azure App settings

I have a collection of appsetting data displayed below. Currently, we are utilizing the Windows App service platform. "MainDomains": { "Domains": [ { "Id": "123456", "Domain": "Techni ...

asp.netazureazure-web-app-service

Preventing caching on an ASPX.net/VB webforms website page: A step-by-step guide

We have an internal website dedicated to device status lookups. When users start a search, the page displays information such as: " Address: Some address Serv Loc: Some Srvloc Device: the device name Upstream Device: Some upstream device " Due ...

asp.netvb.netcachingwebforms

Having trouble displaying a value on my webpage that was retrieved from my controller through an AJAX request

This section of my JSP file is causing some issues: <div class="aimerSection"> <div class="aime"> <form> <input type="hidden" class="adore1" name="aime" value="${post.id}"> <input type="b ...

jqueryajax

Using Ajax to compare the user input with a value stored in an object and then determine the corresponding id of that object

From my API, I receive an array that looks like this: Array [Object, Object, Object, Object, Object] // if stringified [{"id":"0","name":"user1","type":"mf","message":"bonjour user1"}, {"id":"1","name":"user2","type":"ff","message":"hello user2"}, {"id": ...

arraysajaxapiobject

Move Ext.MessageBox.alert() to a new position in the code without altering its current functionality

I am looking for a way to reposition all Ext.MessageBox.alert() messages throughout our application without directly altering the code in our JSP pages. I can, however, include a JavaScript file. Option 1: I have found that I can reposition a message aler ...

javascriptcssjspextjsposition

Holding off on executing a JQuery function until after another JQuery function has completed its task

I have a complex series of functions set up to populate the DOM with movie information. Initially, I make a call to a custom JSON file containing a list of movies, which then triggers calls to the OMDb API for each movie to retrieve specific details. The g ...

jqueryajax

Issues with functionality of the Ajax toolkit in Internet Explorer 10 are causing problems

My website utilizes the Asp.net AjaxToolkit modal popup element, and up until now, it has been working flawlessly on all browsers. However, during a recent test on Internet Explorer 10 (Windows 7 platform), I encountered an unexpected issue. Upon attempti ...

asp.netajaxinternet-explorer

Locate the immediate parent element and assign a class to it using jQuery

CSS: <div class="views-row views-row-10 views-row-even views-row-last"> <div class="sonuc"> <span>text1</span> </div> </div> <div class="views-row views-row-11 views-row-even views-row-last"> ...

javascriptjquerycss

The CSS code for creating a typing effect is not functioning properly

I'm having some trouble with a code snippet I wrote to create a typing effect on hover within a div. Here's the code: .about-panel:hover p { color: white; font-size: 1em; white-space: wrap; overflow: hidden; -webkit-animat ...

htmlcssweb

using http to handle a 404 error

This specific function is designed to fetch data under normal circumstances and to return a value of 0 in the event of a 404 error. function retrieveData(url) { if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); ...

javascripthtmlajaxget

Struggling with tictactoe using php/ajax is becoming quite a challenge

Being a first-year student, I am new to this. Our course project involves creating a tictactoe game using Ajax and PHP for SQL interaction. We started with a client-side tictactoe example in JavaScript, but now we are stuck at the final piece of code. Esse ...

javascriptphpjqueryajax

Enhance your webpage with dynamic styling using third-party CSS animation

Apologies for any similarity to other questions on this topic. I have searched extensively, but any assistance would be greatly appreciated. I am utilizing a new animation library from Animista to animate specific elements on a test website. Animating ele ...

javascriptjqueryhtmlcsscss-animations

Angular: Enhancing user experience with draggable and droppable items in a flexible list

My issue involves drag and drop divs within a list. However, the divs seem to move in an unpredictable manner. They do not go where I intend them to be placed. Here is the TypeScript code: timePeriods = [ '1', '2', '3', ...

htmlcssangulartypescriptdrag-and-drop

Exit PopUp malfunctions and fails to function correctly

Hey everyone, I'm having an issue with my exit PopUp. It was working fine initially, but now it doesn't appear again when I scroll down the site page. Can someone please help me figure out what's going wrong? Sorry for any confusion, and tha ...

phpjqueryhtmlcsspopup

Encoding the JSON data does not result in any output

After researching various methods to ensure proper JSON output, I am uncertain if I am accessing the correct variable in PHP or the success function value for pTitle. Additionally, I am struggling with retrieving other values such as artTitle. There seems ...

phpmysqljsonajax

Executing Selenium tests using the identical user session

As we conduct numerous Selenium tests on our ASP.NET MVC site, the web driver is started in TestInitialize and closed and quit in TestCleanup. This implies that each test requires the login procedure to be executed, even though it would be more efficient i ...

asp.netunit-testingseleniumselenium-webdrivervs-unit-testing-framework

Ways to conceal just a portion of the bootstrap sidebar?

I'm looking to create a sidebar using 'vue-bootstrap' that can be hidden when clicked, but I only want to hide 80% of the width of the sidebar. How can I achieve this effect of partially hiding the sidebar? <b-button v-b-toggle.sidebar-1 ...

javascripthtmlcssvue.jsbootstrap-4

Is there a way in ASP.NET MVC to ensure that a specific method can only be executed by a single thread at a

I have a static method in my ActionResults method that updates shared data from the database. I need to ensure that this static method can only be executed once per request and not again until the previous execution has finished. The static method looks l ...

c#asp.net.netmultithreadingthread-safety

UserControl with file attribute

I am currently developing a WebUserControl and I am looking to incorporate a property that displays a list of xml files in the DesignView, similar to how the ImageUrl property works on an Image Control. Instead of images, this property will accept xml file ...

asp.netuser-controls

As I spun four images along the outer edge of a circular border, one image came to a halt at 90 degrees, revealing its content. Now, I am looking to enlarge that particular

I managed to rotate four images around a circular border and stop one image at every 45-degree angle. However, I am struggling to enlarge the image that stops at 90 degrees on the website while still showing the content of the respective image when it reac ...

javascripthtmlcssbootstrap-5