Listbox styles malfunctioning and div elements failing to appear in a horizontal layout

I am encountering a couple of issues with the code below. Firstly, the CSS styles that I have specified for my two listboxes are not being applied correctly...none of the CSS styles for the listboxes seem to work. Secondly, I am trying to make my two main divs in the panel 'pnlSelAccounts' display side by side, but they are appearing stacked on top of each other instead. The first div should contain the first textbox, label, button, and the two list boxes, while the second div should include the two smaller panels along with their contents. Any assistance with this would be highly appreciated!

<style type="text/css">
    body 
    {
        background-color: #232323;
        font-family: Knowledge Regular;
    }
    legend
    {
        color: #D4D4D4;
    }
    .UpperPanel
    {
        margin-left: 10px;
        margin-right: 10px;
        padding-top: 10px;
    }
    .RightPanel
    {
        margin-right: 10px;
        margin-left: 10px;
        padding-bottom: 10px;
    }
    .ListBox_Default
    {
        color: #D4D4D4;
        background-color: #232323;
        border: solid 2px #000000;
        padding-left: 20px;
        height: 250px;      
        width: 250px;
    }        
    fieldset 
    {
        border: solid 2px #000000;
        width: 100%;
    }        
    .DisplayTextBoxStyle
    {
        color: #00FFFF;
        font-weight:bold;
        background-color:transparent;
        border: 0px solid;
        width: 65%;
    }
    .InputTextBoxStyle
    {
        color: #D4D4D4;
        background-color: #232323;
        border: solid 2px #000000;          
    }     
    .TabStyle .ajax__tab_header
    {
        display: block;
    }
    .TabStyle .ajax__tab_tab
    {
        color: #FF9900;
    }         
    .TabStyle .ajax__tab_header .ajax__tab_outer
    {
        color: #D4D4D4;
        font-family: Knowledge Regular;
        padding-left: 10px;
        margin-right: 3px;
        border:solid 2px #000000;
    }
    .TabStyle .ajax__tab_header .ajax__tab_inner
    {
        border-color: #666;
...

Answer №1

It appears that you are looking for the CSSClass attribute instead of CSSStyle.

At the moment, your output is as follows:

style="ListBox_Default"

Using CSSClass would result in the following output:

class="ListBox_Default"

Answer №2

To tackle the problem of placing the divs next to each other, we successfully implemented 'float: left' and 'float: right' for the left and right divs, respectively.

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

Tips for adjusting the scrollbar in Tailwind (next.js/react)

Having trouble changing the appearance of my scrollbar in a single page application using Tailwind (react/next). I've attempted to create custom CSS for the first div in my index file, like so: <div className="no-scroll"> <<< ...

Utilize the ConfigurationSection and ConfigurationElementCollection classes to generate a hierarchical collection of items within the web.config file

I've been working on setting up a custom section group in my web.config file, and I'm facing an issue that's giving me some trouble. The error message I'm getting reads: Unrecognized element 'add'. (web.config line 736) at ...

Using CSS3 to shift a div in relation to another moving div

Take a look at this JSfiddle. I am trying to make the "Push this!" div move when the menu resizes/expands on hover. Is it possible to achieve this effect using only CSS? <div id="nav"> <ul> <li><a href=""><span>01</spa ...

Assistance needed to make a jQuery carousel automatically rotate infinitely. Having trouble making the carousel loop continuously instead of rewinding

Currently, I am in the process of creating an auto-rotating image carousel using jQuery. My goal is to make the images rotate infinitely instead of rewinding back to the first image once the last one is reached. As a beginner in the world of jQuery, I&apos ...

How can I retrieve the NetworkCredential Object for the current user in C# ASP .NET?

I'm currently working on a scenario that involves implementing the following for an ASP .NET webapp: 1. User logs in 2. I need to download files from a Sharepoint site using the logged-in user's credentials. Here is the environment setup: - The ...

"An interactive webpage utilizing HTML5 that transmits sensor information from an iPhone to a server

Recently, I have been immersed in a project that involves utilizing the gyroscope of an iPhone to manipulate items on a computer screen. To achieve this, I have been using an application called "Sensorlogger" which allows me to stream sensor data to the co ...

Collect input from the user for multiple lists and send them to PHP for additional processing

I'm struggling to find the error in this code... I keep getting "undefined index user_list" as the error message. Essentially, I am trying to allow users to input values into a list and then store that entire list in a database. <?php if(isset($_ ...

Click on the child element while it is already being clicked by manually implementing the 'declick' function in Javascript

Hey there, I'm looking for suggestions on a better title for this issue. I couldn't come up with the right wording myself. Problem I currently have a Google Maps element with pointer events set to none, preventing it from being scrolled when ho ...

Having difficulty creating a simple HTML menu, where one button is visible but the other is unresponsive despite having identical CSS styling

Looking to enhance my HTML skills as a beginner, I've begun building a simple website and am currently focusing on the menu. I created a "home" button (which is visually there but not functional), and then attempted to create another button next to it ...

The html viewport size is altered by the mobile keyboard

One issue that arises when using percentage or viewport unit width and height for the <body> element is that the size of these elements will change when a mobile keyboard is invoked due to an input. I have extensively researched this problem without ...

Update the value of the second dropdown based on the choice made in the first dropdown menu

Within my code, I have defined two drop-down menus as shown below: <label for="select-choice-1" class="select">Customer Product Name</label> <select name="select-choice-1" id="select-choice-1" onchange="selectTransport(this.valu ...

What is the best way to display a JavaScript object array on the screen

As someone who is new to JavaScript, I have a JavaScript object array that I would like to print the values of in the browser. However, I am unsure of how to do this without using document.write(vehicle); var vehicle = [{name:'Van',wheel:4,cha ...

What is the best .scss file to use for updating the site?

Currently in the process of learning SASS and Bootstrap 4, I have set up some .scss partial files and imported them into my site.scss file as required. Making changes to Bootstrap involved modifying my _my-theme.scss file. But now, I'm wondering about ...

Interpolation problem with AngularJS translation service

I've successfully implemented a ternary operator in my HTML: {{ qp.QP_TRANSFERS === '1' ? qp.QP_TRANSFER_TYPE_NAME + ' transfer' : 'No transfer' }} In addition, I am utilizing a translation service with JSON objects. He ...

Is there a way to add a <video> tag in tinymce editor without it being switched to an <img /> tag?

I am attempting to include a <video> tag within the tinymce editor, but it keeps changing it to an <img> tag. Is there a way to prevent this conversion and keep the <video> tag intact? I want to enable videos to play inside tinymce whil ...

Incorporate ng-click as an attribute in AngularJS

Is there a way to include ng-click as an attribute? For example, imagine I want to add ng-click if my <li> has the class someClass: angular.element(root.querySelector('li.someClass').attr({'ng-click': 'someFunc()'}); ...

Is there a way to use a single url in Angular for all routing purposes

My app's main page is accessed through this url: http://localhost:4200/ Every time the user clicks on a next button, a new screen is loaded with a different url pattern, examples of which are shown below: http://localhost:4200/screen/static/text/1/0 ...

Display an image from a Google image search when hovering over a specified data attribute

My goal is to add a code snippet that will assign a class of "hoverme" to a table cell. When a user hovers over that cell, an ajax query will be triggered using the data attribute containing information stored there to perform a Google search. Below is a ...

This error message indicates that the function window.parent.sayhello is not available or defined

I have a JavaScript function that is defined in a JScript.js file, which is located on the masterpage. My goal is to call the sayhello function from this file on the inIframe.aspx page. The inIframe.aspx page is nested within the webform1.aspx page, and th ...

Setting the display property to none continues to impact the positioning of elements

Currently, I am in the process of making my portfolio website responsive by using media queries. For mobile screens, I have successfully implemented a nav select drop down menu. However, when it comes to iPad screens, I want to display a regular menu. To a ...