Configurable List: How can I customize the widget with CSS code?

Kiran helped me with a configurable widget with writing code, and although the other form was already sent out I have another form that I am building with the same need. I copied the formula trying to customize it for this new form and it is not complying. (user error :) I suppose)

Ideally it would be great if I can talk to him/her on the phone so they can walk me through it so I can do it myself. I do not understand all the abbreviations and sizing, which seems to be most of the problem.

 

It's been all trial and error and I am going on 3 hours now and need to get it done in a much more timely manner. Is it possible to have someone call me? 317-706-8977

 

 

th { display: none; }

 

td.col1, td.col2, td.col3, td.col4, td.col5, td.col6, td.col7 {

 

display:inline-block;

 

float: left;

 

padding: 20px 5px 1px 1px;

 

}

 

td.col1:before { content: "First name"; width: 100%; font-weight: bold;}

 

td.col2:before { content: "Last Name"; width: 30%; font-weight: bold;}

 

td.col3:before { content: "Mode of Transportation"; width: 42%; font-weight: bold;}

 

td.col4:before { content: "Date of Arrival"; width: 42%; font-weight: bold;}

 

td.col5:before { content: "Arriving Airline"; width: 45%; font-weight: bold;}

 

td.col6:before { content: "Arriving Flight Number"; width: 30%; font-weight: bold;}

 

td.col7:before { content: "Date of Departure"; width: 42%; font-weight: bold;}

 

td.col8:before { content: "Departing Airline"; width: 45%; font-weight: bold;}

 

td.col9:before { content: "Departing Flight Number"; width: 30%; font-weight: bold;}

 

td.col1:before { content: "Comments"; width: 25%; font-weight: bold;}

 

td.col1 { width: 26%; }

 

td.col2 { width: 25%; }

 

td.col3 { width: 25%; }

 

td.col4 { width: 25%; }

 

td.col5 { width: 31%; }

 

td.col6 { width: 30%; }

 

td.col7 { width: 30%; }

 

td.col8 { width: 30%; }

 

td.col9 { width: 30%; }

 

 

 

Unfortunately, we do not provide phone support so will not be possible to call you, our support forum is the main way to assist you. 

Now, regarding to the CSS code you got from my colleague Kiran, do note that it needs to be customized based on the widget settings where you will apply the code. 

For example, this code is fixed, and it does not change as you change the widget:

th { display: none; }

This one changes, it will be changed based on the number of columns you have on your widget, it may be that you have 6 columns on your form so your code will have "td.col6" on it, may be that you have 11 columns so you need to add them to the code as well, basically you add "td.colN" where "N" is the column number you will affect.

td.col1, td.col2, td.col3, td.col4, td.col5, td.col6, td.col7 {

display:inline-block;

float: left;

padding: 20px 5px 1px 1px;

}

Now, to set the titles you need to use the following code, the same as the code above applies here, you will need to add this code the same times as the number of columns your widget has:

td.col1:before { content: "First name"; width: 100%; font-weight: bold;}

On "content" you set the column title, you also change the column affected on "td.colN" where "N" is the number of column you will set the title. 

Once you do that you only need to change the columns width, this will help you to display them as you need: 

td.col1 { width: 26%; }

As explained above, you change the "td.colN" based on the column you will affect, where "N" is the column name the code will be applied to. 

Basically on the code you have it is only needed to add the missing columns, once you add them you will see they display properly. 

You could also notice that some fields display over other fields, or they do not seem properly aligned. 

This will be resolved by either increasing or decreasing the width value on the code "td.col1 { width: 26%; }" for the proper column. 

Please, apply the corrections indicated and let us know how it goes.