How to set a hidden style to a spring:message tag - css

I am using the spring:message tag to basically display a label over an input field.
Example:
<div class="col-md-3">
<spring:message code="referral.common.dateInterview"/><br>
<myui:calendar title="Max Date of Interview" path="maxDateInterview" bootstrapped="true" placeholder="${messages['common.uTo']}" inputCssClass="form-control" />
</div>
Which renders like this:
I want the message code to remain in the code, but hidden to the user like when you set any label to style="display:none". I don't know how to set this attribute on a spring message tag.
Is there a way to hide a spring message to the user? I don't want the user to see the label "Date of Interview" above the input field.

Spring's message tag doesn't provide attribute you need. All it does is rendering text retrieved from message bundle. If you want to hide it by display:none you should wrap it in some HTML tag and apply hiding style on this outer tag.
It could look like this:
<div class="col-md-3">
<div class="hidden">
<spring:message code="referral.common.dateInterview"/>
</div>
<myui:calendar title="Max Date of Interview" path="maxDateInterview" bootstrapped="true" placeholder="${messages['common.uTo']}" inputCssClass="form-control" />
</div>
CSS:
.hidden {
display: none;
}

Related

Force browser to display Element as text

I got this weird problem:
I get content that is dynamically built. In this special case I also get the element "input" as content, which is then displayed directly by the browser as an element.
What I get:
<div class="search_result_content"> this is just text, but the code <input variable="" name=""> displays as an element
What i need:
You may want to add 'type="text"', so total would be like
<input type="text" name="" value=""/>
Else if the input needs to be added to a (like) 'span' or 'div', i would suggest JS or jQuery
$(document).ready(function() {
$(".search_result_content").append('<input variable="" name="">');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search_result_content"> this is just text, but the code </div>
u insert the input tag dynamically in this scenario, after inserting convert it into html format

checkbox always created with opacity:0

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.

Django Datepicker form nicely above table view - bootstrap css issue

I have a Django app, which Im trying to have a datepicker search form on top of the table nicely.
I am trying to accomplish an arrangement something like this:
But I am getting like this:
The template html:
....
<div class="panel-body">
<div class="row">
<form action="{% url 'employee-attendance_search_date' %}" method="POST" enctype="multipart/form-data">
{% csrf_token %}
{{ attendance_search_date_form }}
<button type="submit" class="btn btn-primary">Search</button>
</form>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
....
forms.py
class AttendanceDateSearch(forms.Form):
search_date = forms.DateField(label='Date', required=False, widget=DateTimePicker(options={"format": "YYYY-MM-DD"}))
I'm using Datepicker for the search field. https://github.com/nkunihiko/django-bootstrap3-datetimepicker
Can someone help fix that html/bootstrap code to make that sort of arrangements?
By default your input and your label are setup to work as display: block, so they are always width: 100%.
If you just want them to arrange side by side(label->input->button). You have to set them to display: inline-block. Therefor the elements are only going to use the space that is needed to display them.
Afterwards you can just set margin to the elements to make spaces. Also you should consider, to set a width to the input element in pixels, otherwise it will be very small.

Copy text from a draggable angular-dnd-list div

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)
}

Can you add CSS to a Dynamic editable area based on an input label value

I am using a CMS system that allows you to edit multiple content areas inside the main space (like all of them). What I am trying to do is for each editable content area I want to show a certain background color. The Main-Content = white and the right rail would be red when editing them.
Since everything is generated on the fly once the edit button is clicked, and everything between the two are are the same besides a input value, I am trying to say if the input value = main content show white if the value is right rail show red on the editor's body tag #tinymce.mceContentBody. I can only use CSS and I can not add to the HTML (so no adding IDs and classes).
Below is a cut out of some of the code generated. If you scroll through it, you will see the line <input id="label" type="hidden" value="Main-Content" name="label"></input>. That is the only thing that is different among the two editable areas. One is Main-Content and the other is Right-Right(not shown below). Can this be done? Can I drill down - The only thing I can think of is using that label value, but I am not sure how to code that and if it possible to say it is the parent of the editable area. I tried doing something like this - input[value="Main-Content"] #tinymce.mceContentBody {background-color:#FFF;} This failed and I am sure I am coding it incorrectly, but I think there might be something like this that will work.
NOTE this is the code and can not be changed at all -
<form id="wysiwyg_form" method="post" action="/servlet/OX/iesave">
<input id="site" type="hidden" value="test-email" name="site"></input>
<input id="path" type="hidden" value="/training/eo/Erick-Test_delete.aspx" name="path"></input>
<input id="newPath" type="hidden" value="/training/eo/Erick-Test_delete.aspx" name="newPath"></input>
<input id="label" type="hidden" value="Main-Content" name="label"></input>
<input id="dest" type="hidden" value="preview" name="dest"></input>
<textarea id="text" rows="1" cols="1" name="text" style="display: none;" aria-hidden="true"></textarea>
<span id="text_parent" class="mceEditor defaultSkin" role="application" aria-labelledby="text_voice">
<span id="text_voice" class="mceVoiceLabel" style="display:none;"></span>
<table id="text_tbl" class="mceLayout" cellspacing="0" cellpadding="0" role="presentation" style="width: 100px; height: 100px;">
<tbody>
<tr class="mceFirst" role="presentation"></tr>
<tr>
<td class="mceIframeContainer mceFirst mceLast">
<iframe id="text_ifr" frameborder="0" src="javascript:""" allowtransparency="true" title="Rich Text AreaPress ALT-F10 for toolbar. Press ALT-0 for help" style="width: 1000px; height: 703px; display: block;">
#document
<!DOCTYPE >
<html>
<head xmlns="http://www.w3.org/1999/xhtml"></head>
<body id="tinymce" class="mceContentBody oucampus-wysiwyg" contenteditable="true" onload="window.parent.tinyMCE.get('text').onLoad.dispatch();" dir="ltr">
<p>This is where the content gets displayed - I want this BG to be white and be red when the label above is right rail</p>
The way to accomplish this is to use the 'wysiwyg-class' attribute in the either the editor tag inside of your editable regions. That class will be added to the node of the TinyMCE editor and then one css can modify the margins, width, height position of the body based on the class
body.main_content { }
body.left_column { }
<!-- com.omniupdate.div ....
<!-- com.omniupdate.editor ... wysiwyg-class="left_column" ...

Resources