Trying to display tooltip via ng-content. But it is not working. If the ng-content is outside to div which holds the for loop, then it is working and displaying the tooltip by appending to the div - but the problem is tooltip should be at end of the sentence.
aligned-label component template
<div class="aligned-label">
<div *ngFor="let label of getLabels()" [innerHtml]="label">
<span ng-bind="label">
<ng-content></ng-content>
</span>
</div>
</div>
check-box component template
<div class="control__content">
<aligned-label class="control__label" [labels]="labelText">
<ng-template #popTemplate>
<span [innerHtml]="tooltipText"></span>
</ng-template>
<span *ngIf="tooltipText" class="mdi mdi-information" [tooltip]="popTemplate" container="body"></span>
</aligned-label>
</div>
labeltext, tooltipText are input to checkbox component
innerHTML is replacing the HTML of you span and thats why you don't have the ng-content anymore. Are you sure you want to have that innerHTML there?
Related
Using AdminLTE template for creating dashboard layout with ANGULAR 5 + bootstrap 3.4,
In one of the components I have to align image, title and a dropdown in a row which when resized causes the dropdown to overlap the text content of title.
full-page view :
resized or minimized browser:
HTML snippet:
<div class="col-md-4"> //---> entire layout split between 3 boxes
<span class="info-box-icon-sm"> //---> adds float:left property for the icon
<i class="fa fa-search" id="escalatedIcon"></i>
</span>
<h4 >Search Requests</h4>
<div class="box-select pull-right">
<select class="ng-untouched">
<option class="select-bg-white" value="country">
country
</option>
</select>
</div>
</div>
I've tried adding individual div's to each element & then add boostrap "col" sizing but the drop down always seems to be overlapping the title, could I be simple as missing something since I'm a beginner to responsive designing?
Appreciate your response
What are you trying to achieve? How should the layout be?
The problem is in css of your h4, it's not formatted. h4 is inline, so it will treated like common text.
<div class="col-md-4"> //---> entire layout split between 3 boxes
<span class="info-box-icon-sm"> //---> adds float:left property for the icon
<i class="fa fa-search" id="escalatedIcon"></i>
</span>
<div style="white-space: normal;"> <-- give css
<h4 >Search Requests</h4>
</div>
<div class="box-select pull-right">
<select class="ng-untouched">
<option class="select-bg-white" value="country">
country
</option>
</select>
</div>
</div>
is it set to nowrap? and check the overflow of the text. Better to wrap h4 in a div so you can set the overflow and wrap text
normal Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default
nowrap Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered
pre Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML
pre-line Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks
pre-wrap Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit
I need to style a span element but only when a child element in a preceding sibling div element is active (i.e. a radio button has been checked).
I cannot amend the code. Can only use CSS.
Any thoughts?
<label class="One">
<span class="Two">
<div class="Three">
<input class="Four" type="radio">
<a class="Five ui-state-default"></a>
</div>
<span class="Six">Don't highlight this</span>
</span>
</label>
<label class="One">
<span class="Two">
<div class="Three">
<input class="Four" type="radio">
<a class="Five ui-state-active"></a>
</div>
<span class="Six">Highlight this</span>
</span>
</label>
need to highlight span.Six but only when a.Five has "ui-state-active" shown.
An alternative, if easier, is I could instead highlight the label element (i.e. the second "label.One" above) but again only if the child element 3 levels down is "active".......
Appreciate the help
Given the conditions that you cannot amend the code and you have to use CSS only, the expected result is not possible. You can either use Javascript or modify the HTML.
But, you can take the help of pseudo elements to nearly achieve what you want. The content of pseudo-elements can be changed based on the CSS rules.
input:checked~a:after {
content: "I am active";
display: block;
color: red;
}
Here is the demo of what I am suggesting:
http://jsfiddle.net/GCu2D/3626/
You can style the pseudo elements in any manner you want.
In case of javascript ,you can start from here:
$(document).ready(function() {
$("input").on("change", function() {
var elem = $(this);
elem.parents("label:first").find(".Six").toggleClass("active")
});
});
Demo: http://jsfiddle.net/GCu2D/3628/
I have this simple user profile -https://jsfiddle.net/mt15199/fgogetrh/
I want to pull the envelope icon on the left, so I put it on span element and added a class pull-left but icons dropped and overlapped the container. Without this span element with pull left class the envelope icon and other icon sitting inside of div.
How can I fix this?
<span class="pull-left">
<a data-original-title="Broadcast Message" data-toggle="tooltip" type="button" class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-envelope"></i></a>
</span>
Whenever you are using float don't forget to use clear or else element will overlap.
See demo
Use clearfix class or clear:both; after floated element
use
<div class="clearfix"></div>
or
<div style="clear:both;"></div>
First example is from bootstrap having same style given in second one.
I have html code that I cannot change.
I cannot use JS for help. So the only option is CSS. example here:
https://jsfiddle.net/4gKPL/
HTML:
<!-- code for input -->
<div class="form-group complete">
<label>label for text input</label>
<input type="text"/> <span class="error-message">This is an error message</span>
</div>
<!-- code for dropdown -->
<div class="form-group complete">
<label>label for select input</label>
<div class="custom-selectbox custom-selectbox-form">
<select name="sth" required>
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</select> <span class="selectedValue"> </span>
<span class="is-visually-hidden">select to open the list</span>
</div> <span class="error-message">This is an error message</span>
</div>
CSS:
.complete:after {
content:'OK';
}
I need to display additional content (in this example 'OK') for input fields but not for select.
Spans after interactive components are optional so don't have to exist.
Any idea about how define this selector?
Since you can't use :after on input elements, all I can think of is a really hackish solution: select the element following and insert a :before pseudo element in front of it.
.complete input[type="text"] + .error-message:before {
content:'OK';
}
See this jsFiddle for a working example.
EDIT
The .error-message element's not always being present throws a wrench in this plan. You can make an unprefixed call to :before (+ :before), but then if the following element is hidden in some way, so will your OK message. And even if it is present, it picks up the styles of the element following. See this updated jsFiddle.
I'll leave this idea up so people can see it, but it doesn't look like it will work for your purposes.
Basically is what is says in the tin.
I have an input tag and independent javascript to control it. When they user is inserting data it changes one of its' classes automatically so that its color is changed by CSS which is defined elsewhere Until then everything is ok. Next: I want the whole div that contains that input to change color so that the user can be warned when something is wrong. There's a problem here: How can I select that div I want to select only using CSS?
Here's some code that works for the input:
input.wrongVal {
border-color: red;
background-color: red;
}
input.wrongVal:active{
background-color: white;
}
Here's the relevant code from the page:
<div class="infoinputContainer">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
How can I, with only CSS, select for styling the div shown here (and no other div) with, for instance, another background?
You can't do that with CSS. What you can do however is use Javascript to either change the class of the div container or wrap the div container into another div.
<div class="infoinputContainer invalid">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
or:
<div class="invalidInput">
<div class="infoinputContainer">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
</div>
You can't. Not with pure CSS.
CSS selectors only select/target children or descendants for performance purposes: if you could target :parent (like in jQuery) the browser would have to wait to render any of the page until it had processed all child nodes.
You'll have to use JavaScript instead.
You can't with just css.
What are you using to change the class when a user enters information? If it's javascript, you can use that to change the class of the parent (or grandparent) as well.