Bulk Edit Required Fields Styling Not Showing on Website

[Breee]

Hi, 

I'm using the bulk edit option on a tabular report. I have rules set on the bulk edit to govern what data can be changed during the bulk edit based on the records selected by the user. 

I have placed css code into the datapage (configure bulk edit) and my stylesheet to update the text of the required fields to red in the bulk edit dialog box. In the Caspio preview all the required fields show as red. On my website the required fields still show as black.  I used the developer tool and found that the class assigned on the website is different from the class assigned in the CASPIO preview which is why the color is incorrect on the website. The td  class on the website should be <td class="cbBulkFormLabelCell cbBulkFormLabelRequired"....</td>

Website class assignment: 

<td class="cbBulkFormLabelCell_334daf58b60dbf cbBulkFormLabel_334daf58b60dbf" style=""><span class="cbBulkFormEnableCheckBoxContainer_334daf58b60dbf"><input type="checkbox" name="EnableBulkEditScan_Load_Table_MAIN_ALLScans_RENDCkb" id="EnableBulkEditScan_Load_Table_MAIN_ALLScans_RENDCkb_334daf58b60dbf" disabled=""></span><label for="EnableBulkEditScan_Load_Table_MAIN_ALLScans_RENDCkb_334daf58b60dbf">Rate End:<span style=""><span class="cbFormRequiredMarker_334daf58b60dbf">*</span></span></label><span class="cbBulkFormHintLabel_334daf58b60dbf" id="BulkEditScan_Load_Table_MAIN_ALLScans_REND_hnt_334daf58b60dbf"><img class="cbBulkFormHintLabelImage_334daf58b60dbf" src="https://c3amf140.caspio.com/images/tooltip_icon_gray_outlined.png" alt="[?]"></span></td>

CASPIO class assignment: 

<td class="cbBulkFormLabelCell cbBulkFormLabelRequired"><span class="cbBulkFormEnableCheckBoxContainer"><input type="checkbox" name="EnableBulkEditScan_Load_Table_MAIN_ALLScans_RENDCkb" id="EnableBulkEditScan_Load_Table_MAIN_ALLScans_RENDCkb_612e7963285d5d" disabled=""></span><label for="EnableBulkEditScan_Load_Table_MAIN_ALLScans_RENDCkb_612e7963285d5d">Rate End:<span class="cbBulkFormRequiredMarker"><span class="cbFormRequiredMarker">*</span></span></label><span class="cbBulkFormHintLabel" id="BulkEditScan_Load_Table_MAIN_ALLScans_REND_hnt_612e7963285d5d"><img class="cbBulkFormHintLabelImage" src="https://c3amf140.caspio.com/images/tooltip_icon_gray_outlined.png" alt="[?]"></span></td>

Bulk Edit CSS (Placed in stylesheet and datapage)

<style> .Dialog { width: 660px !important; height: 630px !important} 

 <style>
.cbBulkFormLabelRequired {
    color: #F44336  !important;
    font-size: 10px  !important;
    font-family: Arial, sans-serif !important;
    font-weight: bold !important;
    z-index: 2000 !important;
    }
.cbBulkFormLabel {
    color: #444444  !important;
    font-size: 10px  !important;
    font-family: Arial, sans-serif  !important;
    font-weight: bold  !important;
    }
.cbBulkFormData{
    font-size: 10px  !important;
    }
.cbBulkFormSelect{
    font-size: 10px  !important;
    color: #333333 !important;
    font-size: 10px !important;
    font-family: Arial, sans-serif !important;
    font-weight: 300 !important;
    padding: 5px 6px !important;
    background: #FFFFFF !important;
    border-color: #e9e9e9;
    border-width: 1px !important;
    border-style: solid !important;
    box-sizing: border-box !important;
    }
.cbBulkFormTextField{
    font-size: 10px  !important;
    color: #333333 !important;
    font-size: 10px !important;
    font-family: Arial, sans-serif !important;
    font-weight: 300 !important;
    padding: 5px 6px !important;
    background: #FFFFFF !important;
    border-color: #e9e9e9;
    border-width: 1px !important;
    border-style: solid !important;
    box-sizing: border-box !important;
    }

</style>

 

Thanks, 

Bre

 

[alineer]

CSS is cascading, meaning the last style applied to an element is always the one that sticks.  So, ordering matters. The element in question has both of these CSS classes, and the right order for the particular styles, but the css styles are written backwards. So, the only styles being applied is the .cbBulkFormLabel. Remove the !important from the colors attribute, and it should work.

.cbBulkFormLabelRequired {
	color: #F44336 !important; /* here */
	font-size: 10px !important;
	font-family: Arial, sans-serif !important;
	font-weight: bold !important;
	z-index: 2000 !important;
}
.cbBulkFormLabel {
	color: #444444 !important; /* and here */
	font-size: 10px !important;
	font-family: Arial, sans-serif !important;
	font-weight: bold !important;
}