Solved

CSS for CFGRID - Need to remove underline for links

Posted on 2012-04-02
19
1,066 Views
Last Modified: 2012-06-21
I am using the below to make my CFGRID items line up and look the way I want. I am using the first column as my hrefkey and want to remove the "underline" from the link.

Does anyone have a tip on what I could add to that column's css so links will not have an underline in my grid?

Thanks.


#Grid .x-grid3 table { margin: 0 0 12px; border-collapse: collapse; clear: both; /* for clearing floated images */ }
th, td { vertical-align:top; padding:2px 0px; margin:0; }

#Grid .x-grid3-hd-1 {text-align:left; font-weight: bold; font-size:120%}
#Grid .x-grid3-col-1 {text-align:left; font-size:120%}

#Grid .x-grid3-hd-2 {text-align:left; font-weight: bold; font-size:120%}
#Grid .x-grid3-col-2 {text-align:left; font-size:120%}
      
#Grid .x-grid3-hd-3 {text-align:left; font-weight: bold; font-size:120%}
#Grid .x-grid3-col-3 {text-align:left; font-size:120%}

#Grid .x-grid3-hd-4 {text-align:left; font-weight: bold; font-size:120%}
#Grid .x-grid3-col-4 {text-align:left; font-size:120%}

#Grid .x-grid3-hd-5 {text-align:left; font-weight: bold; font-size:120%}
#Grid .x-grid3-col-5 {text-align:left; font-size:120%}

.x-grid-cell-inner {white-space: normal ! important; display:block;}
0
Comment
Question by:earwig75
  • 9
  • 7
  • 2
  • +1
19 Comments
 
LVL 5

Expert Comment

by:Robin Hall
ID: 37796569
Earwig75,

text-decoration: none is the style you are looking for.

You should be able to do what you are asking if you add it to link tag like so
#Grid .x-grid3-col-1 a 
{
text-decoration:none;
}

Open in new window


The "a" is what makes this work as it puts the style directly onto the Link tag.  I've gotten this to work using a standard table so hopefully it will work for you.
0
 

Author Comment

by:earwig75
ID: 37796627
Unfortunately that did not work. I did try exactly what you said before I made this question; I should have mentioned that.
0
 
LVL 5

Expert Comment

by:Robin Hall
ID: 37796705
When you tried it, did you add an !important tag to the end of the line?  Wondering if maybe something is overriding the CSS Code.

text-decoration:none !important;

If that still doesn't work my only other thought is to use something like Firefox's Developer tool Firebug to look more into the column and see what tags are showing up or are getting overwritten and try playing around with the CSS that way.
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:earwig75
ID: 37800903
Yes, that is not working either.  I'll try IE Dev Tools. Thanks.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 37801696
If you still can't resolve it, please post a live URL or the rendered HTML/CSS code and we can then assist you further.
0
 
LVL 52

Accepted Solution

by:
_agx_ earned 500 total points
ID: 37803815
By rnh82
     #Grid .x-grid3-col-1 a  {  text-decoration:none; }

A slight mod to rnh82 's suggestion worked for me. ie .x-grid3-td-{ColumnNameHere}.  

<style type="text/css">
<!--- column name MUST be in upper case --->
.x-grid3-td-MYCOLUMN div { text-decoration:none; }
</style>

<cfgrid ...>
          <cfgridcolumn name="MyColumn" href="somePage.cfm" ...>
          ...
</cfgrid>
0
 

Author Comment

by:earwig75
ID: 37805807
Thanks for the replies. I cannot post a live link because this isn't a live site on the internet.

Below is what I tried after reading _agx_'s post but it still isn't working.

<style type="text/css">
.x-grid3-td-IDNUMBER div { text-decoration:none; }
</style>


<div id="Grid">
<cfform name="Grid">
<cfinput name="searchString" />
<cfinput type="button" name="searchBtn" value="Search" onclick="ColdFusion.Grid.refresh('Grid', false);" />
<cfinput type="reset" name="Reset" value="Reset" onClick="setTimeout(function() {ColdFusion.Grid.refresh('Grid', false);},500);" />
<br /><br />
<cfgrid  
    format="html" name="Grid" pagesize="20" width="455"
      bind="cfc:mycfc.getrecords({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection}, getSearchString())">
    <cfgridcolumn name="IDNUMBER" width="4" header="ID" href="pagename.cfm?" hrefkey="IDNumber" />
      *********other columns********
</cfgrid>
</cfform>
</div>
0
 
LVL 52

Expert Comment

by:_agx_
ID: 37807001
CFGrid's use extJS. There were some css changes between 2.x/CF8 and 3.x.CF9.  I'm not an extjs guru, but the snippet above worked w/CF9. What version of CF are you using?
0
 

Author Comment

by:earwig75
ID: 37807222
I am using CF9. This is very frustrating. I am attaching a screenshot of what shows up in IE Dev tools. The cell with "8" is what is showing as underlined... Thanks again.
screenshot.jpg
0
 
LVL 52

Expert Comment

by:_agx_
ID: 37807399
When you tried it, did you add an !important tag to the end of the line?

Gah, I pasted the wrong code.  Like rnh82 said it needs !important too. My bad.

.x-grid3-td-IDNUMBER div { text-decoration:none  !important; }
0
 

Author Comment

by:earwig75
ID: 37807566
Still no luck. =(
0
 
LVL 52

Expert Comment

by:_agx_
ID: 37807646
Hm... did you clear cache? I'll have to find a machine and retest it for silly typos.. because I know it worked w/CF9 yesterday.
0
 
LVL 52

Expert Comment

by:_agx_
ID: 37807705
This is my test code (uses a sample CF database). There's no underline in IE9 or FF10.  If the test code doesn't work for you..  I'm out of ideas :(

Though it's a cfgrid, the code is all extJS (3rd party library). So the CSS stuff is really a question for an extJS expert ... which definitely rules me out ;)

<cfquery name="getCourses" datasource="cfdocexamples">
	SELECT Course_ID AS MyColumn, CorNumber FROM CourseList ORDER BY Dept_ID ASC, CorNumber ASC
</cfquery>

<style type="text/css">
	.x-grid3-td-MYCOLUMN div {text-decoration: none !important; }
</style>
<div>
<cfform>
<cfgrid format="html" name="myGrid" query="getCourses">
	<cfgridcolumn name="MyColumn" href="test.cfm">
	<cfgridcolumn name="CorNumber">
</cfgrid>
</cfform>

Open in new window

0
 
LVL 52

Expert Comment

by:_agx_
ID: 37816484
Did you get a chance to try the test code?
0
 

Author Comment

by:earwig75
ID: 37816581
Sorry it doesn't work with mine :(
0
 
LVL 52

Expert Comment

by:_agx_
ID: 37816643
Did you try the exact code - no changes?  And what browsers/versions did you test it with? Because it seems weird that we're both using the same environment CF9.01 and it works for me but not you.  I tested with CF9/FF10.
0
 

Author Comment

by:earwig75
ID: 37817031
I agree it is weird. I am using IE8 and FF10.0.2. I am using the exact same code.
0
 
LVL 52

Expert Comment

by:_agx_
ID: 37817304
Hm.. then you may have to ask on an extjs forum. I not a guru with it by any means. I'm just going off of what I see in the IE dev tools, which show this structure when the grid is generated:

               .x-grid3-td-MYCOLUMN div

.. and the fact that it works for me. A extjs expert would undoubtedly know the css better and could see what's missing.

Sorry I couldn't help more, but that's my best shot ;-)
0
 
LVL 52

Expert Comment

by:_agx_
ID: 37835571
earwig75 - Don't forget to close this question.  If you did find a solution,  post it and accept your own comment as the solution. Otherwise, you could delete the question since no answer was found.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question