cfgrid - "style" attribute does nothing

Explorer ,
Aug 31, 2010 Aug 31, 2010

Copy link to clipboard

Copied

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?

Views

1.2K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 31, 2010 Aug 31, 2010

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 31, 2010 Aug 31, 2010

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 31, 2010 Aug 31, 2010

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 31, 2010 Aug 31, 2010

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 31, 2010 Aug 31, 2010

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 21, 2017 Feb 21, 2017

Copy link to clipboard

Copied

LATEST

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines