Hi,
How do I initially make the first section expanded?
How can I change the section caption height?
Thanks,
- Set Section.Expanded = true2) Caption height should adapt to caption content
I tried setting expanded to true both when sections are added and in the OnSectionRender event but no joy. Also changing the font size of the caption has no effect!
How do you change the font? CSS? What CSS? What code?
Please provide us sufficient details to understand what you are doing.
procedure TMainForm.HelpAccordionRenderSection(Sender: TObject; ASection: TAccordionSection; ACaption,
APanel: TJSHTMLElement);
var
lbl:TWebLabel;
begin
ACaption.classList.add('accordion_extra');
ACaption.style.setProperty('background-color','#2F5597');
ACaption.style.setProperty('color','#FFFFFF');
ACaption.style.setProperty('font-family','Gisha');
ACaption.style.setProperty('font-size','20px'); // This works but makes the whole caption height too big
if ASection.Index=0 then
ASection.Expanded:=True; // This is ignored
lbl:=TWebLabel.Create(Self);
lbl.ParentElement:=APanel;
// lbl.HeightStyle:=ssAuto;
// lbl.WidthStyle:=ssAuto;
lbl.AutoSize:=True;
lbl.ParentFont:=False;
lbl.Transparent:=True;
lbl.Font.Name:='Gisha';
lbl.Font.Size:=11;
// lbl.Margins.Top:=5;
// lbl.Margins.Bottom:=5;
// lbl.Margins.Left:=5;
// lbl.Margins.Right:=5;
// lbl.AlignWithMargins:=True; // currently ignored
lbl.WordWrap:=True;
lbl.Caption:=helpTopics[ASection.Index+1,2];
end;
I should have added that this is done in the forms OnCreate event:
HelpAccordion.BeginUpdate;
HelpAccordion.ParentFont:=True;
for I:=1 to helpTopicCount do
begin
Sect:=HelpAccordion.Sections.Add;
Sect.Caption:=helpTopics[I,1];
end;
HelpAccordion.EndUpdate;
HelpAccordion.ParentFont:=True;
for I:=1 to helpTopicCount do
begin
Sect:=HelpAccordion.Sections.Add;
Sect.Caption:=helpTopics[I,1];
end;
HelpAccordion.EndUpdate;
And this is the constants:
helpTopicCount=3;
helpTopics:array[1..helpTopicCount,1..2] of string=(
('General Help','This help information can be accessed by clicking on the relevant topic header!'),
('Limitations of the trial version','There are only two limitations in the trial version.<br><br><ul>'+
'<li>It can only be used for 14 days.</li><li>Only one business can be used.</li></ul>MTD VAT returns can be submitted!'),
('Mobile Phones','<p>When using a mobile only limited information is available due to space constraints and also no '+
'data can be input or amended.</p>')
);
helpTopics:array[1..helpTopicCount,1..2] of string=(
('General Help','This help information can be accessed by clicking on the relevant topic header!'),
('Limitations of the trial version','There are only two limitations in the trial version.<br><br><ul>'+
'<li>It can only be used for 14 days.</li><li>Only one business can be used.</li></ul>MTD VAT returns can be submitted!'),
('Mobile Phones','<p>When using a mobile only limited information is available due to space constraints and also no '+
'data can be input or amended.</p>')
);
Just for info. I have now realised that setting expanded true only works if the content is set first
Thanks for providing this detail, we'll revise it.