Search the Community

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

Hi, I used a code to create responsive forms, the code from here: http://howto.caspio.com/tech-tips-and-articles/responsive-datapages-overview/responsive-forms-submission-web-form-updatedetails-form-search-form-login-form/ The problem is that every label I set to appear to the left of it's field is appearing on the top of the field. How can I use this responsive code and still put labels to the left of their fields? If anyone has a solution for that, even just for checkbox cases, it will be great! Thanks, Gilad

Good morning all, I am currently using the Caspio article to make my datapage responsive, the one issue I am having is trying to adjust the label text so it is left aligned instead of right aligned when the page responds to a smaller view width. I have put the line of code I have been trying to use between two "//PROBLEM CODE HERE//" lines. This is a details datapage where the labels are normally right aligned. <!-- Responsive Code Begin --> <style> /* Change max-width to what size you want the form to change at */ @media (max-width: 768px) { * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } //PROBLEM CODE HERE// #datapage-form labelcell {text-align: left !important;} //PROBLEM CODE HERE// #datapage-form table { width: 100% !important; margin: 0px !important; } #datapage-form td { display: block; } #datapage-form input, #datapage-form select, #datapage-form textarea { width: 100% !important; } #datapage-form input[type=radio], #datapage-form input[type=checkbox] { width: auto !important; } #cbCalendarConteiner {;} img[alt~="Calendar"] { position: relative; left: -19px; top: 5px; } img[alt~="Audio"] { position: relative; left: -19px; top: 5px; } img[alt~="Download"] { position: relative; left: -46px; top: 5px; } #datapage-form input + span > a { display: inline-block; width: 1px; overflow: visible; position: relative; left: -8px; } #datapage-form input + a[href="#"], #datapage-form input + a[href="#"] + a { display: inline-block; width: 1px; overflow: visible; position: relative; left: -8px; } } </style> <div id="datapage-form"> <!-- Responsive Code End --> Thank you!