Results 1 to 4 of 4

Thread: adjust width title with icon in bootstrap accordion

  1. #1
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    914
    Thanks
    118
    Thanked 2 Times in 2 Posts

    Default adjust width title with icon in bootstrap accordion

    When the title of the accordion in Bootstrap is very long, it comes very close to the icon on the right. I would like to add some space in between the icon and the title.

    This is the css code:
    Code:
    .card-header a {
    padding: 15px 20px;
    display: block;
    position: relative;
    color: #5d5d5d;
    }
    
    .card-body {
     color: #777;
     font-family: 'Raleway', sans-serif;
     line-height: 26px;
    }
    
    .card-header a:hover {
     background-color: #ff4d1c;
     color: #fff;
     border-radius: 2px;
     text-decoration: none;
     }
    
    .card-header.active a {
     color: #ff4d1c;
    }
    
    .card-header.active a:hover {
     color: #fff;
    }
    
    .card-header.active a:after {
     content: '\ef9a';
     color: #ff4d1c;
    }
    
    .card-header a:after {
     content: '\efc2';
     font-family: 'IcoFont';
     font-size: 14px;
     position: absolute;
     right: 15px;
     top: 16px;
     color: #ff4d1c;
    }
    
    .card-header.active a:hover:after,
    .card-header a:hover:after {
     color: #fff
    }
    And this is the html:

    Code:
    <div class="card-header" role="tab" id="faq1"><a data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">here comes the long text</a></div>
    I added padding and margin to the a:after, but that doesn't do the trick. What should I add so that, when the text comes close to the icon on the right, it continues on the next line?

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,322
    Thanks
    1
    Thanked 241 Times in 236 Posts

    Default

    Hi there chechu,


    try changing this...

    Code:
    
    .card-header a {
        padding: 15px 20px;
        display: block;
        position: relative;
        color: #5d5d5d;
    }
    ...to this...

    Code:
    
    .card-header a {
        padding: 15px 40px 15px 20px; /* adjust the 40px to suit */
        display: block;
        position: relative;
        color: #5d5d5d;
    }

    coothead
    ~ the original bald headed old fart ~

  3. The Following User Says Thank You to coothead For This Useful Post:

    chechu (06-16-2019)

  4. #3
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    914
    Thanks
    118
    Thanked 2 Times in 2 Posts

  5. #4
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,322
    Thanks
    1
    Thanked 241 Times in 236 Posts

    Default


    No problem, you're very welcome.

    coothead
    ~ the original bald headed old fart ~

Similar Threads

  1. Script that makes an iframe's height and width adjust to its content
    By Labra in forum Looking for such a script or service
    Replies: 6
    Last Post: 01-15-2016, 11:58 AM
  2. Conveyor Belt Slideshow - how to adjust height and width of photos, et al
    By Chipster in forum Dynamic Drive scripts help
    Replies: 12
    Last Post: 02-13-2014, 08:57 PM
  3. Adjust width but it makes no difference
    By annasue in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 07-28-2010, 03:16 PM
  4. How do I adjust the width of the pausing RSS Scroller
    By leematthews in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 09-14-2007, 07:14 PM
  5. icon for the browser title
    By emanuelle in forum HTML
    Replies: 1
    Last Post: 03-23-2007, 08:23 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •