Jump to content
  • 0
Breee

Bulk Edit Required Fields Styling Not Showing on Website

Question

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

 

Share this post


Link to post
Share on other sites

0 answers to this question

Recommended Posts

  • 0

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;
}

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...