Solved

CSS for CFGRID - Need to remove underline for links

Posted on 2012-04-02
19
1,097 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Stressed Out?

Watch some penguins on the livecam!

 

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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

696 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