Try enclosing these fields in span tags with a css class and then adding a rule in the css template. This may look something like the following.
Add entry template:
<span class="2digit_number_field">[[Day1-1] ]</span>
...
<span class="2digit_number_field">[[Day1-2] ]</span>
...
CSS template:
.2digit_number_field input {width:5px;}
Hello Itamar, what I am doing wrong. In my add entry template I have:
<table border="0">
<tbody>
<tr>
<td><span class="Name_field">[[Name] ]</span></td>
</tr>
</tbody>
</table>
and at the end of the CSS template I have:
/***** Single View CSS *****/
.caption {
font-style: italic;
}
#singleimage {
width: 700px;
}
.Name_field input {width:5px;}
(The square parenthesis disappear so I put in the space)
Anyone? Thanks
I am trying to specify the width of the entry field following Itamar's instructions but it's not working. Can anyone look at what I have done and tell me why it's not working.
Tieku, it seems to work on the demo site so I'm not sure why it doesn't work for you (I trust that you clear the browser cache). Do you have any other css definitions their that may clash with this one?
Hello Itamar,
I went to the demo site, but it still does not work. Here is my Add Template:
<div class="defaulttemplate">
<table cellpadding="5">
<tbody>
<tr>
<td align="right" valign="top">Name:</td>
<td align="left"><span class="Name_field">[[Name] ]</span></td>
</tr>
</tbody>
</table>
</div>
And my CSS Template:
.Name_field input {width:5px;}
but the width does not change. And I cleared my browser cache.
Thanks
Ah, yes. That's because the width of the Text field type is inline styled and thus overrides any stylesheet definition. There is a recent tracker issue on this, in which I propose a hack for 1.9, but it should work also for 2.0 (I have to check though). In the meantime you can use javascript to work around, so simply add at the bottom of the Add template the following:
<script type="text/javascript">
document.getElementById('[[Name#id] ]').style.width='5px';
</script>
hth
... of course ... I'm so into just changing the code now that I forget some important workarounds.
How exactly do I use !important with my CSS?
Thanks (from a novice)
Try
.Name_field {width: 5px !important;}
With the internet no one is a novice anymore (apropo online learning ...). Just google css important and you'll find many explanations with examples.
Tried both !important and Javascript code but neither work. This is on a new installation of 2.0.2. Field width does not change? Also tried and demo.moodle.org
Select the page source of that part and post it here so that we could take a look at it.
Getting error trying to paste text of Page Source. "Error writing to database". Also cannot paste in text fiel and send. File size of 112KB larger than 100KB
Take a screenshot, paste an image.
Screen shot of Page Source? Entire code requires multiple screenshots
Where does "that part" of page source begin and end?
I don't know what happens in other browsers by in FF you can select any section of the page , right click and View selection source.
So for example I extracted this bit of html from the Add entry page of the weblink database activity in Moodle Demo:
<h2 class="main">New entry</h2>
<div class="defaulttemplate">
<table cellpadding="5"><tbody>
<tr><td valign="top" align="right">URL: </td><td><div title="Website address"><input name="field_4_0" id="field_url_4daf51062d747" value="" size="60" type="text"><button id="filepicker-button-4daf51062d747" style="">Choose a link...</button></div></td></tr>
<tr><td valign="top" align="right">Description: </td><td><div title="Website description"><div><textarea style="display: none;" id="field_5" name="field_5" rows="10" cols="30"></textarea>
:-)
This is what I got:
I've just tried it on Moodle demo and it seems to work.
Here is the Add template code which you can simply paste into the template in html mode:
<div class="defaulttemplate">
<table cellpadding="5">
<tbody>
<tr>
<td align="right" valign="top">Name:</td>
<td align="left"><span class="Name_field">
<div title="Name Desc">[[Name] ]</div>
</span></td>
</tr>
</tbody>
</table>
</div>
And in the css template:
.Name_field input {width:5px !important;}
Refresh browser cache.
I just went to the demo site to try, If you go there in the next 50 minutes I have created a course C1 with a database called DB1. But the displayed field width is still the same for the Name text field (Does not look like 5px)?
Alas missed your 50 minutes mark, but look:
What am I missing?
Please pick out the flaw in my steps:
Create a course ???
Try first in the existing Features demo course. If it works there then it may be something about the new course and if not, maybe something about your browser.
Seems to be working now. Thanks for your patience. Maybe was not saving the template or not refreshing browser cache enough? Not sure.
This just gets me past my first step in building my database activity. A few quick questions:
Thanks
You may be able to do 1-3 with javascript.
I'm working on implementing all this functionality in my own version of the module but I don't expect a version for Moodle 2 before the end of the summer.
Can you point me to your version of the module for 1.9?
Thanks
A preview should be available by the end of the weekend and will be announced when committed.
Go to http://www.javascriptkit.com/ and you will find lots of javascript kits you can tweak and use. Just make sure you accknowledge the author.
I am making steady progress building my database activity. I found this code for a popup calendar I would like to use. How do I tie this to the Date field [[Date] ] i created? Can the database Date field use the calendar popup that comes with Moodle 2.0?
<SCRIPT Xlanguage="JavaScript" ID="jscal1x">
var cal1x = new CalendarPopup("testdiv1");
</SCRIPT>
<!-- The next line prints out the source in this example page. It should not be included when you actually use the calendar popup code -->
<SCRIPT Xlanguage="JavaScript">writeSource("jscal1x");</SCRIPT>
<INPUT TYPE="text" NAME="date1x" VALUE="" SIZE=25>
<A HREF="#" XonClick="cal1x.select(document.forms[0].date1x,'anchor1x','MM/dd/yyyy'); return false;" TITLE="cal1x.select(document.forms[0].date1x,'anchor1x','MM/dd/yyyy'); return false;" NAME="anchor1x" ID="anchor1x">select</A>
You don't. This calendar seems to assume a simple text field for input an output. The Moodle date field is not a simple text field. But then again, once you recognize that the Moodle date field is in effect a calendar interface (albeit a very simple one (albeit not as simple as a simple text field)) you may realize that if you use the javascript calendar you don't really need the Moodle date field and can do with a simple text field as the example implementation of the script suggests.
One more considertation. Get the designated text field ('date1x' in the example) by getElementById and not by document.forms[0]. The Add template may have more than one form and since the order of forms in document.forms may differ from browser to browser, using document.forms will put the 'date1x' field in superposition, to the effect that its actual place-holder form may be known only from a browser's perspective.
I know I need some step by step help here.
I create a text field called Date ([[Date] ]) instead of using the date field type. What do I substitute in the example code above and where does each piece of code go? Where do I save the js files?
Thanks.
Without looking at the cal script I suppose you should add the following next to [[Date] ] in the template:
<a href="#" onClick="cal1x.select(document.getElementById("[[Date#id] ],'anchor1x','MM/dd/yyyy'); return false;" title="cal1x.select(document.getElementById("[[Date#id] ],'anchor1x','MM/dd/yyyy'); return false;" name="anchor1x" id="anchor1x">select</a>
The js files should go anywhere that is accessible from the course site and then you should add at the end of the template, for each js file:
<script type="text/javascript" src="XXXXXXX"></script>
where XXXXXXX is the url of the js file.
htw
Where is the matching " for ("[[Date#id] ],
should be:
... document.getElementById("[[Date#id] ]") ...
Hello Itamar I have got it to work. But after several hours I found i had to change the " to '. Here is my add entry template. Why is the select link showing up under the [[Date] ] input field/box and not to the right of it?
[[Date] ]<A HREF="#" XonClick="cal.select(document.getElementById('[[Date#id] ]'),'anchor1','MM/dd/yyyy'); return false;" NAME="anchor1" ID="anchor1">select</A>
<SCRIPT LANGUAGE="JavaScript" SRC="http://localhost/m202/javascript/CalendarPopup.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript"> var cal = new CalendarPopup();</SCRIPT>
What is the JavaScript template for? I thought I should be able to paste the JavaScript code there but it only works when I paste it in the Add entry template?
Is there a difference between going into HTML mode and disabling the editor? HTML mode adds and re-arranges the code, and you cannot keep the editor disabled?
Thanks
Why is the select link showing up under the [[Date] ] input field/box and not to the right of it?
because the field is hardcodedly enclosed in a div tag. If you want the select to the right of the field either put these items in a 2-column 1-row table or work out the required css (which may be quite tricky).
What is the JavaScript template for?
It is for javascript code, BUT, in your case you use [[Date#id] ] tag which is not javascript code and as is can be known and properly converted to code only in the Add template. You can pass this tag as string into a function which is defined in the js template but that requires some more coding. You also include a js file which you can do in the js template if you use the proper dom methods.
Is there a difference between going into HTML mode and disabling the editor?
If the editor in database 2.0 works like in 1.9, it doesn't appreciate white spaces in the code so unless you remove all white spaces from the code you need to disable it if you want to edit the template. As a workaround, keep and modify this bit of code in an external file and copy paste into the template as needed.
hth
either put these items in a 2-column 1-row table or work out the required css (which may be quite tricky).
Or I should get the Javascript code to simply click in the entry field to trigger the popup calendar, instead of using the select link?
And all your responses were very helpful. Thanks
Try:
<script type="text/javascript">
var cal = new CalendarPopup();
document.getElementById('[[Date#id] ]').XonClick="cal.select(this,'anchor1','MM/dd/yyyy'); return false;";
</script>
and next to the date field simply leave
<a href="#" name="anchor1" id="anchor1"></a>
You need this anchor so that the cal popup will open there.
I wonder what I am doing wrong. This is what i have in the Add template, but not working:
[[Date] ]<a href="#" name="anchor1" id="anchor1"></a>
<SCRIPT language="JavaScript" SRC="http://localhost/m3/java/CalendarPopup.js"></SCRIPT>
<script type="text/javascript">
var cal = new CalendarPopup();
document.getElementById('[[Date#id] ]').XonClick="cal.select(this,'anchor1','MM/dd/yyyy'); return false;";
</script>
If you use FF check in Tools ->Error console, if there are any javascript errors.
Not to sound lazy but I get no errors messages in FF, but alot of warnings. And warnings with the other code that works?
This other one I found seems to work? I just need to change the code and link it to [[Date#id] ]
<link href="/ECN/Ztools/CalendarControl/CalendarControl.css"
rel="stylesheet" type="text/css">
<script src="/ECN/Ztools/CalendarControl/CalendarControl.js"
language="javascript"></script>
<input name="todays_date"
onfocus="showCalendarControl(this);"
type="text">
Thanks
Should it be:
<link href="http://localhost/m202/javascript/CalendarControl.css"
rel="stylesheet" type="text/css">
<script src="http://localhost/m202/javascript/CalendarControl.js"
language="javascript"></script>
[[Date] ]<script type="text/javascript">
document.getElementById('[[Date#id] ]').onfocus="showCalendarControl(this);"
</script>
??? Not very sure. This does nowt work though.
I don't know why. The event handler may be overriden. See if it works with a 'select' link.
