Solved

CSS HELP

Posted on 2016-09-01
6
92 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 56

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 56

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
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!

 
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 56

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

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.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

735 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