Win a copy of Svelte and Sapper in Action this week in the JavaScript forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Bear Bibeault
  • Junilu Lacar
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • salvin francis
  • Frits Walraven
Bartenders:
  • Scott Selikoff
  • Piet Souris
  • Carey Brown

jQuery - setting the vertical align property of text in an accordion header

 
Ranch Hand
Posts: 171
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi there,

I want to use jQuery's accordion widget. In my implementation, I want the text in the header sections of the accordion to be vertically aligned in the middle. However, the css property vertical-align seems to have no effect.

I have been using firebug to check that I am adding the vertical-align property to the right class and I am. I have also tried creating a class which will be added only to spans in the headers that contain the text. But that doesn't work either.

I notice that the + and - icons for my headers are vertically aligned in the middle and want to know how they managed this. I see from the css in the jquery-ui-1.7.2.custom.css file that the plus and minus have the following css:


but I understand that the background-position property is just for positioning images.

Please could someone give me some suggestions as to how I can vertically align text in the accordion headers.

Many thanks

Joe

PS. Here is my HTML code and js code:


 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
What you tried to override the class

.ui-accordion .ui-accordion-header a

Eric
 
Joe Lemmer
Ranch Hand
Posts: 171
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi there,

I've fixed the issue now.

In my css, I had set the display property for the ui-accordion-header class to block, like so:



This was because I was using the tag as a header for the accordion as shown in the html above and it didn't seem to display properly without it. It almost looked like tabs. After reading this article, I changed the display property to table-cell and the vertical-align now works. Hurrah!

My css code for the accordion header now looks like:



Cheers

Joe
 
Joe Lemmer
Ranch Hand
Posts: 171
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Eric,

thanks for your reply
 
Don't get me started about those stupid light bulbs.
    Bookmark Topic Watch Topic
  • New Topic