You are viewing limited content. For full access, please sign in.

Question

Question

css compound selectors

Laserfiche Forms How To
Updated January 18, 2022
asked on December 21, 2021 • Show version history

Hi Everyone,

I'm sure this is a basic question probably answered elsewhere in this forum, but I can't find it.

I have a few different date boxes on my form and am trying to use compound selectors to set them all to a certain set of pix as shown below:

#q348,  #q358 .cf-small {width:95px;}

this isn't working.

Can this be done?

Can anyone help me with this?

0 0

Answer

SELECTED ANSWER
replied on January 14, 2022

The container element with id q369 is going to have two descendants that you'll be interested in usually.  One is the input element and the other is the label element.  The ".label" notation will not work because label is an element not a class.  I would suggest that you assign a class to the dates you wish to format (say, RedBold) and then use a CSS statement like

.RedBold input, .RedBold label {formatting stuff}

0 0

Replies

replied on December 21, 2021 • Show version history

#q348.cf-small,  #q358.cf-small {width:95px;}

Alternatively give them a css class

and use

.smallNumbers input {width:95px;}

 

You may need to change the width, min-width, and/or max-width of the parent or encapsulating element as well.  Make sure that the field width parameter is compatable.

Have fun.

0 0
View 6 previous replies
replied on December 21, 2021

Thanks for showing me both ways to do that James, I used the first one but will remember the second one also!

0 0
replied on January 13, 2022

James,

I put this in as a class:

 $(document).ready(function(){
     $('.sn input') {width:100px;}
});

& it didn't work.  I used sn in the CSS Class

Can you help me one more time?

Thanks

0 0
replied on January 13, 2022 • Show version history

This should go in the CSS code as:

.sn input {width: 100px;}

 

Take a look at 

https://www.w3schools.com/css/default.asp
and

https://api.jquery.com/

0 0
replied on January 13, 2022
0 0
replied on January 13, 2022

Thanks for the help James! I realized after I sent that message that should be in the CSS not in the JS.

0 0
replied on January 13, 2022

Keep on truckin' :)

0 0
replied on January 14, 2022

James,

I have another ? for you.  I've made this class:

.red input  {font-size: 20px !important;
             color: red;             
             width: 110px;
             font-weight:bold;}

which is for date boxes.  so this is what I get:

but I also want to capture the label "Your .....Expires on" in red, bolded, 20px:

I've tried all combinations (I think) of .label I can think of and can't get it.  When I was doing them individually, I did this:

#q369 input {font-size:20px !important;
             color: red;
            font-weight:bold;}
#q369 .cf-small {width: 110px;}
#q369 label {font-size:20px !important;
             color: red;}

and it worked:

Since I have a lot of date boxes, I'm trying to condense some of this mess.

As always any help you can give is greatly appreciated!

 

0 0
SELECTED ANSWER
replied on January 14, 2022

The container element with id q369 is going to have two descendants that you'll be interested in usually.  One is the input element and the other is the label element.  The ".label" notation will not work because label is an element not a class.  I would suggest that you assign a class to the dates you wish to format (say, RedBold) and then use a CSS statement like

.RedBold input, .RedBold label {formatting stuff}

0 0
replied on January 18, 2022

James,

It works! Thanks for your expert input!

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...