DMXzone Bootstrap 3 Support Product Page
Not a problem
Design View Question
Reported 29 Jan 2014 10:37:00
1
has this problem
29 Jan 2014 10:37:00 Bruce Symons posted:
I am currently playing around with Bootstrap 3 particularly styling. I cant seem to see in design view some of my styling. For example if I select a cell, then create a custom css file, a media query then add a style such as background colour or image, border with radius I cant see it in design view. It is visible in live view however - text changes appear ok - what am I missing here as I am only doing what I used to do in the original Bootstrap. Replies
Replied 29 Jan 2014 11:47:59
29 Jan 2014 11:47:59 Teodor Kuduschiev replied:
Hello,
Can you please provide an example code you are applying your styles to, and how exactly your css styles for this element looks?
Can you please provide an example code you are applying your styles to, and how exactly your css styles for this element looks?
Replied 29 Jan 2014 20:59:21
29 Jan 2014 20:59:21 Bruce Symons replied:
Hi Teodore,
Here is the code for the simple page followed by the style sheet - the query is for max screen size 480px
The page
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="bootstrap/3/css/bootstrap.min.css" />
<link href="blue.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="ScriptLibrary/jquery-latest.pack.js"></script>
<script type="text/javascript" src="bootstrap/3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6" id="logo">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
</div>
</div>
</body>
</html>
The CSS style sheet
@charset "UTF-8";
@media screen and (max-width:480px){
.container .row #logo {
color: #E7191D;
background-color: #1CE15D;
}
}
Here is the code for the simple page followed by the style sheet - the query is for max screen size 480px
The page
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="bootstrap/3/css/bootstrap.min.css" />
<link href="blue.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="ScriptLibrary/jquery-latest.pack.js"></script>
<script type="text/javascript" src="bootstrap/3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6" id="logo">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
</div>
</div>
</body>
</html>
The CSS style sheet
@charset "UTF-8";
@media screen and (max-width:480px){
.container .row #logo {
color: #E7191D;
background-color: #1CE15D;
}
}
Replied 30 Jan 2014 09:49:16
30 Jan 2014 09:49:16 Teodor Kuduschiev replied:
Hello Bruce,
Not a problem with the extension actually.
The Dreamweaver Design View is not 'smart' enough to display this property, when a height is not specified for the container.
Not a problem with the extension actually.
The Dreamweaver Design View is not 'smart' enough to display this property, when a height is not specified for the container.
Replied 30 Jan 2014 10:42:24
30 Jan 2014 10:42:24 Bruce Symons replied:
It worked fine in the earlier bootstrap . Does this mean we have to specify heights in value or do you set it as auto
Replied 30 Jan 2014 21:19:41
30 Jan 2014 21:19:41 Bruce Symons replied:
Hi Teodore,
With all due respect I think this may be an extension issue!
There is not a layout extension I have which does not display the background property in a cell/div in design view. Unless of course I am missing something here.
When working with white text on a dark background not being able to have the background colour makes it impossible to edit in design view and that is the whole point of Dreamweaver and the great DMXZone extensions - So maybe this is something to look into further please - in the mean time I will have to go back to using the original Bootstrap when I need to use the background style in a cell/Div - Disappointing.
With all due respect I think this may be an extension issue!
There is not a layout extension I have which does not display the background property in a cell/div in design view. Unless of course I am missing something here.
When working with white text on a dark background not being able to have the background colour makes it impossible to edit in design view and that is the whole point of Dreamweaver and the great DMXZone extensions - So maybe this is something to look into further please - in the mean time I will have to go back to using the original Bootstrap when I need to use the background style in a cell/Div - Disappointing.
Replied 30 Jan 2014 21:30:11
30 Jan 2014 21:30:11 Teodor Kuduschiev replied:
Once again, Dreamweaver Design View is not the best way to preview your page. I investigated the issue and it comes that Dreamweaver sees a property of Bootstrap 3 framework: min-height:1px, as exactly 1px!
So.. you just need to add min-height:none; to your element and this will make the 'not so smart' design view a little more smarter.
So.. you just need to add min-height:none; to your element and this will make the 'not so smart' design view a little more smarter.
Replied 30 Jan 2014 21:42:37
30 Jan 2014 21:42:37 Bruce Symons replied:
Thanks Teodore appreciate your help and I understand that design view is just that for design and browsers are for preview
Thanks again!!
Thanks again!!