Solved

CSS HELP

Posted on 2016-09-01
6
112 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 58

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 58

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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
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 58

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

Technology Partners: 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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Suggested Courses

627 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