I have uploaded a simple web template in play Scala using intellij idea. how to call each section from different file,
I am calling each function from index.scala.html
this is my main.scala.html
<html>
<body id="page-top" class="index">
#navigation
#header
#services
#portfolio
#about
#team
#client
#contact
#footer
</body>
</html>
As the above code how to have each function that is #services in separate file, #portfolio in separate file .
this is my index.scala.html
#(message: String)
#navigation = { navigation html code}
#header = {<header> html code</header>}
#services = {
<section id="services"><!--html code for reference-->
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Services</h2>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-shopping-cart fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">E-Commerce</h4>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-laptop fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Responsive Design</h4>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-lock fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Web Security</h4>
</div>
</div>
</div>
</section>
}
#main("hello test")(navigation)(header)(services){ }
my application package controllers
import play.api._
import play.api.mvc._
object Application extends Controller {
def index = Action {
Ok(views.html.index("Ok"))
}
}
my routes
GET / controllers.Application.index
I wanted header to be in same file ., make #services #portfolio into different different files and call them as one page web page dynamically.
I know one solution. You have to create one file per function.
navigation.scala.html
#()
navigation html code
header.scala.html
#()
<header> html code</header>
And other.
You can create it in separate package/folder (mainscala) and import all files:
#import views.html.mainscala._
And add brackets:
<html>
<body id="page-top" class="index">
#navigation()
#header()
....
</body>
</html>
Related
I know this question might be asked so many times, but i couldn't find the one.
I want to put two h3 tag and 1 div containing 5 rating stars in one line, i don't know how to achieve that.
which css style can be added to achieve this?
Here is the code:
<h3>Shop Name</h3>
<div>
<i class="fa fa-star active"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<h3>64 Sales</h3>
Use a FlexBox
.row {
display: flex;
align-items: center;
}
h3 {
margin-left: 15px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<h2>Shop Name</h2>
<div class='row'>
<div>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</div>
<h3>64 Sales</h3>
</div>
I'm using Bootstrap 4 and am trying to use a card based layout to display my stores.
I have a location marker that's supposed to come over the store and on the same line, floating to the right, I want a 5 star rating. (Icons from font-awesome)
However, whenever I use float:right on the ratings they vanish. (I assume underneath the image)
Anyone have a clue as to how to fix this?
<div class="card">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/a/a2/Mon_Ami_Boulangerie_(8119944759).jpg" alt="Card image cap">
<div class="card-block">
<div class="stores-card-img-overlay-text">
<p>
<i class="fa fa-map-marker" aria-hidden="true"></i> Hasselt
<span class="rating">
<i class="fa fa-star" aria-hidden="true" style="color: yellow;"></i>
<i class="fa fa-star" aria-hidden="true" style="color: yellow;"></i>
<i class="fa fa-star" aria-hidden="true" style="color: yellow;"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</span>
</p>
</div>
<div class="test-shizzle">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</div>
<h4 class="card-title">De bakkerij testshop</h4>
<p class="card-text">Vlees / vis / Gevogelte / Charcuterie / Salades / Soep / Kaas</p>
<p class="card-search-text">14 appels in gamma!</p>
</div>
</div>
And the css to raise the .stores-card-img-overlay-text over the image and float the .rating span:
.stores-list .stores-card-img-overlay-text {
color: #fff;
margin-top: -50px;
}
.stores-list .stores-card-img-overlay-text .rating {
float: right;
}
Thanks in advance!
Update 2018 for Bootstrap 4.0
You can use the Bootstrap float-right class to pull the span right..
<div class="card">
<img class="card-img-top img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/a/a2/Mon_Ami_Boulangerie_(8119944759).jpg" alt="Card image cap">
<div class="card-block">
<div class="stores-card-img-overlay-text">
<p>
<i class="fa fa-map-marker" aria-hidden="true"></i> Hasselt
<span class="rating float-right">
<i class="fa fa-star" aria-hidden="true" style="color: yellow;"></i>
<i class="fa fa-star" aria-hidden="true" style="color: yellow;"></i>
<i class="fa fa-star" aria-hidden="true" style="color: yellow;"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</span>
</p>
</div>
<div class="test-shizzle">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</div>
<h4 class="card-title">De bakkerij testshop</h4>
<p class="card-text">Vlees / vis / Gevogelte / Charcuterie / Salades / Soep / Kaas</p>
<p class="card-search-text">14 appels in gamma!</p>
</div>
</div>
http://codeply.com/go/60n8Prld36
Idiot that I am I did not realise I could just the the .card-img-overlay class provided by Bootstrap. >_>
I've got a collection of points that I'm displaying, I'm floating them all left, but if the text is too much in the one above it forces there to be a space appear. Can't figure out what's causing this, does anyone have any ideas?
HTML:
<div class="all-the-screen checkmark-move">
<div class="contain-inner">
<div class="checkmark-outer">
<div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Water Included</div></div>
<div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Gas Included</div></div>
<div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Electric Included</div></div>
<div class="clearfix"></div>
<div class="read-more-show noselect">Show More</div>
</div>
</div>
</div>
CSS:
.checkmark-outer {
width:92%;
margin-left:4%;
margin-right:4%;
}
.checkmark-move {
margin-top:18px;
}
.checkmark-inner {
overflow: hidden;
font-family: 'Source Sans Pro Regular';
line-height:24px;
vertical-align: middle;
padding-left:4px;
padding-right:20px;
padding-top:4px;
}
.checkmark-33 {
width:33.33%;
float:left;
margin-bottom:6px;
}
.checkmark-icon {
float:left;
}
.icon-background {
color: #8d1e22;
}
.icon-text {
color: #ffffff;
}
Problem getting
Okay, since you are already familiar with the clearfix concept, you are using it wrong. Change your code this way, to include the floated elements inside the .clearfix:
<div class="clearfix">
<div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Water Included</div></div>
<div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Gas Included</div></div>
<div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Electric Included</div></div>
</div>
Adding height is a hacky way. Use the clearfix properly to nest the floated items.
And also on a side note, use <i> tag to display icons and not <div> tags. It works, but it is not semantically correct. A <div> should be used only for a division or a section.
Give min-height to each checkmark wrap i.e in your case .checkmark-33
Example-
.checkmark-33{min-height:50px /*This should be the max-height of your longest checkmark*/}
Currently my html looks like this:
<div class="col-md-4 text-center">
<i class="fa fa-2x fa-facebook wow bounceIn social"></i>
<i class="fa fa-2x fa-twitter wow bounceIn social"></i>
<i class="fa fa-2x fa-google-plus wow bounceIn social"></i>
</div>
I tried doing the following CSS and nothing happened:
fa-facebook:hover {
color: #006b33;
}
I'm totally new to font awesome, so any help would be appreciated!
You've got a typo - fa-facebook needs the . in front of it, since it's a class selector.
.fa-facebook:hover { ... }
Just write-
.fa-facebook:hover {
color: #006b33;
}
Since you are using a 'class' you have forgotten to write '.'(dot) before the class name.
If it would have been an 'id' then use '#'(hash) instead of the dot. The rest would be the same.
I am newbie in Bootstrap & HTML.
In my HTML I have a container and a row with 3 columns inside. In my situation, the title of the last section is way longer than others and needs to be displayed in 2 lines.
Because of this, the text of this section is in lower position than it is in other sections.
My question: Is it possible to make all of these texts after headers to be vertically in the same position?
HTML Code example:
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">MAIN_TITLE</h2>
</div>
</div>
<div class="row text-center">
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_1</h4>
<div class="text-muted eqHeight"> TEXT_1</div>
</div>
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_2</h4>
<div class="text-muted eqHeight"> TEXT_2</div>
</div>
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_3</h4>
<div class="text-muted eqHeight"> TEXT_3</div>
</div>
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_4</h4>
<div class="text-muted eqHeight"> TEXT_4</div>
</div>
</div>
</div>
This is how it looks like:
include jQuery and just write javascript for finding and setting the height of bigger one.
function max-height(){
var height=0;
var mHeight=0;
$('.service-heading').each(function(){
height = $(this).height();
if(height>mHeight)
mHeight = height;
});
$('.service-heading').height(mHeight);
height=0;
mHeight=0;
}
then call this function on ready() and resize()
$( document ).ready(function() {max-height();});
$( window ).resize(function() {max-height();});
in your code, text is aligned to center. i have removed it. check comment. then in the long text of title_title_title..so on, i have provided a space which encodes as newline character.
In the column setup, you have provided 'col-md-3' for three time, which makes it three-fourth of the width. so changed it to " col-md-3 , col-md-3 , col-md-6".
check out this.
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h2 class="section-heading">MAIN_TITLE</h2>
</div>
</div>
<div class="row "> // removed text-center
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_1</h4>
<div class="text-muted"> TEXT_1</div>
</div>
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_2</h4>
<div class="text-muted"> TEXT_2</div>
</div>
<div class="col-md-6"> // here col-md-3 changed to col-md-6
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE _TITLE_TITLE_TITLE_TITLE_ TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_3</h4> // here provided with a space.
<div class="text-muted"> TEXT_3</div>
</div>
</div>
</div>
Changed answer: Now that I get what you're asking here, I would recommend using eqHeight library (jQuery). It works like a charm with Bootstrap and what it does is that it automatically calculates the height of the tallest element and adjusts the height of others to same.
In this case you could do the following:
<div class="row">
<div class="col-md-4">
<i class="service-heading eqHeight">Content here</i>
<i>More content here!</i>
</div>
<div class="col-md-4">
<i class="service-heading eqHeight">Content here</i>
<i>More content here!</i>
</div>
<div class="col-md-4">
<i class="service-heading eqHeight">Content here</i>
<i>More content here!</i>
</div>
</div>
The point is to make the eqHeight library point to the .eqHeight class and make it calculate the upper elements (in this case .service-heading classes) to be the same height.
This might require an additional CSS, but shouldn't be more than just height and max-height properties.
Vertical positioning is a slight problem with responsive design. Another solution for this would be of making an additional row below the existing one and setting the same cols in there, but that of course doesn't work when the site breaks up for mobile.