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
Solved

CSS HELP

Posted on 2016-09-01
6
89 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
  • 3
  • 2
6 Comments
 
LVL 55

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 55

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
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 
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 55

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Apache error.log 19 55
Changing Two Areas of a Page 5 25
Location of Buttons 4 17
Correct and Effective way to generate pdf files online via JavaScript or ASP.Net? 6 52
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Learn how to automatically add page numbers in your next InDesign project. This can be very helpful in multi-page books and magazines that you are designing. Make sure your Pages window visible.:  In the document you wish to add page numbers to. Act…

790 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