Cross-browser Styled Dropbox

[KennyP]

Hi guys,

I managed to style a dropbox that works cross-browser. However, I can't solve the following issue:
When the name of a selection is short, it displays fine when it's selected. When the name of a
selection is long, it superimposes itself over the dropdown arrow image. See attached images.

Can you suggest a way to alter the css so that the width of long selected names are prevented from
reaching the dropdown arrow, say by maybe 3 or four pixels?

Thanks,

Kenny

The website (http://www.guyarseneau.com/)



#mySelect {
position: relative;
top: 0px;
left: 0px;
}

.styled {
color:#E3B172;
width: 185px;
height: 26px;
overflow: hidden;
background: url(/images/dropdown-arrow.png) no-repeat 100% #37271A;
border: 1px solid #4C3726;
-webkit-border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
-webkit-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
-pie-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
-moz-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
cursor:hand;
}
.styled:hover {
border: 1px solid #4C3726;

}

.styled select {
color:#E3B172;
position: relative;
background: transparent;
top: 01px;
left: 0px;
width: 214px;
height: 24px;
padding: 2px 0px 3px 3px;
font-size: 16px;
-webkit-appearance: none;
}





<form action="<? bloginfo('url'); ?>" method="get">
<div id="mySelect" class="styled">
<select name="page_id" id="page_id">
<?php
global $post;
$args = array( 'numberposts' => -1);
$posts = get_posts($args);
foreach( $posts as $post ) : setup_postdata($post); ?>
<option style="border:1px solid #3d2a1b;color:#E3B172;background:#37271A;z-index:-2;" value="<? echo $post->ID; ?>"><?php the_title(); ?></option>
<?php endforeach; ?>
</select></div>

[Deadweight]

Are you wanting the dropbox to change size per selection?

[KennyP]

Thanks for your reply Deadweight. No I do not want the dropbox to change size per selection. I would like each title itself to be prevented from fully displaying beyond several pixels before they reach the dropdown arrow. That would limit each title to display no more than a width of 168px in order that it no longer superimpose itself over the arrow as it does now (showing in the second image attachment); the remainder of each title should be hidden once it is selected.

[Deadweight]

Currently the only thing that i can think of is actually making the dropdown arrow have a background color.
Meaning go into photoshop and give it a certain color. I do have a custom drop down object like what you have above.
If you would like to see it please let me know.

[KennyP]

Thank you. Yes I'd love to see the dropdown you have, and possibly replace the one I have with it.
Ideally, I wanted the dropdown to also have a styled vertical scrollbar and still maintain the width
of the options list as wide as the longest title, but I haven't been able to get it to work.

Regarding the background color, I already put a background color on the arrow, same color as the
rest of the background. Unfortunately, even with a high z-index setting I couldn't get it to display
over the selected title. The selected title always displays over the arrow instead, and looks very
sloppy.

[Deadweight]

Sorry Kenny it took me so long to reply.
Besides missing the colors and everything you wanted something like this:
http://thebcelements.com/dhtml/dropdown/

(Works on mobile also)

[KennyP]

Wow! Thanks for sharing that Deadweight! That's almost what I've been trying to do,
except for a customized scrollbar. Also, I would need to add the classes and IDs
within the <select> and <option> tags, or into a div wrapper as you see in the code
of my first post.

Thanks again,

Kenny

[Deadweight]

Yes I know. I'll update it with all the style once I get back home and show you it again. I'll be home around 1pm EST (4am EST). I'll let you know when I update the link with your titles. FYI this isn't your regular option/select menu :3 if you look at the source it may surprise you!

[KennyP]

Thanks Deadweight - looking forward to seeing it.

[Deadweight]

Umm not entirely sure what you mean by
"Also, I would need to add the classes and IDs
within the <select> and <option> tags, or into a div wrapper as you see in the code
of my first post. "
however i updated this:
http://thebcelements.com/dhtml/dropdown/

Another note. Change the dropdown and click view.

[KennyP]

Thanks Deadweight. I just meant I'm not sure about how to enter the style classes you used into the code I'm working with.
Below is the full code including the style and php code that populates all the option titles, as it is in the wp theme:

In your dropdown, after a certain number of listed options (say, size="6"), does it have a styled scrollbar?

Thanks,

Kenny


<form action="<? bloginfo('url'); ?>" method="get">
<div id="mySelect" class="styled">
<select name="page_id" id="page_id">
<?php
global $post;
$args = array( 'numberposts' => -1);
$posts = get_posts($args);
foreach( $posts as $post ) : setup_postdata($post); ?>
<option style="border:1px solid #3d2a1b;color:#E3B172;background:#37271A;" value="<? echo $post->ID; ?>"><?php the_title(); ?>
</option>
<?php endforeach; ?>
</select>
</div>
<br /><br />
<input type="submit" name="submit" value="View" style=" width:100px;
height:22px;
color:#E3B172;
background: #37271A;
background: -webkit-gradient(linear, right top, right bottom, from(#37271A), to(#4F3A27));
background: -moz-linear-gradient(#37271A, #4F3A27);
background: -webkit-linear-gradient(#37271A, #4F3A27);
background: -ms-linear-gradient(#37271A, #4F3A27);
background: -o-linear-gradient(#37271A, #4F3A27);
-pie-background: linear-gradient(#37271A, #4F3A27);
background: linear-gradient(#37271A, #4F3A27);
border: 1px solid #4C3726;
-webkit-border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
-webkit-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
-pie-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
-moz-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
cursor:hand;"/>
</form>

[Deadweight]

I am suggesting to replace that current code with mine. I am working on something to make it much more simple to use also.
In my JavaScript File ill have something like this:


dw_dropdown({
id: 'check',
selectedData: ['Select One','#'], //Text, Link
dropdownArrow: 'down.gif',
selectedStyle: ['',''], //Text, Arrow
itemSelection:
[
['The Billy Joe Conor Story','http://www.guyarseneau.com/the-billy-joe-conor-story-2/'],
['Keeping Thomas Edison’s Legacy Alive in New Jersey','http://www.guyarseneau.com/keeping-thomas-edisons-legacy-alive-in-new-jersey/'],
['Tweet Bird of Youth','http://www.guyarseneau.com/tweet-bird-of-youth/'],
['No Restin’ for Weston – Randy Weston','http://www.guyarseneau.com/no-restin-for-weston-randy-weston/']
// Last no ending coma.

], // Text, Link
button: ['',''] //Text, style
})

This function will create the whole menu for you and post it. So instead of it updating from php it will update in JavaScript. This will also mean you would just need to update this one page and it will update the rest ^^
This will be much more simple. Also, for me i think you are getting to much information from the your database. It seems to take your page forever to load (no offense).

Also in that style try adding this:
overflow: hidden;

[KennyP]

Hi Deadweight!

Regarding the code I posted, it's actually part of a wordpress theme I'm using for my cousin's website.
The php has to remain as it is in order that the dropdown get automatically updated when new articles
are added or the order in which they appear is changed. The php will automatically reflect whatever
changes are made. The list is never static.

Regarding the slowness of the site, you are so right. Its a fault of the hosting provider, iPage. They
claim that the load time will normalize as soon as they complete an upgrade they're doing - but this
site has been slow ever since I installed it a couple of weeks ago. My own website, which is html and is
in the same root folder, loads normally. So, whatever they're upgrading is affecting the WP site only.

[Deadweight]

Anyways, not sure if you tried:
<input type="submit" name="submit" value="View" style=" width:100px;
height:22px;
color:#E3B172;
background: #37271A;
background: -webkit-gradient(linear, right top, right bottom, from(#37271A), to(#4F3A27));
background: -moz-linear-gradient(#37271A, #4F3A27);
background: -webkit-linear-gradient(#37271A, #4F3A27);
background: -ms-linear-gradient(#37271A, #4F3A27);
background: -o-linear-gradient(#37271A, #4F3A27);
-pie-background: linear-gradient(#37271A, #4F3A27);
background: linear-gradient(#37271A, #4F3A27);
border: 1px solid #4C3726;
-webkit-border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
-webkit-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
-pie-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
-moz-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
cursor:hand; overflow:hidden; "/>

[KennyP]

Thanks for your help Deadweight.
As you see below, I do have overflow:hidden, but, in the options list I have overflow-y:scroll. I do want a scrollbar, a styled scrollbar. That's what I haven't been able to add unfortunately.



#mySelect {
position: relative;
top: 0px;
left: 0px;
}

.styled {
font-size:13px;
color:#E3B172;
width: 185px;
height: 26px;
overflow: hidden;
background: url(/images/dropdown-arrow.png) no-repeat 100% #37271A;
border: 1px solid #4C3726;
-webkit-border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
-webkit-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
-pie-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
-moz-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
cursor:hand;

}
.styled:hover {
border: 1px solid #4C3726;

}

.styled select {
overflow-y:scroll;
color:#E3B172;
position: relative;
background: transparent;
top: 01px;
left: 0px;
width: 214px;
height: 24px;
padding: 2px 0px 3px 2px;
font-size: 13px;
-webkit-appearance: none;
border:none;
}

[Deadweight]

http://css-tricks.com/custom-scrollbars-in-webkit/
Something like this?

[KennyP]

Yep, exactly! Coincidentally, that particular code is one I tried to add a styled scrollbar, but unfortunately it didn't play nice with the rest of the code and didn't work. Also, that particular one wasn't cross-browser. I tried others - but couldn't get any of them to work with rest of the code included.

[Deadweight]

If i remember correctly http://www.dynamicdrive.com/forums/member.php?35807-vwphillips had created something like what you are looking for. Message him.

[KennyP]

Thanks Deadweight, but there's no such item listed on that page.

[Deadweight]

It's a person and you have to send him a message about it.

[kplusonline]

yep, me too. anybody help?

Thanks Deadweight, but there's no such item listed on that page.

[jscheuer1]

It's a person and you have to send him a message about it.


yep, me too. anybody help?

See previous response - in other words ask Vic about it. He (vwphillips) is a member here. I'm closing this thread as it's so old. If anyone has further questions about it, they can start a new thread and refer back to this one.