I'm trying to add checkbox in my mvc form but it's always created having opcaity:0 in css
this my code where i add the checkbox
<div class="col-md-3 px-1">
<div class="form-group">
<label>Is Suspended</label>
#Html.CheckBox("IsSuspended", false, new { #checked = "checked", #class = "form-control "})
</div>
</div>
when i use inspect element in browser where i put my checkbox i found opacity:0
but i don't know why it's been added to my checkbox or if I use something wrong
<input class="form-control " id="IsSuspended" name="IsSuspended" type="checkbox"
value="true" style="position: absolute; opacity: 0;">
You have an extra piece of code in your project that is adding style="position: absolute; opacity: 0;". On my computer, I only show the input without the extra 'style'.
<input class="form-control " id="IsSuspended" name="IsSuspended" type="checkbox" value="true">
To find the source, use the inspect function in Google Chrome browser and in the Computed tab, click on a property to see where it originated. You will see the reason for the extra position and opacity styles.
Below is an example showing that an element's border-right-color was set by the .form-control class, which is defined in form-less file. You can do the same for position and opacity.
i found the problem that I'm using js library called icheck in my js files
i deleted it and now it's fine
For me, it was because I had given my checkboxes the class "tooltip", which has special meaning in bootstrap.
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.
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)
}
so I upgraded my site into responsive template, all done but stuck here!
so I know this is something very simple as a b c , but for the life of me cannot fig it out :*(
http://www.example.com/cards/holiday-greeting-cards.php
here on top right the search button with magnifying glass icon... how to make it work!
the other search button which says "search holiday cards"(which will be removed once this one starts working) is working fine...
can anyone please please help please
thanks in adv
This isn't perfect solution and it's a more of a hack, but it's really short and does its job.
Append this just after: <input type="text" placeholder="Search">
<input type="submit" style="
width: 30px;
margin-left: -40px;
opacity: 0;
">
If you add a class to your input box (you can also do an input find in search_box)
<div class="search_box pull-right">
<input type="text" class="search_input" placeholder="Search">
</div>
You can use jQuery to get the content (this example only reacts to the enter key)
$('.search_input')
.keypress(function(e) {
if(e.which == 13) { // if you press enter
window.location.assign('/cards/search-results-xmas.php?keywords=' + $('.search_input').val());
}
});
Was a bit unsure how else to word this, JavaScript is the main thing I NEED to learn but after putting hours and hours in i still can't write javascript code off the top of my head. I understand the syntax of just about everything but when it comes to integrating it with css or html I am clueless!
Heres the code:
HTML:
<div id="mydiv">
<input type="text" name="colorpicker">
<input type="submit" value="Submit">
</div>
JavaScript:
document.getElementById("mydiv").style.backgroundColor="colorpicker.Submit";
bare in mind i've had little experience with forms and inputs in html too.
Any reply would be much appriciated! Thanks!
The value for style.backgroundColor should be a string representing a color value used in CSS, which can be one of:
Color name such as red, green, pink, ...
Color hex code such as #ff0000 (or #f00), #00ff00, #ff00ff ...
rgb() or rgba() function such as rgb(255,0,0), rgb(0,255,0), ...
You also have to set up the click event handler for the button submit. Here are details:
HTML:
<div id="mydiv">
<input type="text" name="colorpicker"/>
<input type="submit" value="Submit"/>
</div>
JS:
var div = document.getElementById('mydiv');
div.children[1].onclick = function(){
div.style.backgroundColor = div.children[0].value;
};
Note that you can assign an id for each input field to get access to it in JS code, in the above code I use the children collection to access to them instead. The first input field is the first child of div, the second input field is the second child of div.
Demo
Also note that, since HTML5 (which has been supported by all the major browsers) you can use the color input field which can popup a real color picker dialog for the user to select and then you just need to handle the event onchange to get the selected color (via the value property) like this:
HTML:
<div id="mydiv">
<input type="color" name='colorpicker'/>
</div>
JS:
var div = document.getElementById('mydiv');
div.children[0].onchange = function(){
div.style.backgroundColor = div.children[0].value;
};
Updated Demo.
Use the form tag onsubmit method to call your JavaScript function.
I've been trying to get the default checkbox template written for my Boolean editors and I've run into an issue due to how MVC Razor renders multiple input elements for a single boolean model property.
I have this template defined:
#model Boolean?
<div class="check-box">
#Html.CheckBox("", Model.HasValue && Model.Value)
#Html.LabelForWithoutText(m => m, new object())
</div>
If I manually write out the HTML like:
<div class="check-box">
<input type="checkbox" title="Create?" value="true" name="check" id="chkCreate">
<label title="Create?" for="chkCreate"></label>
</div>
Everything works fine.
But when Razor renders my template on a Boolean property of a model the html is rather different. Due to how MVC renders other hidden inputs for posting booleans back to action methods.
The Razor version looks like this:
<div class="check-box">
<input type="checkbox" value="true" name="GloballyShare" id="GloballyShare" data-val-required="The GloballyShare field is required." data-val="true">
<input type="hidden" value="false" name="GloballyShare">
<label title="GloballyShare" for="GloballyShare"></label>
</div>
The problem is the extra hidden input. I don't want to change this behaviour as that will globally effect how MVC form work by default and I can't think of a way to deal with this in CSS.
So I'm wondering how this could be achieved. You can see a working example of the problem here:
Default CSS3 Checkbox Template in MVC
If you try it then remove the hidden input element and try it again the top most checkbox starts working the same as the bottom checkbox
I've just managed to fix the jsFiddle.
I changed the label selector from a + to a ~ and both checkboxes are now working:
.check-box input[type=checkbox]:checked + label {
Changed to:
.check-box input[type=checkbox]:checked ~ label {
Fixed jsFiddle