html.erb template:
<div class="container">
<script type="text/x-handlebars" id="sentence">content</script>
</div>
but checked firebug, it becomes
<div class="container"></div>
<div id="ember299" class="ember-view">
blablabla.....
</div>
So, the problem is the script not included by container property
<body>
<script type="text/x-handlebars">
<div class="container">
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" id="sentence">
content
</script>
</body>
Template without id is application template.
application.html.erb
<div class="container" style="margin-top: 28px;">
<%= yield %>
</div>
index.html.erb
<script type="text/x-handlebars" id="sentence">content</script>
And then checked firebug, it becomes
<div class="container"></div>
<div id="ember299" class="ember-view">
blablabla.....
</div>
Use yield
, not {{outlet}}
Related
I'm working with Angular (v4.3.1) and Bootstrap (v4.0.0-alpha.6). A template contains two subcomponents like so:
<div class="card-deck">
<comp1></comp1>
<comp2></comp2>
</div>
Both subcomponent's templates have as root element's class the .card Bootstrap class.
<div class="card">
...
</div>
This, once compiled results in the following HTML
<div class="card-deck">
<comp1 _nghost-c3="">
<div _ngcontent-c3="" class="card">
...
</div>
</comp1>
<comp2 _nghost-c4="">
<div _ngcontent-c4="" class="card">
...
</div>
</comp2>
</div>
The problem is that the .card-deck styling doesn't get applyed properly if there is an element wrapping the .card elements.
A Bootstrap only example, the problem is strictly related to Bootstrap css and not Angular obviously.
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap#4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<!-- Displayed properly -->
<div id="deck-without-wrapper" class="card-deck">
<div class="card">
<div class="card-block">
<p>Card1</p>
</div>
</div>
<div class="card">
<div class="card-block">
<p>Card2</p>
</div>
</div>
</div>
<br>
<!-- NOT displayed properly -->
<div id="deck-with-wrapper" class="card-deck">
<div id="wrapper1">
<div class="card">
<div class="card-block">
<p>Card1</p>
</div>
</div>
</div>
<div id="wrapper2">
<div class="card">
<div class="card-block">
<p>Card2</p>
</div>
</div>
</div>
</div>
</body>
</html>
Anyone knows a way to get both the components structure and the styling working?
The wrappers are causing trouble because a div doesn't have any flex css properties, While the .card classes are using flex:1 0 0;
Option 1 (preferred): Apply the .card class to the angular host element wrapper, instead of the first child element.
I've not used angular, going by these docs you could set a class on the host element. Using #Component.host.
Or define some rules using angulars custom renderer.
I can't advice you on the best approach, I lack the knowledge on angular.
In the end you would want to end up with <comp1 _nghost-c3="" class="card">
Option 2 (not very sane): Pretend that the wrappers are cards,
and style them like a card would be styled.
I would advice against this.
It can cause troubles in the long run. IE newer bootstrap versions could change the css styling, and you might forget to update these custom rules.
.card-deck > div {
display: flex;
flex: 1 0 0;
flex-direction:column;
}
.card-deck > div:not(:last-child){
margin-right:15px;
}
.card-deck > div:not(:first-child)
{
margin-left:15px;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap#4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<!-- Displayed properly -->
<div id="deck-without-wrapper" class="card-deck">
<div class="card">
<div class="card-block">
<p>Card1</p>
</div>
</div>
<div class="card">
<div class="card-block">
<p>Card2</p>
</div>
</div>
</div>
<br>
<!-- NOT displayed properly -->
<div id="deck-with-wrapper" class="card-deck">
<div id="wrapper1">
<div class="card">
<div class="card-block">
<p>Card1</p>
</div>
</div>
</div>
<div id="wrapper2">
<div class="card">
<div class="card-block">
<p>Card2</p>
</div>
</div>
</div>
</div>
</body>
</html>
I am facing a problem regarding HTML5 and AngularJS when using ng-show/ng-hide.
Hereby I added the sample code for better understanding.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.value = true;
$scope.click = function(){
$scope.value = $scope.value ? false : true;
};
});
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-3" style="background-color:lavender;" ng-show="value">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
</div>
<button ng-click="click()" >Click</button>
</div>
</div>
In the class="row",there is 3 separate div equally divided rows. when the button click is triggered, the first row(div) will hide. But i don't know why the remaining 2 rows(divs) are changing in grid positions.
I don't know what is missing in my code. i want to display the rows in fixed grid position even if some other rows are hide or not.Correct me if i was wrong.
Thanks in advance.
Note: please Run code in snippet in full in Full Page for better view.
It happens because what ng-hide do is display: none and what you need is visibility:hidden. So solution for your problem will be to add class with visibility:hidden after click. You can define such class and use ng-class for this purpose or override .ng-hide class, but I suggest first option.
The simplest example:
HTML
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div id="firstCol" class="col-sm-3" style="background-color:lavender;" ng-show="value">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
</div>
<button ng-click="click()" >Click</button>
</div>
CSS
#firstCol.ng-hide{
display: block !important;
visibility: hidden;
}
and DEMO
https://plnkr.co/edit/rZEW2XgowDxGAqL1aBBv?p=preview
You can keep code like
<div class="row">
<div class="col-sm-3" style="background-color:lavender;" ng-show="value">.col-sm-3</div>
<div class="col-sm-3" ng-show="!value">...</div>
<div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
I can't trigger your error but I think I get it. Did you try ng-if instead of ng-show ? ng-if deletes from the DOM while ng-show only hides it
EDIT If you want to keep position of your grids, just do
<div class="col-sm-3" style="background-color:lavender;" ng-if="value">.col-sm-3</div>
<div class="col-sm-3 col-sm-offset-3" style="background-color:lavenderblush;" ng-if="!value">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavenderblush;" ng-if="value">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
If I use a container. For instance
and then I use position relative. Position relative will mess with the container by moving left and right.Wouldn't this cause render issues for devices when i'm specifying the grids and then moving the content around?
What would be the proper way to move the content without messing up the grids I setup with col-md-#/col-sm-#
HTML
<!DOCTYPE html>
<html ng-app='formApp'>
<head>
<title>Bicycle App</title>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href="app.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<div class='row'>
<div class='col-md-12'>
<i class="fa fa-bicycle" aria-hidden="true"><span> {{"Andy's Bike Shop"}}</span></i>
</div>
</div>
</div><!--Header Container-->
</div>
<div class="bikeSelector">
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6"><!-- end class not needed -->
<div class="chooseTitle">
Choose Your Bicycle
</div>
</div>
<div class="col-md-offset-2 col-md-10"><!-- you missed md from offset, end class not needed -->
Test
</div>
</div>
</div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>
CSS
.products {
position :relative;
left: 500px;
}
Your html is wrong in places for what you're trying to achieve.
Try this (not tested but should get you started)
<div class='row'>
<div class='col-md-offset-3 col-md-6'><!-- end class not needed -->
<div class="chooseTitle">
Choose Your Bicycle
</div>
</div>
<div class="col-md-offset-2 col-md-10"><!-- you missed md from offset, end class not needed -->
<div class="products">
{{bike.name}}
</div>
</div>
</div><!--bike controller row-->
Here's a bootply which is a great way to test before you add
please take a look at my sample code
<div class="container-fluid">
<section class="parallax-bg-1 text-center" style="background-image:url('https://killtheboredomdotcom.files.wordpress.com/2015/08/skyline-of-rome.jpg?w=1920&h=768&crop=1')">
<h1 class="">Welcome</h1>
<p class="lead">subtitle</p>
</section>
</div>
the picture is in parallax mode but take a look at the screenshot it still has padding.
im trying to achieve the same result as this site: http://remtsoy.com/tf_templates/traveler/demo_v1_7/index.html
JS Fiddle:
http://jsfiddle.net/uf9np3kq/
The default style of container-fluid has padding left and right of 15px. you can override the default behaviour by applying the following style:
.container-fluid{
padding: 0;
}
.container-fluid{
padding: 0 !important;
}
section.parallax-bg-1{
background-size: cover;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<section class="parallax-bg-1 text-center" style="background-image:url('https://killtheboredomdotcom.files.wordpress.com/2015/08/skyline-of-rome.jpg?w=1920&h=768&crop=1')">
<h1 class="">Welcome</h1>
<p class="lead">subtitle</p>
</section>
</div>
</div>
change
<div class="container-fluid">
....
</div>
To
<div class="container-fullwidth">
....
</div>
You might want to use the div class of jumbotron.
<div class="jumbotron">
<div class="container">
<h1>Welcome</h1>
<p>Subtitle>
</div>
</div>
It would look something like this: http://getbootstrap.com/examples/jumbotron/. Then you can apply the styles as you would like.
Just wrap your content in a div.row: http://jsfiddle.net/uf9np3kq/1/
Just swap your <section> and your .container-fluid. Assuming that your section has the background image. See updated fiddle below:
Fiddle
Current:
<div class="container-fluid">
<section>...</section>
</div>
Change to:
<section>
<div class="container-fluid">...</div>
</section>
Note: This also applies to .container not just .container-fluid
<p>if you using vb.net so please go **-Layout.chtml** and find</p>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
<p>and change it to the </p>
<div class="container-fluid">
<section>
#RenderBody()
</section>
</div>
<hr />
<div class="container-fluid">
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
**i hope this method usefull for you..**
I am having a problem with my web page, because I have a wrapper around all element of the page (header,navigation menu and content) when the content expands due to the amount of data to display it would go over the wrapper without pushing it down, but on IE7 it does expand the wrapper.
It is driving me crazy, and I can not figure out why it is doing this.
Sorry for the code, as it may have too many divs, but I dont know any other way to create round corner.
code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
*
{
padding:auto;
margin:auto;
text-align:center;
}
div
{
text-align:left;
display:block;
}
</style>
</head>
<body style="">
<form id="form1" runat="server">
<!--Main div container-->
<div style="background-image:url('Images2/Content/WrapTop.gif');width:1210px;height:18px;background-repeat:no-repeat;margin-top:10px;" ></div>
<div style="background-image:url('Images2/Content/WrapMid.gif');width:1210px;min-height:900px;display:block;background-repeat:repeat-y;">
<!--Menu container-->
<!--Heading-->
<div style="width:1210px;height:132px;background-image:url('Images2/Heading/Heading.gif');background-repeat:no-repeat;">
<div style="width:1046px;height:6px;background-repeat:no-repeat;"></div>
<div style="width:1046px;height:96px;background-image:url('Images2/Heading/tiltle.gif');background-repeat:no-repeat;"></div>
<div style="width:1046px;height:3px;display:block;"></div>
<!--Top Menu-->
<div style="width:1200px;height:25px;text-align:justify;padding-bottom:-10px;">
</div>
</div>
<!--Container of menu and subcontainer-->
<div style="width:1212px;min-height:750px;margin-top:60px;margin-left:15px;">
<!--Menu-->
<div style="width:274px;float:left;">
<div style="float:left">
<div style="width:272px;height:39px;background-image:url('Images2/menu/MenuTop.gif');color:White;"><asp:LinkButton ID="LinkButton1" runat="server" Text="Electronics" OnClientClick="FindSubCats(560864, 'SearchSubCatsOne');return false;" /></div>
<div id="SearchSubCatsOne" style="width:272px;height:auto;background-image:url('Images2/Menu/menuMid.gif');background-repeat:repeat-y;"></div>
<div style="width:272px;height:14px;background-image:url('Images2/Menu/menuBottom.gif');"></div>
</div>
<div style="float:left">
<div style="width:272px;height:39px;background-image:url('Images2/Menu/MenuTop.gif');"></div>
<div id="SearchSubCatsTwo" style="width:272px;height:auto;background-image:url('Images2/Menu/menuMid.gif');background-repeat:repeat-y;"></div>
<div style="width:272px;height:14px;background-image:url('Images2/Menu/menuBottom.gif');"></div>
</div>
<div style="float:left">
<div style="width:272px;height:39px;background-image:url('Images2/Menu/MenuTop.gif');"></div>
<div id="SearchSubCatsThree" style="width:272px;height:auto;background-image:url('Images2/Menu/menuMid.gif');background-repeat:repeat-y;"></div>
<div style="width:272px;height:14px;background-image:url('Images2/Menu/menuBottom.gif');"></div>
</div>
</div>
<!--Content Menu-->
<div style="width:802px;float:left;min-height:650px">
<div style="float:left;margin-left:10px;">
<div style="width:800px;height:37px;background-image:url('Images2/Content/contentTop.gif');"></div>
<div style="width:800px;min-height:650px;background-image:url('Images2/Content/contentMid.gif');background-repeat:repeat-y;display:block;">
<div id="Products" style="width:800px;min-height:650px;display:block;"></div>
</div>
<div style="width:800px;height:13px;background-image:url('Images2/Content/contentBottom.gif');"></div>
</div>
</div>
</div>
</div>
<div style="background-image:url('Images2/Content/WrapBottom.gif');width:1210px;height:15px;background-repeat:no-repeat;" ></div>
</form>
</body>
</html>
On quick look, it may be caused by the fact that you've got floated divs inside the wrapper which means they'll gladly float outside of it.
As a quick hack, add this as the last element inside your wrapper:
<div style="clear: both"></<div>
If that solves it, you can add a cleaner "clear: both" solution into your CSS.
You're probably looking for max-width or max-height, and for problems like this, you may want to take a look at overflow settings.
Also, FWIW, This code is going to be very hard for you to maintain if you continue to keep the CSS inline. You should be using classes and IDs with an external CSS file. That way, you can quickly change your entire site's design - plus the information only has to be loaded & cached once by the client browser.