nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Customizing DCT

arti1

I have to make three items in a row in DCT one label and two textbox with callout buttons in a row. also the distance between two callouts shouls be small. I have attched the screenshot for clarity.

can someone tell me how to do this?

Find more posts tagged with

Comments

Faizi

I have to make three items in a row in DCT one label and two textbox with callout buttons in a row. also the distance between two callouts shouls be small. I have attched the screenshot for clarity.

can someone tell me how to do this?

For your requirement, i don't think you can get exact UI with default DCT UI.
Items can be shown in shame row by "rowcontinue=t" but it does not appear with little distance.

You have to embed DCT with custom css file. That should be defined in templating.cfg file while defining a data type.

HTH!

arti1

Thanks for the reply!

I tried it by making two items and using rowcontinue=t but , then it shows two labels with both the textboxes and I want label for before first textbox only.
can CSS help in decreasing the distance between two items in a DCT ?

Faizi

Thanks for the reply!

I tried it by making two items and using rowcontinue=t but , then it shows two labels with both the textboxes and I want label for before first textbox only.
can CSS help in decreasing the distance between two items in a DCT ?

I have not tried it yet but as per the docs it seems can be achieved by custom css file. So just go ahead and try it.

Hopefully it will sorted out.

Adam Stoller

I have to make three items in a row in DCT one label and two textbox with callout buttons in a row. also the distance between two callouts shouls be small. I have attched the screenshot for clarity.

can someone tell me how to do this?

I'm not sure if it will render as you want, but you're basically talking about a two text item's, each with a callout sub-item. The first item would have an explicit label (<label>Date</label>) and rowcontinue="t". The second item would have an explicitly empty label (<label></label>).

The above might give give you something approximating your design.

You could then play with the CSS for the DCT to try to make it so that the spacing between elements doesn't change with the width of the window in which it is being displayed, but I'm not sure it's worth the effort.

A better interface for what I think you are trying to do - would be a single text field with a single callout widget that launches a combo date-and-time picker.

ISCBorisB

I have to make three items in a row in DCT one label and two textbox with callout buttons in a row. also the distance between two callouts shouls be small. I have attched the screenshot for clarity.

can someone tell me how to do this?

Are you trying to build some sort of a Calendar? If so, there are few posts in this Forum discussing both IWOV and Custom Calendar Widgets, implementation etc

arti1

I tried it by using custom css but the changes are not reflecting in DCT. The steps that I performed are:
1) created a overridestyle.css under path
iw-home\httpd\iw\css\overridestyle.css
2) added the css path in the templating.cfg inside
3) executed iwreset -ui in command prompt
(iw-home/iw-perl/bin> iwreset -ui)

In overridestyle.css,
.row
{
color: #333333;
text-align: left;
}
Am I following correct steps as the changes are not reflected in DCT.

jagadesh

Or else try to use the below code snippet in your FormAPI init method.
var stylesheet='/iw/jquery/themes/base/ui.test.css';//replace ur css path
var f = window.top.formframe.document;
var head = f.getElementsByTagName('head')[0];
var script = f.createElement("link");
script.setAttribute("rel", "stylesheet");
script.setAttribute("type", "text/css");
script.setAttribute("href", stylesheet);
head.appendChild(script);

Adam Stoller

There are a couple of options here:

of these methods worked - so you're mileage may vary.

arti1

Thanks for the solution, CSS is working now using FormAPI.

Adam Stoller

Thanks for the solution, CSS is working now using FormAPI.

What, exactly, did you change that fixed the situation for you?
After posting that information, it is also customary to close the thread.

SuppressImageWhenDuplicatesSuppressed.rptdesign

arti1

hi,

when i use FORM API and write code inside the init method for applying css chages,it only works at the server.when i try it from any other machine, it not shows the changes.

function init()
{
var stylesheet='d:/iw-home/httpd/iw/css/test.css';
var f = window.top.formframe.document;
var head = f.getElementsByTagName('head')[0];
var script = f.createElement("link");
script.setAttribute("rel", "stylesheet");
script.setAttribute("type", "text/css");
script.setAttribute("href", stylesheet);
head.appendChild(script);
}

Adam Stoller

hi,

when i use FORM API and write code inside the init method for applying css chages,it only works at the server.when i try it from any other machine, it not shows the changes.

function init()
{
var stylesheet='d:/iw-home/httpd/iw/css/test.css';
var f = window.top.formframe.document;
var head = f.getElementsByTagName('head')[0];
var script = f.createElement("link");
script.setAttribute("rel", "stylesheet");
script.setAttribute("type", "text/css");
script.setAttribute("href", stylesheet);
head.appendChild(script);
}

Try changing the value of stylesheet to: "/iw/css/test.css" or "http://servername/iw/css/test.css" -- d:/iw-home/httpd/iw/css/tst.css is not an href.

brvhrt

jQuery Rocks Smiley Wink

Faizi

jQuery Rocks

Where is jQuery in discussion?
Are you talking about jQuery solution?

Just give details.

jagadesh

No jquery discussion is here. Loading custom css to DCT at runtime, the solution have taken from Jquery implementation(Darren's link) as jquery css loaded to DCT.

arti1

Thanks, Now CSS is working by changing the url of stylesheet to "/iw/css/test.css".

ISCBorisB

No jquery discussion is here. Loading custom css to DCT at runtime, the solution have taken from Jquery implementation(Darren's link) as jquery css loaded to DCT.

Oh, please. I liked Darrel's jquery Blog very much but this code fragment could have been found anywhere.
Just type "javascript load stylesheet" into Google search

jagadesh

Ya Boris. We can found from websites. But we were not sure eariler it will work in Teamsite DCT.