How to set gap width?

[Conner]

Ehh, scratch the above note about the left and right columns being 300px each.. for the reason of differences in screen resolutions, I'd rather just have the left and right columns 25% each and the middle column 50%. How would I do that? The more I mess with it the more everything just goes out of whack.

[SuperGLS]

I'm no CSS guy, so I don't know how to use the percentages. I'm just lucky what I did worked. The way I have it set the left and right columns are fixed width and the middle adjusts when you change the size of the browser. That's how I used to have it on vB3.8.4 (and previous) in conjunction with vBadvanced.

[Conner]

I appreciate you doing what you have for me. You have no clue how much you helped me jump on the right path. I'll start my own topic and see if there's a moderator or someone from the development team that will actually post and help.

[Ramsesx]

Ok.. this is what I have.


I went to adminchp>>vbcms>>grid manager>>chose to flatten 3 Column (25%, 50%, 25%) grid>>Default Template HTML.

This is what I have in Layout Manager UI HTML:

<div id="doc3">
    <div id="bd">
        <div class="yui-g">
            <div class="yui-tvb-l25 first yui-panel">
                <ul class="list_no_decoration" id="widgetlist_column1">$column[1]</ul>
            </div>
            <div class="yui-tvb-l50 first yui-panel">
                <ul class="list_no_decoration" id="widgetlist_column2">$column[2]</ul>
            </div>
            <div class="yui-tvb-l25 first yui-panel">
                <ul class="list_no_decoration" id="widgetlist_column3">$column[3]</ul>
            </div>
        </div>
    </div>
</div>

This is what I have in Default Template HTML:

I have the same as you and not what SuperGLS have. Is this a bug or what? It's really a mess to get this cms crappy thing to work as it should and look how I want it.

[pank]

I have a bug reported already. It seems some of us are never getting the option to install the CMS sample data and that is causing the issue. Works fine on my .net server and won't work on my .com server. Nearly identical systems...

[Ramsesx]

I have a bug reported already. It seems some of us are never getting the option to install the CMS sample data and that is causing the issue. Works fine on my .net server and won't work on my .com server. Nearly identical systems...

Ok, thanks Bob, hope they get it fixed in 4.01.

[pank]

Ok, thanks Bob, hope they get it fixed in 4.01.

Me too! Can't remember but in one of the late alpha's or early beta's it "did" install fine for me by default. Something changed with the Gold release and hopefully they will find the fix.

[albanah]

I have found the solution, just to share:

Go to Grid Manager> edit "3 Column Fixed-Liquid-Fixed" > edit "Default Template HTML"

Play around with the width pixel (in red) this:

#gridl3_leftcol {
float: left;
width: 160px;
position: relative;
margin-left: -50%;
left: 170px;
overflow: hidden;

Cheers!

Dear Eric,

It looks fine but the right column a bit narrow.
Please help how to increase it without disturbing the setup, I tried but without success.
Kindly also put the default values, as I forget them.

[pank]

I suggest anybody having the same issue reply to my bug report as I've gotten no replies in almost a week

http://www.vbulletin.com/forum/project.php?issueid=34720

Maybe if other people reply that they can duplicate the issue it will help...

[PjDaBadMan]

Hmm. You are using Gold right? In my Default HTML template I had:

<style type="text/css">
#gridl3_container {
	position: relative;
	clear: both;
	float: left;
	width: 100%;
	overflow: hidden;
}

#gridl3_midshift {
	float: left;
	width: 200%;
	position: relative;
	left: 170px;
}

#gridl3_rightshift {
	float: left;
	width: 100%;
	position: relative;
	left: 50%;
	margin-left: -340px;
}

#gridl3_midmask {
	float: right;
	width: 50%;
	position: relative;
	right: 100%;
}

#gridl3_midcol {
	margin-left: 340px;
	width: 100%;
	overflow: hidden;
}

#gridl3_leftcol {
	float: left;
	width: 150px;
	position: relative;
	margin-left: -50%;
	left: 170px;
	overflow: hidden;
}

#gridl3_rightcol {
	float: left;
	width: 150px;
	position: relative;
	left: 20px;
	overflow: hidden;
}

#gridl3_content {
	margin-right: 340px;
}
</style>

<div id="gridl3_container">
	<div id="gridl3_midshift">
		<div id="gridl3_rightshift">
			<div id="gridl3_midmask">
				<div id="gridl3_midcol">
					<div id="gridl3_content">
						<ul class="list_no_decoration" id="widgetlist_column2">$column[2]</ul>
					</div>
				</div>
			</div>
			<div id="gridl3_leftcol">
				<ul class="list_no_decoration" id="widgetlist_column1">$column[1]</ul>
			</div>
			<div id="gridl3_rightcol">
				<ul class="list_no_decoration" id="widgetlist_column3">$column[3]</ul>
			</div>
		</div>
	</div>
</div>

Maybe you want to try putting that entire code in there (but save the other code first!!!! in case it doesn't work).

I love you. Thanks

[SuperGLS]

No problem.

Mine is a little off after updating to 4.0.2. The left column border is a little off, meaning the middle column seems to be "covering" it a bit. I'll have to look into that.