cfgrid - "style" attribute does nothing

[Guest]

I'm trying to reduce the width of the border around my cfgrid. I want a 1 px border, but the grid is showing up with a 2 or 3 px border. I tried using the style attribute, but it has no effect on the grid. In fact, I don't even see my style attribute being output anywhere in the document.

When I inspect the grid, I see a div (<div id="cfgrid1283278813192"... >) that has an inline style:

"width: 625px; border: 1px solid rgb(204, 204, 204); overflow: hidden; height: 500px;"

When I change this inline style, and set the border to 0, the grid renders the way I want. But I don't see a way to gain control over this inline style. It seems like my style attribute should be applied in this div.

Is this broken or am I missing something?

[Adam Cameron.]

It doesn't seem to work, no.  There's a bug raised for this, you should vote for it: http://cfbugs.adobe.com/cfbugreport/flexbugui/cfbugtracker/main.html#bugId=76491

In the meantime, you should be able to overload the CSS that CF applies to the grid.  All the elements within the grid seem to have IDs and classes (the outer ID seems randomly generated, but the inner ones seem predictable?  Dunno, didn't investigate too much.

--

Adam

[Guest]

Thanks! I voted for the bug. I don't think I can override the style because there's no class for the grid... and the id seems to be automatically generated by CF. And the style that needs to be overriden is an inline style.

[Guest]

I tried all the CSS tricks I can think of, but I can't figure out a way to override the inline style without affecting the entire grid.

[Adam Cameron.]

Like I suggested, don't worry about the <div> that holds the grid, look at whatever CSS is applied to the various elementsof the grid itself.

--

Adam

[Guest]

I tried playing around with the various grid elements, but I couldn't find a solution. I tried enclosing the grid in a <div id="grid"> and then doing #grid form div {border:0px !important;} but that affected all the borders in the entire grid. I'm pretty sure the problem is the outermost div with the CF generated id, and I don't think it's possible to override any Ext JS classes to change the outermost border. I could be wrong... but I did play around with it for a while.

[jerseycat10]

I know I am 6.5 years late to this, but I wanted to provide my solution.

I came across this issue today. I was able to remove some borders from some of the inner grid divs, but there was athe annoying border on the aforementioned outermost div element that was the final thing to remove. I used the following jQuery:

$('#preview_body form div').css('border', '0px');

I gave the div surrounding my <cfform> an id of "preview_body".

The selector was able to isolate the div and render the border ancient history.