Custom CSS, what selector to use when accessing elements inside a grid?

Fri Mar 30, 2012 5:48 pm

First, the new css file support is going to be incredibly useful and make things more real-world to build and have lots of custom css... I had been using a lot of custom javascript, jquery to alter css of elements, but that is just entirely unmanageable. So, thanks for adding this!

Somewhat related to using CSS is getting some clarity on for instance a grid and how to have an absolute reference to the item. This is the table inside the div that makes up the grid:

In the tiggzi designer properties I named it: grid_inbox_header

So, what is the thinking here in terms of using a css selector to access this element?

Using mobilegrid4 in this case is not at all helpful and again becomes entirely unmanageable and is not descriptive enough amongst 2 or 3 other grids on the same page etc. The name property is irrelevant with css and this dsid is useful with custom javascript like:

$('div[dsid="grid_inbox_header"]').css('background-image','url("http://tiggzi.com/views/assets/asset-...;

But, how do I do the same thing with straight css from within a project css file? Can the dsid be used somehow?

Hope I explained what I am trying to understand clearly...

thanks,

David

Fri Mar 30, 2012 6:22 pm

Can you post a sample page with the grids on it and tell me which item you try to select?

Fri Mar 30, 2012 6:34 pm

Yep,

Here is a page sample....

So, if I want to get the table inside the mobilegrid5_wrapper (grid)...

'id' looks like an internal needed reference
'class' looks like it stays the same as when you drop it on the page
'name' isn't really accessible easily or at all from straight css
'dsid' is available from custom javascript, but can it be used from within css?

precode
<body>

<div class="mobilegrid5_wrapper">
<table id="j_77" class="mobilegrid5" name="grid_inbox_time_approval" dsid="grid_inbox_time_approval"
cellpadding=0 cellspacing=0>
<col style="width:31.4%;">
<col style="width:41.3%;">
<col style="width:27.3%;">
<tr>
<td id="j_78" name="time_submitted" class="mobilegridcell27" colspan=1 rowspan=1>
<div class="cell-wrapper">
<div name="mobilelabel83" id="j_79" dsid="mobilelabel83" data-role="tiggr_label"
class='mobilelabel21'>
Today 9:12a
</div>
</div>
</td>
<td id="j_80" name="contractor_fullname" class="mobilegridcell28" colspan=1 rowspan=1>
<div class="cell-wrapper">
<div name="mobilelabel129" id="j_81" dsid="mobilelabel129" data-role="tiggr_label"
class='mobilelabel22'>
Phil Dunphy
</div>
</div>
</td>
<td id="j_82" name="time_periodend" class="mobilegridcell29" colspan=1 rowspan=1>
<div class="cell-wrapper">
<div name="mobilelabel68" id="j_83" dsid="mobilelabel68" data-role="tiggr_label"
class='mobilelabel23'>
3-11-2011
</div>
</div>
</td>
</tr>

Code: Select all

                 <&#47;table> 
             <&#47;div>

/code/pre

Fri Mar 30, 2012 7:09 pm

Which 'dsid' do you want to select? I don't see it on the table. If possible, can you post a link to the actual page? You just create a test page where this issue is reproduced.

Fri Mar 30, 2012 7:18 pm

Sure I can do that, but its:

precode<table id="j_77" class="mobilegrid5" name="grid_inbox_time_approval" dsid="grid_inbox_time_approval"
cellpadding=0 cellspacing=0>/code/pre

Basically, yea just wondering how you access those DSIDs from straight within a custom CSS project file...

Does that explain/help?

Fri Mar 30, 2012 7:26 pm

Let me know if this helps: http://www.kirupa.com/html5/css_attri...

Fri Mar 30, 2012 7:36 pm

Yes, totally. I guess I skipped that part of my basic css training So just match against that dsid property... makes sense... thanks