I want to create custom styling for my form elements. Therefore I have to add a parent element to each input and select element. The parent element will contain the CSS classes for the styling. Example:
<div class="o-form-field is-valid">
<input formControlName="foo">
</div>
<div class="o-form-field is-invalid">
<input formControlName="bar">
</div>
<div class="o-form-field has-error">
<input formControlName="baz">
</div>
I am looking for a solution where I can replace the outer DIV with a component that watched the child input state and figures out what classes are needed. Renders the DIV in it's template and transcludes the input element. So my form template would look something like this.
<form-field-container>
<input formControlName="foo">
</form-field-container>
<form-field-container>
<input formControlName="bar">
</form-field>
<form-field-container>
<input formControlName="baz">
</form-field>
I am using Reactive forms.
Related
I have this html:
<div class="entry-content">
<div class="job_listings" data-location="" data-
keywords="" data-show_filters="true" data-
show_pagination="false" data-per_page="10" data-
orderby="featured" data-order="DESC" data-categories=""
>
<form class="job_filters">
<div class="search_jobs">
<div class="search_keywords">
<label for="search_keywords">Keywords</label>
<input type="text" name="search_keywords"
id="search_keywords" placeholder="Keywords" value=""
/>
</div>
<div class="search_location">
<label for="search_location">Location</label>
<input type="text" name="search_location"
id="search_location" placeholder="Location" value="" />
</div>
I want to place the label Where? before location and What? before keywords using css.
Tried:
label[What?]:before {
content: "search_location";
color: green;
}
Didn't work.
At the moment the label location listed in my html shows up as a placeholder, not a label- likewise for the label search keywords This is fine but i would like those placeholders replacing with, for location London, Berlin, Bristol... and for search keywords Chef, Cleaner, Manager...
It's perhaps clearer if you view at: https://adsler.co.uk/jobs/
Couldn't you just place the label with html? Like this
<div class="entry-content">
<div class="job_listings" data-location="" data-
keywords="" data-show_filters="true" data-
show_pagination="false" data-per_page="10" data-
orderby="featured" data-order="DESC" data-categories=""
>
<form class="job_filters">
<div class="search_jobs">
<div class="search_keywords">
<label style="color: green;">What?</label>
<label for="search_keywords">Keywords</label>
<input type="text" name="search_keywords"
id="search_keywords" placeholder="Keywords" value=""
/>
</div>
<div class="search_location">
<label style="color: green;">Where?</label>
<label for="search_location">Location</label>
<input type="text" name="search_location"
id="search_location" placeholder="Location" value="" />
</div>
Based on the HTML snippet you've provided, your CSS selector label[What?]:before is not going to resolve to anything. Square brackets [] are used to select elements based on one of their attributes (see attribute selector definition). You appear to be trying to pass in a desired value (which doesn't exist yet) as an attribute selector, which is impossible.
Looking at the site, the other trouble you're having is that the labels themselves have been hidden. This is currently in your CSS, so will need to be changed or otherwise overridden:
.job_filters .search_jobs div label {
display: none;
}
Then, as already suggested by Mr Lister, something like this will get you on the right track. I've tested in the browser on your site and it works once the labels have been unhidden:
label[for="search_location"]:before {
content: "Where?";
}
label[for="search_keywords"]:before {
content: "What?";
}
I'm going to assume that your actual intention is for the labels to display but you want to change their existing values from "Keywords" and "Location" using only CSS? It's not achievable. You could use a bit of JavaScript to change the text content, but not by CSS with your current implementation.
When I was reading the documentation in Material Design Lite's official page, no class name is mentioned for the fixed label with a textbox. In case of textarea they have a solution. But same code like the following one is creating only placeholder instead of a label for input type = "text".
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="sample5">
<label class="mdl-textfield__label" for="sample5">Text lines...</label>
</div>
I haven't seen this documented anywhere but it was annoying me so I delved into the SCSS to see what I could do. No changes to CSS are required. I managed to solve it by doing the following:
Add the mdl-textfield--floating-label has-placeholder classes to the outer <div> element.
Add a placeholder attribute to the <input> element, it can contain a value or remain empty; either way it will still work.
This will force the label to float above the input, instead of acting as a placeholder.
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label has-placeholder">
<input class="mdl-textfield__input" type="text" id="sample5" placeholder="">
<label class="mdl-textfield__label" for="sample5">Text lines...</label>
</div>
I'm using a paid template, and I'm trying to apply it to the project (it's working, but not good to the eye)
This is the code
<input type="checkbox" name="checkbox_demo_mars" id="checkbox_demo_4" data-md-icheck checked />
<label for="checkbox_demo_4" class="inline-label">Outside vue</label>
<div id="vm_settings">
<input type="checkbox" name="checkbox_demo_mars" id="checkbox_demo_4" data-md-icheck checked />
<label for="checkbox_demo_4" class="inline-label">Inside VM</label>
<template v-if="1">
<input type="checkbox" name="checkbox_demo_mars" id="checkbox_demo_4" data-md-icheck checked />
<label for="checkbox_demo_4" class="inline-label">Inside if</label>
</template>
<template v-for="setting in settings">
<div>
<input type="checkbox" name="checkbox_demo_mars" id="checkbox_demo_4" data-md-icheck checked />
<label for="checkbox_demo_4" class="inline-label">Inside for</label>
</div>
</template>
<button v-on:click="saveSettings">Save</button>
</div>
This is how it is outputed to the browser checkbox not having the styles it should
Any way to fix it?
Customized checkboxes are not merely styled with CSS, they are proxied: the real checkbox widget is hidden and other elements are inserted and styled in their place.
As such, there must be some call that examines the HTML and does the widget replacement. You need that to happen to each element that gets inserted. You do that by writing a wrapper component. Typically, in its mounted hook, you would apply the initialization of the widget to this.$el (or something inside it).
I am using the angular drag & drop directive on my divs.
I am also using Bootstrap CSS paneling. The panel header is what I am using as the dnd dragHandle.
<div class="panel-heading dragHandle">
<h4>Click & drag here to move</h4>
</div>
I want the entire div to be draggable based on the header, but once inside the div (where text is displayed), I am using the directive dnd-nodrag. This currently works as you are not able to drag the div when the cursor is inside and not on the panel header; however, I would like to be able to copy the text inside the div.
<div dnd-nodrag class="panel-body" draggable="true">
<p> THIS IS THE TEXT I WANT TO COPY </p>
</div>
As it seems to me, the nodrag directive only allows selection/copying of text inside of an input element. I need to be able to copy the plain text from the div.
Both of the above code snippets are nested inside of a div with the class "panel" and the dnd-draggable directive.
Any work arounds? Any directives I am missing? Please help. Thanks ahead!
Also -- I have tried adjusting the user-select styling in the CSS with no luck.
My attempt:
<div class="panel-body" style="-webkit-user-select: all">
<p> THIS IS THE TEXT I WANT TO COPY</p>
</div>
This issue has been reported in the bugzilla,
Issue Link : https://github.com/react-dnd/react-dnd/issues/178
https://bugzilla.mozilla.org/show_bug.cgi?id=195361
https://bugzilla.mozilla.org/show_bug.cgi?id=800050
However I've fixed this issue using a work around,
When you inspect the Div element, you'll see the below code having draggable attribute set to true hence in firefox you cannot select the text using mouse cursor.
<li ng-repeat="item in models.lists.A" dnd-draggable="item" dnd-moved="models.lists.A.splice($index, 1)" dnd-effect-allowed="move" dnd-selected="models.selected = item" ng-class="{'selected': models.selected === item}" class="ng-scope" draggable="true">
<div dnd-nodrag="" draggable="true">
<div class="theheader" dnd-handle="" **draggable="true"**>A header</div>
<div class="thebody">
Selecting test works on Chrome/Safari. Doesn't work on Firefox/Edge
<input type="text" ng-model="item.label" class="ng-pristine ng-valid">
</div>
</div>
</li>
Workaround :
in html,
<input type="text" ng-model="item.label" class="ng-pristine ng-valid"
ng-click="vm.disableDrag()" ng-blur="vm.enableDrag()">
in JS file,
/**
*find li and disable the draggable feature, so the input can be edited using mouse in firefox
*/
vm.disableDrag= function($event) {
var $li = $event.currentTarget.parentNode;
angular.element($li).attr("draggable", false)
}
/**
* find li element and Enalbe the draggable feature, on blur of the editable input
*/
vm.enableDrag = function($event) {
var $li = $event.currentTarget.parentNode;
angular.element($li).attr("draggable", true)
}
I was wondering how could you set height of an image to the neighboring elements height. So, essentially I want to have it like this:
[div] [img]
Other than javascript I can't see a way how can I do this. So, instead of using js can I just use CSS?
Thank you
Code so far(nothing special):
<div style="text-align:right;">
<label for="file-upload">Choose file</label>
<img><!-- Updates dynamically using js-->
<input id="file-upload" type="file" name="photo"/>
<input type="submit" value="Upload Image" name="submit" />
</div>
In order to style neighboring elements in CSS you can use adjacent selector(plus sign).
As in following:
label + img{height:300px}
That will target img in your code "after" any label.
JSFiddle