So far, my main problem is that I am trying to adjust a table on Kintone.
I have been able to access the contents of the table (when you add table elements to it, you can see the colors changing, however the headers themselves do not seem to change).
Currently, I am using Kintone (Cybozu), however since it is using JSEdit, I think the problem can be solved with Javascript knowledge (which I very much do not have).
What do I want to do?
(please see the attached pictures)
Center, bold, and other adjustments to those headers.
If my code is completely wrong, please do ignore it and any code that will help this situation would be greatly appreciated.
enter image description here
enter image description here
From the code you shared, you get a table element as kintone.app.record.getFieldElement(field code of the table), but as for the table, it contains multiple elements.
Therefore, as with other fields, changing the style.backgroundColor of the acquired element will not change the color.
Could you try and apply the following CSS to get the desired process?
The header will be yellow with the CSS below, so please specify the color as desired.
.body-record-print .show-subtable-gaia th {
background-color: #FFFF00;
}
I hope this helps.
Related
I am using this tablescript to display a virtual table but for some reason after a specific point problems occur.
On Google Chrome after the top value (The position value where the row is displayed in the parent div) of 1.677715e+07px (16777150px) is exceed the rows are missing its border-bottom for some reason. This happens on the newest version of Chrome (v69). On version 68 the rows at this top value and more arent rendert at all.
They are still there, you can see them via the inspect tool on the browser.
Does the number 16777150 has something to do with JavaScript or Google Chrome?
On Edge browser something different happens. If the parent div of the virtual table exceed the height of 10737418px, the rendered height of this div will be only as big as its content height So if the last row is ending at top 900px, the table will be 900px height too. If you scoll further down and the new row is rendert, the div will get bigger too. But in the inspector you can see the right height value in this element and it doesnt change at all.
To post this link I need this code..
Here is the Code exampel.
If you want it to test it yourself, the .js and .css are in the github of this tablescript in the example folder.
Maybe this hase something to do with the browsers or JavaScript so I ask this question here.
I dont know how your table is being displayed.
But it's not a good practice to display this much entries at once. Try to use pagination.
Have a look at https://datatables.net/ and try to dynamically load table entries (like pick it up from database or something like this)
You had mentioned that tablescript also do the same thing and i see that after many records it display so long empty space without data.
But here, I want to confirm with you that if you use the pagination and display 20 rows at a time then it should work without any issue.
Then why you want to display large number of records?
If you have any issue with 20 rows then try to let us know about that.
We will try to find the solution for it.
Regards
Deepak
How to shape a input text box like a pyramid?
Please see the image at
I want to make a contact form like as this image.
Please let me know how i can i do this.
Thanks in advance.
To make your contact form as displayed in the image. you have to be little tricky.
Please see the image below.
The highlighted part indicates the Size of your text-box. Rest is the CSS in your background and similar CSS for text box is applied so that it looks merged with the background CSS.
There are many ways to achieve this. Best thing that comes to my mind is that you can use this pyramid as a background of a div. Then place text boxes on that div. Style them to look like on the image,
.textbox{
background-color:transparent;
border:none;
color:white
}
is a example. You can use different width for different text boxes to get the desired look.
I am doing a project where we want to put both image and text into one single cell. And also, we want to be able to change the image when we click (or double click) the image. Basically, the image part represents 1 bit (ON/OFF) information. Meanwhile, we also want to be able to edit text when click (or double click) the text part. Later, we may have more image items in one cell.
Can anybody give me a suggestion? I am currently trying to put a small 1x2 table inside the cell which does not really look good. Thanks in advance.
I ended up putting a button in the front. Which is not pretty, but it works.
I created a some javascript/jquery code to filter an html table. The filter works by assigning two classes to the rows ('show' and 'hide') depending on the value of certain cells and then using CSS to hide the rows with the 'hide' class. The filter works perfectly. However, when I apply the filter, somehow the table row height keeps changing (usually the height increases significantly - ~ 2 or 3 times the desired height). I have no idea why this is happening. My code is a few hundred lines so I don't think it would be worth pasting here. And I have no idea which section(s) of my code are causing the problem (or whether the issue is with the javascript/jquery or external css file).
Can anyone offer some suggestions for how I can best debug this problem?
EDIT: In addition to the row height increasing (the main problem), the column width also shrinks a little when the filter is applied.
UPDATE: I solved the problem (at least for the changing row heights). It was related to a CSS setting where I set the height of the table body. Thanks to the suggestions below, I used Firebug to inspect everything more closely. I found a feature in Firebug that allows you to turn on/off CSS properties, as well as delete DOM elements. By using those features, I was able to isolate the on CSS property that was causing the problems. Thanks for the input everyone.
Are you trying to do something like this.
If so then see if that helps or if you can put a sample like that which replicates the problem.
What I can think of is:
1: The class that is being applied when your hide/show has some issues.
2: The elements on which you are trying to apply the classes are wrong.
May be you can post some sample markup before and after filters.
I solved the problem (at least for the changing row heights). It was related to a CSS setting where I set the height of the table body. Thanks to the suggestions below, I used Firebug to inspect everything more closely. I found a feature in Firebug that allows you to turn on/off CSS properties, as well as delete DOM elements. By using those features, I was able to isolate the on CSS property that was causing the problems. Thanks for the input everyone.
I am trying to generate a html page with css that works as an image preview kind of thing. An example of this is here:
http://www.nomorepasting.com/getpaste.php?pasteid=22463
however this approach has several drawbacks. One of which is the text must always be smaller than the images. I tried using a different attempt here:
http://www.nomorepasting.com/getpaste.php?pasteid=22464
But could not get it to work. Would someone please be able to show me how to modify the code at the second link to work as the first, or to suggest an overall better method?
The error in second one is you haven't specified the height attribute.
Try the following, it worked for me.
.class1{
color:#000;
background-image:url('images/2.jpg');height:1000px;
}
The reason you are not able to see the back ground image is, since there is nothing inside the div, and the height is not specified the height is 0.
Try putting a few elements in the div and you will see that the image is being displayed.
Ramjee