label continuation

WEB TMS WEB Core
1

After studying further this is what I have found


When I just drop a weblabel on the form and check what it has generated this is what I see.
style has been defined in the unit html
    <style>
        #lbl
        {
         color:blue;
        }

    </style>
<div id="lbl" zindex="1" role="" style="outline: none; top: 232px; left: 296px; position: absolute; -webkit-tap-highlight-color: transparent; font-family: Tahoma; font-style: normal; font-size: 8pt; color: rgb(1, 1, 1); display: table;">

    <label style="vertical-align: top; display: table-cell; color: rgb(1, 1, 1); cursor: default; font-family: Tahoma; font-style: normal; font-size: 8pt; text-overflow: clip; white-space: nowrap;">WebLabel1

    </label>
</div>

The style for #lbl has been defined as shown above. With the same settings when I add a template

  <body>
  <h2 id="lbl"></h2>
  </body>


this is what i get.


<h2 id="lbl" style="">WebLabel1</h2>

and generates the required result.

How do I clean up / tinker the properties of the component so that I get similar result without having a template. If it is require to write a template for each form and also do the form in delphi makes no sense 
2

If all you want is generate  <h2 id="lbl" style="">WebLabel1</h2> from the form designer, use a TWebHTMLContainer and there you can add any HTML you want with the CSS you want.

3
What I am currently doing is testing out various aspects so that I know what works and what does not While doing so I am reporting to you my findings.
All said and done Web core is a great product and I really want it to be made better.
Where is the designing of web apps using components but dragging and dropping them on forms advantage that Web core offers ? What I have displayed is just a sample. The idea of writing 
everything in html does not make sense.
I have added the css to the form but it does not affect the style of the label component. All I want to know how to override the default style of the components dropped on the form and make it use the css that has been defined in the style sheet.  

As a matter of fact I tried using a webimagecontrol in the html template example and it does not generate a <img> tag. but puts the src in the div tag itself so the image does not display

<div id="header" class="header" draggable="true" droppable="true" src="Unit2.WebImageControl1.Picture.jpg" role="button" aria-label="WebButton1" type="BUTTON" style="">WebButton1</div>

I have set the display as flex and trying to arrange 3 components in the header'

  .header {
    display:flex;
    justify-content:space-between;
  }

4

Secondly I checked in your manual and this is exactly what it states and I think it is the right thing to do 

Page no 54 of your web core manual

"
The corresponding HTML will be:   a HTML SPAN element for the panel, a DIV element with child HTML LABEL element for the label. A HTML INPUT element for the edit control and a HTML BUTTON element for the button: 
 
<SPAN> <DIV>
    <LABEL></LABEL>
</DIV> <INPUT type=”TEXT”>
 <BUTTON type=”BUTTON”> 
</SPAN> 
 
Now, CSS can take care of further styling of the generated HTML elements. 
"
I have no problem in your applying the default css that you have but there should be a provision to to undo it and apply some other style that I want. Not write HTML code. I will appreciate if you will really look into this aspect.
5

You could do this programmatically by accessing label.ElementHandle.firstChild and modify its style. In addition, we have added in v1.3.4.0 TWebLabel.ElementLabelClassName to allows to specify a CSS class for the LABEL HTML element in the DIV directly.

6

Thanks 

This is what worked

  WebLabel1.ElementHandle.removeattribute('style');
  TJSElement(WebLabel1.ElementHandle.firstchild).removeattribute('style');
  WebLabel1.ElementHandle.setattribute('class','lab');

which gives the output of 
<div id="TForm3_Label1" zindex="1" role="" class="lab" style="">
<label style="">WebLabel1</label></div>

will it be possible to make the   WebLabel1.ElementHandle.removeattribute('style');
as a property so that we do not have to write this code for each element and set it in the object manager ?
7

<style  >

        .lab {
          color : red;
        }
</style>

8

In v1.3.4.0, you can use WebLabel.ElementLabelClassName to set the classname for the label directly.

9

Please if possible in a future release add a property to remove the style. Just adding a classname does not work unless the style defined is cleared.


  WebLabel1.ElementHandle.removeattribute('style');
  TJSElement(WebLabel1.ElementHandle.firstchild).removeattribute('style');
  WebLabel1.ElementHandle.setattribute('class','lab');

10

There are style attributes needed for label features such as cell alignment. We can't just remove the style attribute.

11

Just checked out once again. 


WebLabel1.ElementHandle.removeattribute('style');
  TJSElement(WebLabel1.ElementHandle.firstchild).removeattribute('style');
is required for the style to take effect.
12

Let me do some more study and get back to you

13

Try


<style  >
        .lab {
          color : red !important;
        }
</style>