Give a control a custom ID or Class name?

  • 8 February 2016
  • 9 replies
  • 5 views

Badge +3

Is there any way I can give a control a custom ID or Class name? I know that the controls have an ID that consists of a bunch of letters and numbers but I don;t really want to use these in my CSS. 

 

Thanks, 


9 replies

Userlevel 3
Badge +8

Dear ,

 

the "Name" property in k2 control's property is an ID , u could use it to apply specific styling for a specific control .

for example wt i have , is custom styling for my label that is title , i set its name to lbltitle 

and in my css its like this , 

 

#lbltitle, span[name="lbltitle"]{ font-size:24px!important; margin:10px 0px!important; color:#333!important;}

 

This css will change any label u use that its name is "lbltitle"

 

Hope it helps ,

Regards.

Badge +3

@ @AhmadAbdullah Thanks for the response. 

My Smart Forms do not appear to be working like that for some reason. I have the name property of the control set like so:

 

16193iAD91EBEF9BCF2F64.png

 

The name property is not seen anywhere. Any ideas what I'm doing wrong?

Thanks,

Userlevel 5
Badge +16

Hi Reece,

 

No, You are not missing anything, it's just the name property for the picture control is not available but some other controls have the name property.

 

 

Badge +3

Darn that's disappointing... I wonder why image controls don't have this functionality? Thanks for your replies though!

Userlevel 5
Badge +16

Hi Reece,

 

it's not related to K2, this is by design in HTML:

 

Quick comparison between two tags attributes (a tag & img tag)

 

http://www.w3schools.com/tags/tag_img.asp

http://www.w3schools.com/tags/tag_a.asp

Badge +3

Oh I understand what you are refering to now, the actual name HTML attribute. I was under the impression that K2 takes what you enter in the name property and uses that as the ID to allow you to apply custom CSS. E.g. a image name 'Logo1' would have the id: '#Logo1' at runtime. Thanks for the clarification!  

 

As a side note, it would be pretty neat if K2 allowed you to assign additional class names to a control :)

 

 

Userlevel 5
Badge +16

Hi Reece,

 

Is there a reason why you're not using the default class?

 

you can change the class name using JS or Jquery.

 

set this as an expression on a data label:

 

<script type="text/javascript"> $(document).ready(function()

{
$('.picture-control-inline').toggleClass('picture-control-inline NewClassName');
});
</script>

 

wish this helps

Badge +3

@ @Mustafa Hi Mustafa, the reason I am not doing it this way is because I would like to target only a certain image. If I use JS or CSS that targets '.picture-control-inline' then all the code will be applied to all the inline pictures. 

 

An example scenario is adding two images to a smart form and then giving the first image an id (or class) of #image1 and then the other image the id of #image2. I could then use css to apply different behaviors to each image. E.g. 

 

#image1 {
width: 200px;
}

#image2 {
cursor:pointer;
}

Whereas if I simply target .picture-control-inline, the behavior will apply to all images.

 

Thanks for the reply!

Userlevel 5
Badge +16

Hi Reece,

 

Then hit the "alt" attribute, it should work for you

 

give each pic control alternate property  and make the css selector as the following:

 

img[alt=image1] { 
width: 60px;
}

img[alt=image2] {
cursor: pointer;
}

Reply