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.
Related
I added a user module to my project and I used the default Django user model for that.
I've to change the styling to suit my other pages. The background color is black. The problem is default labels and error messages (eg: "username", "password", "Enter the same password as before for verification") generated by Django is also black and not visible now. How to change the label colors so that they are visible again? I'm a newbie to both development & StackOverflow, apologies if I have used incorrect terms or tags in my question. Thanks in advance.screenshot of the login form (highlighted is my problem
This is my forms.py (users app)
from django.contrib.auth.forms import UserCreationForm
class CustomUserCreationForm(UserCreationForm):
class Meta(UserCreationForm.Meta):
fields = UserCreationForm.Meta.fields + ("email",)
this is from my login.html
<h2>Login</h2>
<div>
<form method="post" class="loginfrm">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Login" class="loginbtn">
</form>
</div>
I've figured it out, thanks to Mubashar Javed's comment.
<form method="post" class="loginfrm">
I had to apply the style to this class, any style I apply to this class, only affects the labels. Exactly what I wanted.
<style>
.loginfrm {
color: white;
}
</style>
you can see that my problem is now fixed.
We are building a dynamic table with Thymeleaf.
Some cells, of null values, are holding "-" sign, while cells with values hold some data from the object:
<td th:text="${person.getAddress()} ? ${person.getAddress().getCity() : '-'"}
So the current state is this:
<table border=1>
<tr><td>John</td><td>London</td></tr>
<tr><td>Paul</td><td>-</td></tr>
</table>
Now, we like to add a tooltip, that when hovering the relevant table cell, more data can be seen (e.g. the person's full address).
We found this CSS example for tooltip and we figure out our final result should be something like that:
<td class="tooltip">London
<div class="tooltiptext">
<div>Street: Green</div>
<div>Number: 123</div>
</div>
</td>
But when trying to implement it in Thymeleaf we got stuck.
This is what we tried:
<div th:switch="${person.getAddress()}">
<div th:case="null"><td>-</td></div>
<div th:case="*">
<td> // now what? how to both inject value and the sub divs? </td>
</div>
</div>
Another option we thought of is to create by concatenation the full HTML within a td th:text=...
But both of the ways seems very cumbersome.
You can use the safe navigation operator in combination with the elvis operator instead of your null check.
No need for switch or any logic like this. Create a couple extra tags and move your logic deeper into the html.
Don't use .getAddress(), you can just use .address for properties with correctly named getters/setters.
For example:
<td>
<span th:text="${person.address?.city} ?: '-'" />
<div th:unless="${person.address == null}" class="tooltiptext">
<div>Street: Green</div>
<div>Number: 123</div>
</div>
</td>
Without all the fancy stuff, you could also simply do something like this:
<td th:if="${person.address == null}">-</td>
<td th:if="${person.address != null}">
<span th:text="${person.address.city}" />
<div class="tooltiptext">
<div>Street: Green</div>
<div>Number: 123</div>
</div>
</td>
I am trying to get radio buttons on the same line. The closest solutions I have found so far are these:
Bootstrap 3: does form-horizontal work for radio buttons with a control-label?
Radio buttons Horizontal Alignment
But they do not use symfony. Is there a built in solution for symfony forms?
What would be the easiest way?
By the way, I still need some other radio buttons to be vertical.
<div class="row" style='margin-bottom: 5px'>
<div style='white-space:nowrap'>
<div class='col-xs-5'>
<div class='col-xs-5'>
{{ form_label(form.mNec, 'Necrotising enterocolitis', {'label_attr':{'style':'margin-top:3px'}})}}
</div>
<div class='col-xs-2' style='margin-top: 5px; margin-left: 120px'>
{{ form_widget(form.mNec, {'attr':{'style':'width:60px'}})}}
</div>
</div>
</div>
</div>
->add('mNec', 'choice', array(
'choices'=>array(
'absent'=>1,
'suspected'=>2,
'proven (positive x-ray)'=>3),
'choices_as_values'=>true,
'expanded'=>true))
So finally the answer is quite simple.
In form.html.twig
<table style="width:100%">
<tr>
<td>Some text</td>
<td>{{ form_widget(form.variable[0])}}</td>
<td>{{ form_widget(form.variable[1])}}</td>
<td>{{ form_widget(form.variable[2])}}</td>
</tr>
</table>
With Datatype.php
->add('variable', 'choice', array(
'choices'=>array(
'choice1'=>0,
'choice2'=>1,
'choice3'=>2),
'choices_as_values'=>true,
'expanded'=>true))
You can override a single form widget by using customizing an individual field
{% block _nameOfYourForm_mNec_entry_row %}
{% endblock %}
But by the way of you are using style attributes I think the problem is more related to a css problem.
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;
}
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" ...