7 replies [Last post]
paulk
paulk's picture
Offline
Regular
Last seen: 8 years 37 weeks ago
Timezone: GMT-5
Joined: 2013-10-13
Posts: 18
Points: 22

Will ::before work with this drop down list?

  <div class="control-group custom "><label for="ticket[c_division]" title="Division">Division:</label><div class="controls"><select id="ticket_c_division" name="ticket[c_division]"><option value=""></option>
<option value="Example 1">Example 1</option>
<option value="Example 2">Example 2</option>
<option value="Example 3">Example 3</option>
<option value="Example 4">Example 4</option>
<option value="Example 5">Example 5</option>
<option value="Example 6">Example 6</option>
<option value="Example 7">Example 7</option>
<option value="Example 8">Example 8</option></select></div></div>

I'd like text to display on the left of each. Something equivalent to "click here to select"

I'm using the following to hide each instance of these so that the .js file displays the drop down list properly however it's missing labels on the side of it. I'm thinking something like ::before would work.

.control-group.custom:nth-of-type(1)  
  { 
  position: absolute;
    top: -9999px;
    left: -9999px;
 
   }

Cook

paulk
paulk's picture
Offline
Regular
Last seen: 8 years 37 weeks ago
Timezone: GMT-5
Joined: 2013-10-13
Posts: 18
Points: 22

i don't see an edit button

i don't see an edit button but I wanted to clarify that I didn't want the label to appear until the matching ID is selected.

Cook

paulk
paulk's picture
Offline
Regular
Last seen: 8 years 37 weeks ago
Timezone: GMT-5
Joined: 2013-10-13
Posts: 18
Points: 22

Or Is there a way to write

Or Is there a way to write the following so that the label that I'm hiding just shows up again when the id is selected?

.control-group.custom:nth-of-type(1)
{
position: absolute;
top: -9999px;
left: -9999px;

}

Cook

paulk
paulk's picture
Offline
Regular
Last seen: 8 years 37 weeks ago
Timezone: GMT-5
Joined: 2013-10-13
Posts: 18
Points: 22

possibly something like

possibly something like this?

.control-group.custom:nth-of-type(1)::before {content: attr(Example 1) "Click to Select..";}

Cook

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 weeks 21 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Can you show us a working

Can you show us a working example of how far you have got?
I'm having difficulty understanding what you want.

paulk
paulk's picture
Offline
Regular
Last seen: 8 years 37 weeks ago
Timezone: GMT-5
Joined: 2013-10-13
Posts: 18
Points: 22

It's behind a firewall or i

It's behind a firewall or i would.

see attached for element info.

Label is visible on the parent but not on the child. It's visible before I hide it of course with

.control-group.custom:nth-of-type(1)
{
position: absolute;
top: -9999px;
left: -9999px;
}

But I need it to be hidden until it's selected and then show up.

AttachmentSize
Capture.PNG 9.28 KB

Cook

paulk
paulk's picture
Offline
Regular
Last seen: 8 years 37 weeks ago
Timezone: GMT-5
Joined: 2013-10-13
Posts: 18
Points: 22

Here's the jsfiddle version

Here's the jsfiddle version of it.

drop down doesn't work on this site though but it should give you a clearer version of what I'm looking at.

http://jsfiddle.net/#&togetherjs=GiVj1mnkIe

Cook

paulk
paulk's picture
Offline
Regular
Last seen: 8 years 37 weeks ago
Timezone: GMT-5
Joined: 2013-10-13
Posts: 18
Points: 22

The .js file /** CONVERT CSV

The .js file

/** CONVERT CSV LIST OF FORM FIELDS INTO AN ARRAY OF DOM OBJECTS */

/** The Document Object Model (DOM) is a programming interface for HTML
and XML documents. It provides a structured representation of the document
(a tree) and it defines a way that the structure can be accessed from programs
so that they can change the document structure, style and content.
The DOM provides a representation of the document as a structured group of
nodes and objects that have properties and methods. Essentially, it connects
web pages to scripts or programming languages. Though often accessed using
JavaScript, the DOM is not part of it and it can be used by other languages,
though this is much less common.*/

Cook