Solved

CSS HELP

Posted on 2016-09-01
6
103 Views
Last Modified: 2016-09-04
I am try to create a row with 5 columns layout and siaplay the content underneath of the columns , but it dies not work . I am suing bootstrap css.

<div class="form-group">
    <label class="control-label col-sm-2" for="status">Participants:</label>

    <div class="row" style="border: 1px solid red">
    	<div class="col-xs-12">
    		<cfoutput query="qGetParticipants" group="securityRoleNameTx">
        		<div class="header" class="col-xs-2 col-sm-offset-2">#securityRoleNameTx#</div>
                	 <div class="collapse">
                        		<cfoutput>
                                  <div>
                                      <p>
                                         <input type="checkbox" name="part" id="part" value="#userKey#" <cfif listFindNoCase(locParticiopants,userKey)>checked</cfif>> #trim(lastName)#, #trim(firstName)#
                                      </p>
                                  </div>
                                </cfoutput>
                    </div>
                </div>
            </cfoutput>

        </div>
    </div>
</div>

Open in new window

0
Comment
Question by:erikTsomik
[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
  • 3
  • 2
6 Comments
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 41781122
I am suing bootstrap css.
I hope you have a good lawyer.

To create additional layout options in bootstrap is fairly easy.

First create a name for them - and then just follow the Bootstrap convention
col-xs-5-1,
.col-sm-5-1,
.col-md-5-1,
.col-lg-5-1 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.col-xs-5-1 {
    width: 20%;
    float: left;
}

Open in new window

Next you need to add the media queries
@media (min-width: 768px) {
	.col-sm-5-1 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-5-1 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-5-1 {
        width: 20%;
        float: left;
    }
}

Open in new window

If you need to have styles to span N columns of 5 then just add those to the above and change the width to N * 20%
Let's say you need a cell that takes up 2 columns of 5 - add the new style as follows
.col-xs-5-1,
.col-xs-5-2,  /* NEW */
.col-sm-5-1,
.col-sm-5-2, /* NEW */
.col-md-5-1,
.col-md-5-2, /* NEW */
.col-lg-5-1,
.col-lg-5-2 { /* NEW */
	position: relative;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
}
...
/* NEW */
.col-xs-5-2  {
	width: 40%;
	float: left;
}
...
@media (min-width: 768px) {
	...
	/* NEW */
	.col-sm-5-2 {
		width: 40%;
		float: left;
	}
}
@media (min-width: 992px) {
	...
	/* NEW */
	.col-md-5-2 {
		width: 40%;
		float: left;
    }
}
@media (min-width: 1200px) {
	...
	/* NEW */
	.col-lg-5-2 {
		width: 20%;
		float: left;
	}
}

Open in new window

0
 
LVL 31

Accepted Solution

by:
Marco Gasi earned 500 total points
ID: 41781125
I'm not A ColdFusion expert, but as far as I know cfoutput can iterate through a query result and in your code I see 2 cfoutput tags: is this what you want?
In addition, in Bootstrap, to create a let's say 5 columns layout, only one column must have attached the offset:
<div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>

Open in new window

You are using 2 different columns' sizes (xs and sm) and appending the offset to each column because you're doing it within the loop.
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 41781146
Here is a complete Bootstrap 5 column style sheet with push, pull, offset etc
.col-xs-5-1, .col-sm-5-1, .col-md-5-1, .col-lg-5-1, .col-xs-5-2, .col-sm-5-2, .col-md-5-2, .col-lg-5-2, .col-xs-5-3, .col-sm-5-3, .col-md-5-3, .col-lg-5-3, .col-xs-5-4, .col-sm-5-4, .col-md-5-4, .col-lg-5-4, .col-xs-5-5, .col-sm-5-5, .col-md-5, .col-lg-5-5 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.col-xs-5-1, .col-xs-5-2, .col-xs-5-3, .col-xs-5-4, .col-xs-5-5 {
  float: left;
}
.col-xs-5-5 {
  width: 100%;
}
.col-xs-5-4 {
  width: 80%;
}
.col-xs-5-3 {
  width: 60%;
}
.col-xs-5-2 {
  width: 40%;
}
.col-xs-5-1 {
  width: 20%;
}
.col-xs-pull-5-5 {
  right: 100%;
}
.col-xs-pull-5-4 {
  right: 80%;
}
.col-xs-pull-5-3 {
  right: 60%;
}
.col-xs-pull-5-2 {
  right: 40%;
}
.col-xs-pull-5-1 {
  right: 20%;
}
.col-xs-pull-5-0 {
  right: auto;
}
.col-xs-push-5-5 {
  left: 100%;
}
.col-xs-push-5-4 {
  left: 80%;
}
.col-xs-push-5-3 {
  left: 60%;
}
.col-xs-push-5-2 {
  left: 40%;
}
.col-xs-push-5-1 {
  left: 20%;
}
.col-xs-push-5-0 {
  left: auto;
}
.col-xs-offset-5-5 {
  margin-left: 100%;
}
.col-xs-offset-5-4 {
  margin-left: 80%;
}
.col-xs-offset-5-3 {
  margin-left: 60%;
}
.col-xs-offset-5-2 {
  margin-left: 40%;
}
.col-xs-offset-5-1 {
  margin-left: 20%;
}
.col-xs-offset-5-0 {
  margin-left: 0;
}
@media (min-width: 768px) {
  .col-sm-5-1, .col-sm-5-2, .col-sm-5-3, .col-sm-5-4, .col-sm-5-5 {
    float: left;
  }
  .col-sm-5-5 {
    width: 100%;
  }
  .col-sm-5-4 {
    width: 80%;
  }
  .col-sm-5-3 {
    width: 60%;
  }
  .col-sm-5-2 {
    width: 40%;
  }
  .col-sm-5-1 {
    width: 20%;
  }
  .col-sm-pull-5-5 {
    right: 100%;
  }
  .col-sm-pull-5-4 {
    right: 80%;
  }
  .col-sm-pull-5-3 {
    right: 60%;
  }
  .col-sm-pull-5-2 {
    right: 40%;
  }
  .col-sm-pull-5-1 {
    right: 20%;
  }
  .col-sm-pull-5-0 {
    right: auto;
  }
  .col-sm-push-5-5 {
    left: 100%;
  }
  .col-sm-push-5-4 {
    left: 80%;
  }
  .col-sm-push-5-3 {
    left: 60%;
  }
  .col-sm-push-5-2 {
    left: 40%;
  }
  .col-sm-push-5-1 {
    left: 20%;
  }
  .col-sm-push-5-0 {
    left: auto;
  }
  .col-sm-offset-5-5 {
    margin-left: 100%;
  }
  .col-sm-offset-5-4 {
    margin-left: 80%;
  }
  .col-sm-offset-5-3 {
    margin-left: 60%;
  }
  .col-sm-offset-5-2 {
    margin-left: 40%;
  }
  .col-sm-offset-5-1 {
    margin-left: 20%;
  }
  .col-sm-offset-5-0 {
    margin-left: 0;
  }
}
@media (min-width: 992px) {
  .col-md-5-1, .col-md-5-2, .col-md-5-3, .col-md-5-4, .col-md-5-5 {
    float: left;
  }
  .col-md-5-5 {
    width: 100%;
  }
  .col-md-5-4 {
    width: 80%;
  }
  .col-md-5-3 {
    width: 60%;
  }
  .col-md-5-2 {
    width: 40%;
  }
  .col-md-5-1 {
    width: 20%;
  }
  .col-md-pull-5-5 {
    right: 100%;
  }
  .col-md-pull-5-4 {
    right: 80%;
  }
  .col-md-pull-5-3 {
    right: 60%;
  }
  .col-md-pull-5-2 {
    right: 40%;
  }
  .col-md-pull-5-1 {
    right: 20%;
  }
  .col-md-pull-5-0 {
    right: auto;
  }
  .col-md-push-5-5 {
    left: 100%;
  }
  .col-md-push-5-4 {
    left: 80%;
  }
  .col-md-push-5-3 {
    left: 60%;
  }
  .col-md-push-5-2 {
    left: 40%;
  }
  .col-md-push-5-1 {
    left: 20%;
  }
  .col-md-push-5-0 {
    left: auto;
  }
  .col-md-offset-5-5 {
    margin-left: 100%;
  }
  .col-md-offset-5-4 {
    margin-left: 80%;
  }
  .col-md-offset-5-3 {
    margin-left: 60%;
  }
  .col-md-offset-5-2 {
    margin-left: 40%;
  }
  .col-md-offset-5-1 {
    margin-left: 20%;
  }
  .col-md-offset-5-0 {
    margin-left: 0;
  }
}
@media (min-width: 1200px) {
  .col-lg-5-1, .col-lg-5-2, .col-lg-5-3, .col-lg-5-4, .col-lg-5-5 {
    float: left;
  }
  .col-lg-5-5 {
    width: 100%;
  }
  .col-lg-5-4 {
    width: 80%;
  }
  .col-lg-5-3 {
    width: 60%;
  }
  .col-lg-5-2 {
    width: 40%;
  }
  .col-lg-5-1 {
    width: 20%;
  }
  .col-lg-pull-5-5 {
    right: 100%;
  }
  .col-lg-pull-5-4 {
    right: 80%;
  }
  .col-lg-pull-5-3 {
    right: 60%;
  }
  .col-lg-pull-5-2 {
    right: 40%;
  }
  .col-lg-pull-5-1 {
    right: 20%;
  }
  .col-lg-pull-5-0 {
    right: auto;
  }
  .col-lg-push-5-5 {
    left: 100%;
  }
  .col-lg-push-5-4 {
    left: 80%;
  }
  .col-lg-push-5-3 {
    left: 60%;
  }
  .col-lg-push-5-2 {
    left: 40%;
  }
  .col-lg-push-5-1 {
    left: 20%;
  }
  .col-lg-push-5-0 {
    left: auto;
  }
  .col-lg-offset-5-5 {
    margin-left: 100%;
  }
  .col-lg-offset-5-4 {
    margin-left: 80%;
  }
  .col-lg-offset-5-3 {
    margin-left: 60%;
  }
  .col-lg-offset-5-2 {
    margin-left: 40%;
  }
  .col-lg-offset-5-1 {
    margin-left: 20%;
  }
  .col-lg-offset-5-0 {
    margin-left: 0;
  }
}

Open in new window


Working sample here
0
Major Incident Management Communications

Major incidents and IT service outages cost companies millions. Often the solution to minimizing damage is automated communication. Find out more in our Major Incident Management Communications infographic.

 
LVL 19

Author Comment

by:erikTsomik
ID: 41782219
Julian Hansen. What I need is 5 column layout and the test tahtt will be shown underneath of each column. Sort of table layout
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 41782221
Marco Gasi. The reason I am using  2 cfoutput is that I am groupoing the result for the output. So the first cfoutput gives the headers, and the second outputing the columns content
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 41783653
What I need is 5 column layout and the test tahtt will be shown underneath of each column. Sort of table layout
And how does my solution not provide this?
Marco's solution will work but leaves a gutter - the styles posted above allow you to have a fully functional Bootstrap column class that works on 5 columns instead of 12?

EDIT: Sample on how to do this here
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL several years ago, it seemed like now was a good time to update it for object-oriented PHP.  This article does that, replacing as much as possible the pr…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

710 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