Column Width and Row Height Adjustment

jjmcm123 said 1 year, 10 months ago:

Can you tell me how to decrease the column width and reduce row height, to allow more information to be viewed with the least amount of scrolling? Specifically for this widget code:

<script type=”text/javascript” id=”dbboon_script_4e0e80c50c3ea” src=”https://dbexternalsubscriber01.secureserver.net/embed/?method=getForm&accountId=7543&formId=Buyer+Info&scriptId=4e0e80c50c3ea”></script>

sergiop said 1 year, 10 months ago:

@jjmcm123

That would require some modification to the Javascripts embed code and applying CSS styles. I am not familiar with either Javascript or CSS but the following link could be of some use to you.

Customizing Widgets in Easy Database for Websites

Hope this helps!
Sergio P

jjmcm123 said 1 year, 10 months ago:

Thanks for the reply. I am a novice at this and appreciate Easy Database, but it seems I’ve quickly exhausted the “Customizing Widgets in…” resouce. Can you answer, does the embedded code for the widget link the website to the javascript that actually creates the form, and if so, how do I get to this code?

christianh said 1 year, 10 months ago:

@jjmcm123

To create and retrieve the embed code, you can view the instructions in this help article:

http://support.godaddy.com/help/article/5967

If you have not done so already, I would recommend viewing the following PDF:

http://products.secureserver.net/guides/customizewidgets.pdf

–Christian

bcb said 1 year, 10 months ago:

@jjmcm123

The SCRIPT tag generates the HTML that gets displayed, so you cannot modify that. However, with the latest release of Easy Database for Websites we added support for more customization using CSS. We are still working on getting the documentation put together, but your request is a great example of something that can be done using CSS.

The articles already linked discuss how you can set the width and height of your widget. Using CSS you can further customize the look.

Here is example CSS that makes the widget columns/rows take up less space.

.Data_Central_Column {
height: auto !important; /* do not set a specific height */
padding: 2px !important; /* 2 pixels of padding */
white-space: nowrap; /* keeps text on a single line */
border-right: 1px solid #eee; /* add a right border to help visually separate columns */
}

If there is something more specific that you’d like help with, please let us know.

Regards,
Brad B.
Easy Database Developer

gtswhitt said 1 year, 10 months ago:

My website is not a website tonight account. My website has a black background with white lettering. When I display the page, there is a white background with white letters. The data table comes in much to small width wise. I can’t use Easy if I can’t change the background. The URL’s that link to our shop cart also are very long and don’t wrap. I’d like to see the URL be just “Click here for more information” rather than long URLs. For now, how do you change the white background?

gtswhitt said 1 year, 10 months ago:

I found the PDF linked in this conversation to be handy on answering my questions above. Except how can I make my links wrap also? With links being 100 letters long, that’s all a user can see in my table.

bcb said 1 year, 10 months ago:

@gtswhitt

You can try to do this with the following custom CSS:

.Data_Central_Hyperlink_Column {
width: 200px;
word-wrap: break-word;
break-word: break-all;
}

This CSS affects only Hyperlink columns. It sets the width of the link column to 200 pixels wide and then forces the content to wrap. The width is required to be set for the wrapping to work. I did a quick test and verified this works for grid view in IE8+, FF3.6, and Chrome12.

Hope this helps.

Regards,
Brad B.
Easy Database Developer

bcb said 1 year, 10 months ago:

@gtswhitt

Also your idea about changing the text for links is a great idea and we will look into implementing it in a future release.

Regards,
Brad B.
Easy Database Developer

jjmcm123 said 1 year, 10 months ago:

Brad, when you gave me this example of CSS code to change column/rows, can you tell this novice if I would just insert it into the code, is so, where, or change the existing code. I’ve tried changing the exisitng and have not figured it out.

.Data_Central_Column {
height: auto !important; /* do not set a specific height */
padding: 2px !important; /* 2 pixels of padding */
white-space: nowrap; /* keeps text on a single line */
border-right: 1px solid #eee; /* add a right border to help visually separate columns */
}

gtswhitt said 1 year, 10 months ago:

jjmcm123,
You would put the code in your stylesheet.

gtswhitt said 1 year, 10 months ago:

I used the code but it doesn’t work with IE8, just my Firefox. I’ve posted here, but for some reason my posts are not showing up.

Also, in Firefox, my S&F drop down box will elongate to show all the characters but in IE the drop down search is only as long as godaddy has set it up to be and it won’t show all the wording (description from my first column in the database).

Is this forum being moderated before posts show up? My posts are not showing up!! We need help now, not later.

gtswhitt said 1 year, 10 months ago:

bcb,
I used the code but it doesn’t work with IE8, just my Firefox. I’ve posted here, but for some reason my posts are not showing up.

Also, in Firefox, my S&F drop down box will elongate to show all the characters but in IE the drop down search is only as long as godaddy has set it up to be and it won’t show all the wording (description from my first column in the database).

gtswhitt said 1 year, 10 months ago:

jjmcm123,

………………..posts are not showing up……………..

bcb said 1 year, 10 months ago:

@jjmcm123

Without knowing how you are building your site, it is hard for me to give you a good answer. If you are using WST, you can follow the directions in this help article about adding custom CSS for widget color schemes (ignore the first step about includecolorcss=0)

http://support.godaddy.com/help/6499

If you are editing the HTML directly, then you can add the code to the page using a <style> tag. This is usually placed in the <head> of the page, but it can be anywhere such as right above your widget <script> tag:

<style type=”text/css”>
…PUT YOUR CSS HERE…
</style>

Hope that helps.

Regards,
Brad B.
Easy Database Developer