Search the Community
Showing results for tags 'layout'.
-
In Caspio when I do a preview (see right photo), the form i designed looks just fine, and without lines. After deploying the data in Wordpress (see left photo), the layout is completely different with lines etc. and very much not ok. How to get the exact layout as seen in Caspio preview, so without lines etc. Current Wordpress version: 4.7.2 (the latest) Plugin: Custom Database Applications by Caspio version 2.0 What to do? Also, when using iframe, i get a very small frame with the form. All settings say 100% for the form size. See second photo.
-
I noticed that multiple sections with different number of columns per section on Details DataPages can lead to unequal white space distribution. It happens because CSS grid-template columns are not equal: I am sharing the following JavaScript that addresses this matter: <script> if(typeof mainDataPageReadyHandler == 'undefined') { const GetNumberOfGridColumns = (columnTemplateString) => { return columnTemplateString.split(' ').length } const getSectionWidth = (HTMLSection) => { return parseFloat(window.getComputedStyle(HTMLSection).getPropertyValue('width').replace('px', '')) } const generateGridTemplateColumnsString = (totalGridColumnsWidth, numberOfGridColumns) => { let gridTemplateColumnsString = '' let columnWidth = totalGridColumnsWidth/numberOfGridColumns for (let i=0; i<numberOfGridColumns; i++ ) { gridTemplateColumnsString+= `${columnWidth}px ` } return gridTemplateColumnsString } const setGridTemplateLayout = (HTMLSection, columnTemplateStr) => { HTMLSection.style = `grid-template-columns: ${columnTemplateStr};` } const mainDataPageReadyHandler = () => { let section = document.querySelector('section[id*="cbTable"]') let gridComputedStyleArr = window.getComputedStyle(section).getPropertyValue('grid-template').split(' / ') let columnTemplateString = gridComputedStyleArr[1] setGridTemplateLayout(section, generateGridTemplateColumnsString(getSectionWidth(section), GetNumberOfGridColumns(columnTemplateString))) } window.addEventListener('resize', mainDataPageReadyHandler) document.addEventListener('DataPageReady', mainDataPageReadyHandler) } </script> Hope it helps somebody. If you notice any corner cases that were not considered, feel free to leave your suggestion
-
- js
- javascript
-
(and 3 more)
Tagged with:
-
Good afternoon, I am attempting to have my general form background have rounded edges. I have attempted adding the below code to various locations in the Layout Source area. I will most likely not want 24px, but I just was trying to find the correct area of the CSS to modify. -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -moz-border-radius: 24px; -webkit-border-radius: 24px; -khtml-border-radius: 24px; border-radius:24px; box-sizing: border-box; As an alternative should I upload an image with the correct color and shape to be used as a background instead? If I go this route will there be any sizing issues. Any and all help is much appreciated!
-
I want to change the layout of my pivot table. Right now it looks like the column headers are aligned to the left while the data fields are aligned to the right, which looks bad. how can I change this?
- 2 replies
-
- pivot table
- style
-
(and 1 more)
Tagged with:
-
We're having a problem wherein our data pages, when embedded in a web page, include a 15% left margin, 15% right margin, and 70% width. All of these are implemented via inline CSS using the !important tag. We did not add this code to our data pages, and we cannot figure out how to change it. Editing styles in Caspio Bridge has no effect—the !important tag in the inline CSS overrides all other styles. Has anyone else run into this? Do you know how to change it? I attached a screen shot taken of the embedded page with debugger windows on the right. We're launching our site this weekend, and it would be great if we could fix this problem before launch. I've already contacted customer service, and they have absolutely no idea where the code came from or how to change it.
-
Hi, I have a Submission form datapage and the submit button isn't working. it's quite specifically styled, so I have added a header and footer to this page in order to contain the style, as it didn't seem to work doing it by the associated style sheet (I need a background image to span the whole table and then separate background images for individual cells). When the header and footer is enabled, the submit button doesn't work. When I delete the header and footer, the submit button does work, but my layout doesn't. I've tried adding the button as a separate element in an html field, and again it doesn't work. Does anyone know why this is happening and what I can do to sort it out? Many thanks Nikki
- 1 reply
-
- submit
- header and footer
-
(and 3 more)
Tagged with:
-
In Caspio when I do a preview (see right photo), the form i designed looks just fine, and without lines. After deploying the data in Wordpress (see left photo), the layout is completely different with lines etc. and very much not ok. How to get the exact layout as seen in Caspio preview, so without lines etc. Current Wordpress version: 4.7.2 (the latest) Plugin: Custom Database Applications by Caspio version 2.0 What to do?
-
Move Submit Button In-Line With Text Fields?
DataCobalt posted a question in Styles and Localizations
Good morning, I am making a submission form that will be arranged in one long line. I would really prefer to have the submit button be on the same line as the text fields as there is a large report below it and the more space I have to work with the better. I attempted to add the CSS element Float: right to the button in the layout section of the applied style to no avail. Any and all help is much appreciated. -
Hello, I have a data submission form embedded in a website. The form has a white border around it. I have set the outer border to none, but still there is this white border. I don't seem to be able to control any of it: thickness, margin between text and border etc... Does anyone know how to control it? Thanks, Julien