I am getting the html from backend including html tags. the problem is, when i use the
<div class="parent">
<h1>Main title</h1>
<content [innerHTML]="title"></content>
</div>
or
<div class="parent">
<h1>Main title</h1>
<div[innerHTML]="title"></div>
</div>
Both way, my css not works:
.parent > h2{
color:green;
font-family:sans-serif;
}
How to prevent content nor div additional elements from template?
Demo
You could modify your css to this.
.parent > * > h2 {
color: green;
font-family:sans-serif;
}
Hope this helps.
Related
I want to add different styles to differents parts of a line in HTML and then print that line together. Imagine i have the next line:
Hello my name is Bogdan and i live in Spain.
I managed to add different styles to the line, but i can't manage to put all the parts together with different styles applied to each one of them.
<!DOCTYPE html>
<html>
<head>
<style>
<style>
div{
}.bold{ font-weight: bold;
}
.normal{ font-weight: normal;
}
.italic{
font-style: italic;
}
.left{
text-align:left;
float:left;
}
.container{
letter-spacing:-1px;
width: 372px;
font-family: Monaco,monospace;
font-size:19px;}
.center{
text-align:center;
}
.underline{
text-decoration: underline;
}
.doubleFont{font-size:38px;}
</style>
</head>
<body>
<div class = container>
<div class=>
<div class=>Hello my name is Bogdan</div>
</div>
<div class="underline bold">
<div class=>and i live </div>
</div>
<div class="bold">
<div class=>in Spain</div>
</div>
<br>
</div>
</body>
</html>
Replace the divs with spans like that:
<span>Hello my name is Bogdan</span>
<span class="underline bold">and i live </span>
<span class="bold">in Spain</span>
Spans are inline elements and wrap on one line. Divs always go on next lines unless set otherwise. Also consider setting bigger width on .container class.
I place dgrid table into widget, but grid overlapped my toolbar. How to fix broken layout?
Here current layout for my custom widget:
<div data-dojo-type="desktop/users/UsersWidget">
<div data-dojo-type="dijit/layout/LayoutContainer">
<div data-dojo-type="dijit/Toolbar" data-dojo-props="region: 'top'">
<!-- Here buttons, separators, etc -->
</div>
<div data-dojo-type="desktop/grids/UsersGrid" data-dojo-props="region: 'center'"></div>
</div>
</div>
Also, CSS:
html, body, .layout-container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
index.html
<body class="Claro">
<div data-dojo-type="dijit/layout/LayoutContainer" class="layout-container" id="layoutContainer">
<div data-dojo-type="desktop/menus/MainMenu" data-dojo-props="region: 'top'"></div>
</div>
</body>
My widget initialized when user select one of main menu items and added as child of layoutContainer widget.
There is a div in my page that for show the error message.When I refresh the page,it will appear for a while then it disappear. I added v-cloak but it doesn't work.
this is the code, showErrorMsg is false
<div v-cloak v-show="showErrorMsg" style="z-index:100" class="h5_tips tips_error">
<i></i>
<p v-text="errorMsg"></p>
</div>
How to fix this?
Just include this code to your css file
[v-cloak] { display:none; }
http://vuejs.org/api/#v-cloak
Usage example:
<div class="xpto" v-cloak>
Hello
</div>
This directive will remain on the element until the associated Vue
instance finishes compilation. Combined with CSS rules such as
[v-cloak] { display: none }, this directive can be used to hide
un-compiled mustache bindings until the Vue instance is ready.
http://vuejs.org/api/#v-cloak
I faced the same issue, and it was due to a conflicting display property on my div. To solve it, I used the !important flag on the [v-cloak] as:
[v-cloak] {
display: none !important;
}
.my-class {
display: table-cell;
}
Vue.js - 2.3.4, I added the v-cloak on the app container, adding this on the parent container, I find your not repeating the code keeping it DRY.
HTML:
<div id="app" v-cloak>
Anything inside gets the v-cloak
</div>
CSS:
[v-cloak] {
display:none;
}
Codepen Example:
https://codepen.io/Frontend/pen/RjoKQm
I fixed this problem by rewriting the CSS and adding a class in the CSS file
CSS:
[v-cloak] .v-cloak--hidden{
display: none;
}
HTML:
<div v-show="showErrorMsg" style="z-index:100" class="h5_tips tips_error v-cloak--hidden">
<i></i>
<p v-text="errorMsg"></p>
</div>
If you are using CDN to get Vue and using Bootstrap CSS then the reason might be you are loading the Bootstrap CSS in the bottom of the body tag, moving it back to the head tag worked for me. Make sure that you keep that vueJS file in the button as it is.
<HTML>
<head>
All link and script tag here
</head>
<body>
<div id='app' v-cloak>
{{ something }}
</div>
<script src="app.js"></script>
</body>
I have a scenario where I've got a search form and below, the results with a v-if block, waiting for submit.
I changed the v-if to v-show, that seemed to help. I tried the v-cloak--hidden class but didn't work either (v-cloak is already styled to display: none). What did work apparently was to set the data results container display style to none and then when submitting the form (in the processForm method), setting the display to block and show all the results.
processForm() {
// reset page number on new search
document.getElementById("data-container").style.display="block"
this.pageNumber = 1;
this.remoteRequest();
},
Without that change, on a full page refresh I could still see the moustaches coming up. Here the full HTML page, simplified.
<div id="app" v-cloak>
<main class="main-section">
<form method="POST" class="p-4 text-center" #submit.prevent="processForm">
<button type="submit" name="button" class="btn btn-primary">
Find
</button>
</form>
<!-- Results -->
<div id="data-container" class="container-fluid pt-2 pb-4" style="display:none">
<div class="row">
<div class="col">
<div id="recordsContainer" v-show="totalInScreen > 0">
<div class="card mt-5" v-for="(result, index) in results" :id="'itm-'+index" :key="result.id">
<div class="card-body">
<div class="row">
<div class="col">
<h2 class="doctor-name">{{ result.doct_name }}</h2>
<h2 class="doctor-bio">Bio</h2>
<p>{{result.doct_bio}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
Unfortunately the above 2 answers didn't work for me as the problem was something else. Since this questions pops up #1 on Google, I thought I'd share my solution.
If you've defined a display css rule somewhere that's more specific, it will break the v-cloak functionality. However! Do not despair - simply copy this into your CSS file and it will work!
[v-cloak] .v-cloak--block {
display: block!important;
}
[v-cloak] .v-cloak--inline {
display: inline!important;
}
[v-cloak] .v-cloak--inlineBlock {
display: inline-block!important;
}
[v-cloak] .v-cloak--hidden {
display: none!important;
}
[v-cloak] .v-cloak--invisible {
visibility: hidden!important;
}
.v-cloak--block,
.v-cloak--inline,
.v-cloak--inlineBlock {
display: none!important;
}
I'm a beginner for web front-end design, using bootstrap to make a project prototype.
I want to do a product like this website
The features I want is
* expand carousel to full screen when visiting the website and then can scroll down to another div element.
I found this similar solution, but unfortunately it uses Carousel as the whole background.
To get the effect I want, I check the javascript src code and edit it.
modify this line (Shown on JSFIDDLE line 13 )
$('.carousel .item').css({'position': 'fixed', 'width': '100%', 'height': '100%'});
into this line (Shown on JSFIDDLE line 13 )
$('.carousel .item').css({'position': 'relative', 'width': $(window).outerWidth(), 'height': $(window).outerHeight()});
Yep, finally get the effect I want!! However, when the photo transition, a unexpected flicker appear, seems the photo is not at right location at first, then go to its right place immediately.
It's annoying when I see the content inside div below, like 1info or 2info.
here is the jsfiddle demo example for the issue.
I tried to use the solution like set z-index, but fail...
Can someone help me to solve this annoying problem? Thanks a lot!!
Here's a flicker-free version without any plugins:
HTML:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div id="slide1" class="fill">
<div class=" carousel-caption">
<h1>1</h1>
</div>
</div>
</div>
<div class="item">
<div id="slide2" class="fill">
<div class=" carousel-caption" >
<h1>2</h1>
</div>
</div>
</div>
<div class="item">
<div id="slide3" class="fill">
<div class=" carousel-caption" >
<h1>3</h1>
</div>
</div>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
}
.carousel, .item, .active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
.fill {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
#slide1 {
background-image: url('http://stylonica.com/wp-content/uploads/2014/03/Cute-Dog-Wallpaper.jpg');
}
#slide2 {
background-image: url('http://hdwallimg.com/wp-content/uploads/2014/02/White-Dog-Running-Wallpaper-HD.jpg');
}
#slide3 {
background-image: url('http://www.petfinder.com/wp-content/uploads/2012/11/122163343-conditioning-dog-loud-noises-632x475.jpg');
}
No additional javascript required, just make sure that the jquery and bootstrap.js files are linked in your page.
It seems to me that the class center-block is missing from the bootstrap 3 style sheets. Am I missing something?
Its usage is described here, http://getbootstrap.com/css/#helper-classes-center
It's new in the Bootstrap 3.0.1 release, so make sure you have the latest (10/29)...
Demo: http://bootply.com/91632
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="center-block" style="width:200px;background-color:#ccc;">...</div>
</div>
It works far better this way (preserving responsiveness):
<!-- somewhere deep start -->
<div class="row">
<div class="center-block col-md-4" style="float: none; background-color: grey">
Hi there!
</div>
</div>
<!-- somewhere deep end -->
http://www.bootply.com/0L5rBI2taZ
You have to use style="width:value" with center block class
center-block can be found in bootstrap 3.0 in utilities.less on line 12
and mixins.less on line 39
You can use class .center-block in combination with style="width:400px;max-width:100%;" to preserve responsiveness.
Using .col-md-* class with .center-block will not work because of the float on .col-md-*.
center-block is bad idea as it covers a portion on your screen and you cannot click on your fields or buttons.
col-md-offset-? is better option.
Use col-md-offset-3 is better option if class is col-sm-6. Just change the number to center your block.
A few answers here seem incomplete. Here are several variations:
<style>
.box {
height: 200px;
width: 200px;
border: 4px solid gray;
}
</style>
<!-- This works: .container>.row>.center-block.box -->
<div class="container">
<div class="row">
<div class="center-block bg-primary box">This div is centered with .center-block</div>
</div>
</div>
<!-- This does not work -->
<div class="container">
<div class="row">
<div class="center-block bg-primary box col-xs-4">This div is centered with .center-block</div>
</div>
</div>
<!-- This is the hybrid solution from other answers:
.container>.row>.col-xs-6>.center-block.box
-->
<div class="container">
<div class="row">
<div class="col-xs-6 bg-info">
<div class="center-block bg-primary box">This div is centered with .center-block</div>
</div>
</div>
</div>
To make it work with col-* classes, you need to wrap the .center-block inside a .col-* class, but remember to either add another class that sets the width (.box in this case), or to alter the .center-block itself by giving it a width.
Check it out on bootply.