Bootstrap collapsible panel with unique off-center design

I am currently working on customizing a bootstrap collapsible panel that has an off-center indicator arrow. My goal is to center the indicator arrow with CSS. Here's the CSS code I have implemented:

.panel-heading a:after {
    font-family:'Glyphicons Halflings';
    content:"\e114";
    float: right;
    color: grey;
}
.panel-heading a.collapsed:after {
    content:"\e080";
}
<div class="panel panel-default" id="pnlSubmission">

          <div class="panel-heading">
               <h4 class="panel-title" style="text-align:center;">
                   <a data-toggle="collapse" data-target="#collapseFour" href="#Submission" class="collapsed"><h3>Submission<span style="color:#FFCC33">.</span></h3></a>
               </h4>
          </div>

      <div id="collapseFour" class="panel-collapse collapse">
          <!--  <div class="panel-heading"></div> -->
                    <div class="panel-body">
                    <div id="my-tab-content" class="tab-content">
                    <div class="tab-pane active" id="tab1default">
                    <div class="container-fluid">            
            <div id="rootwizard">
                    <ul class="nav nav-tabs" role="tablist" style="margin-bottom:10px;">
          <li><a href="#step1" role="tab" data-toggle="tab">Step One</a></li>
          <li><a href="#step2" role="tab" data-toggle="tab">Step Two</a></li>
          <li><a href="#step3" role="tab" data-toggle="tab">Step Three</a></li>
     </ul>
                    <!-- Content goes here -->
   </div>

   <!-- Additional content for steps -->

   </div>

   </div>
javascriptcsstwitter-bootstrap

Answer №1

It seems that the problem lies in the fact that the width of .panel-heading is set to 100% of its container.

To address this issue, I made adjustments to your CSS by adding an absolute position for the icon.

Check out the demo

.panel-heading a:after {
  position: absolute;
  top: 35px;
  right: 10px;
  font-family: 'Glyphicons Halflings';
  content: "\e114";
  float: right;
  color: grey;
}
.panel-heading a.collapsed:after {
  position: absolute;
  top: 35px;
  right: 10px;
  content: "\e080";
}

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

A Step-by-Step Guide to Implementing Social Logins (Facebook, Google, LinkedIn, and Github) in Angular 6

https://i.sstatic.net/QLDZ6.png Configuration in App.module.ts const config = new AuthServiceConfig( [ {id:GoogleLoginProvider.PROVIDER_ID, provider:new GoogleLoginProvider('358720783918-g6gv4vsabi786qcj0sbvkm2v36totpio.apps.googleusercontent.com&ap ...

javascriptangular

What could be causing my function to fail after pressing the button?

I am new to coding in HTML and JS and attempted to create a button that combines two strings into one when clicked. Can someone please review my code and point out where I may have made an error? <!DOCTYPE html> <html> <body> ...

javascripthtml

What is the best way to add bold formatting to text enclosed in parentheses using javascript/jquery?

How can I use jQuery or JavaScript to make the text inside parentheses bold? For example: "what is your Age (in Year)." I need assistance in making the text within parentheses bold using either jQuery or JavaScript. Can someone help me with this task? ...

javascriptjqueryhtmlstring

Developer server experiencing CSS issues in Django admin interface

Experiencing some odd issues with the Django admin application here. I've got everything up and running on the manage.py runserver development server, but for some reason it looks like this: This obviously isn't what I want, so I'm trying t ...

cssdjangodjango-admin

The challenge with handling matrix arrays in Javascript

In my simplified drag and drop shopping cart project using jqueryui, I am encountering an issue with adding data (id, name, price) to an array. Despite trying various methods to add the data array to the main container, I consistently encounter the error ...

javascriptjqueryarraysjquery-ui

Ember.js alternative for Angular's filter for searching through ng-models

Looking for an easy way to implement a search filter similar to Angular? <input type="text" ng-model="resultFilter" placeholder="Search"> <ul> <li ng-repeat="result in results | filter:resultFilter">{{result.name}}</li> </u ...

javascriptangularjsember.jsember-cli

Exploring the process of retrieving MongoDB documents with methods such as findOne() or find() in Node.js, particularly when the models and schema are contained in a separate file

As someone who is new to node, MongoDB, and coding in general, I'm currently working on a project involving the creation and storage of documents in MongoDB using Mongoose. Initially, all my models and schemas were housed in the app.js file, allowing ...

javascriptnode.jsmongodbmongoosemongoose-schema

Understanding how to set the Content-Type in a Post request using Ajax with Node.js

Attempting to send an ajax request without a header in Node.js triggers an error: { [Error: unsupported content-type] status: 415, statusCode: 415 } However, when sending a request with a header, Node.js does not seem to respond. Here is my ajax funct ...

javascriptajaxnode.js

Best Practices for Utilizing NPM Modules with TypeScript

I am interested in developing an npm module using TypeScript. Can anyone suggest a best practice guide on how to start? Here are my questions: Node.js does not natively support TypeScript, so what is the recommended way to publish an npm module? Shoul ...

javascriptnode.jstypescriptnpmtypescript1.8

Checkbox malfunctioning when trying to add values after being checked

I have successfully completed a calculation system project using JavaScript. Everything works well, the calculations are accurate and taxes are included properly. However, I am facing an issue where the tax is not being included when I click on the checkbo ...

javascripthtmljqueryinnerhtml

Changing a global variable via an AJAX call

I seem to be facing a common issue that many others have encountered. Despite my understanding that global variables can be modified inside functions in Javascript, I am struggling with this concept in practice. var lastMessage = 0; function loadChat() { ...

javascriptjson

Is there a way to keep the background image stationary as I scroll?

As someone who is new to html and CSS, I recently tried to enhance my previous project by incorporating a background image that spans the entire screen size and remains fixed while scrolling up or down. Here is the code snippet: ''' body { ...

htmlcss

"Challenges Encountered When Using Vue.js to Handle Image Paths Containing Variables

I've come across a challenge while trying to create a dynamic image path based on the props passed in Vue.js. Despite my efforts, such as using variables for the images, CSS variables, and moving the images to the src folder (although this caused issu ...

javascriptnode.jsvue.js

Converting a string to JSON format with JavaScript

My string is structured in JSON format like this: "{""c1"": ""value1"", ""c2"": ""value2""}" After storing it in an SQLITE database, I use the following Javascript code to retrieve it back as JSON: var req= "SELECT json_column from my_table"; var re ...

javascriptjsonsqlite

Optimal approach for integrating enum with Angular, Mongoose, and Node.js

When it comes to fetching values from MongoDB and displaying them with AngularJS, the process can be straightforward with Jade but becomes more complex with Angular. Here is how the data flows: An array of items is retrieved from MongoDB, each containin ...

javascriptnode.jsangularjsmongodbenums

When utilizing getServerSideProps, the data is provided without triggering a re-render

Although my approach may not align with SSR, my goal is to render all products when a user visits /products. This works perfectly using a simple products.map(...). I also have a category filter set up where clicking on a checkbox routes to /products?catego ...

javascriptreactjsnext.js

What is the best way to create a div that extends beyond the borders of the screen, but still allows only

I am currently working on a React project for a website. I am creating a category bar that should slide only the component in the mobile version, without moving the entire page. Check out the desired design here However, the current appearance is differe ...

javascripthtmlcssreactjsbootstrap-4

Unable to connect to node.js webserver using the godaddy shared hosting URL

Upon entering www.example.com:3000 into my browser, I am encountering the following error message (where 'example' represents my domain name) This site can't be reached - www.example.com took too long to respond. I have taken the following ...

javascriptnode.jsshared-hosting

Scan for every header tag present and verify the existence of an id attribute within each tag. If the id attribute is absent, insert

Looking to locate all header tags within the content and verify if each tag has an id attribute. If not, then jQuery should be used to add the id attribute. Here is the code snippet: var headings = $("#edited_content").find("h1,h2,h3,h4,h5,h6"); $.each( ...

javascriptjquery

Error in Angular: Trying to access property 'setLng' of a null component variable

Just starting out with Angular and I've come across the error message Cannot read property 'setLng' of null. Can anyone help explain why this is happening? import { Component, OnInit, Input } from '@angular/core'; @Component({ ...

javascriptangular