Forum

November 2nd, 2014
A A A
Avatar

Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

The forums are currently locked and only available for read only access
sp_Feed Topic RSS sp_TopicIcon
Page drop down icon obscured/incorrect
23/01/2014
19:55
Avatar
drembedded
Member
Members
Forum Posts: 8
Member Since:
23/01/2014
sp_UserOfflineSmall Offline

The drop down selection to choose the number of rows is partially obscurred. This may be because the dropdown icon tick isn't correct. Clicking on the drop down works correctly, its just doesn't look correct.

Perhaps this is an issue where jqgrid can't find the correct icon and chooses something else which screws up the formatting?

Thanks.

Image Enlarger

24/01/2014
00:21
Avatar
drembedded
Member
Members
Forum Posts: 8
Member Since:
23/01/2014
sp_UserOfflineSmall Offline

If I didle the ui.jqgrid.css and change the heigth of the .ui-pg-selbox to 23, the icon look better:

Image Enlarger

Is this something that I've done incorrectly or is this a jqgrid issue?

Thanks.

24/01/2014
20:33
Avatar
Lonewolf217
Member
Members
Forum Posts: 32
Member Since:
22/05/2013
sp_UserOfflineSmall Offline

that page number box is crazy big. have you done any other alterations to the CSS ?  If you use a debugger/DOM explorer (like chrome tools or firebug) are you able to see those elements affected by any other CSS you may have on the page ?

Is there an example available for us to see of this behavior ?

24/01/2014
21:38
Avatar
drembedded
Member
Members
Forum Posts: 8
Member Since:
23/01/2014
sp_UserOfflineSmall Offline

Nope no changes to css except to fix the page drop down select to make it a few pixels larger.

While I do use Firebug I've never used in the way you are suggesting. Can you walk me through the steps to see css interactions?

Thanks.

24/01/2014
21:59
Avatar
Lonewolf217
Member
Members
Forum Posts: 32
Member Since:
22/05/2013
sp_UserOfflineSmall Offline

is this on a public-facing website by chance that we can look at ?

Otherwise, its a little hard to explain.  You basically right click the element you want to look at (such as the paging box) and say Inspect Element.  Then you should be able to see the stylesheets that are applied to the element in the development console. Try to figure out which stylesheet is affecting the paging box to stretch it so wide. 

You can also make sure the element itself hasn't been modified. For example, the box should have html attributes like this

<input class="ui-pg-input" type="text" size="2" maxlength="7" value="0" role="textbox">

so the text box should have size=2.  You can look at the computed styles to see if there is anything which is modifying the width of the element. 

24/01/2014
22:10
Avatar
drembedded
Member
Members
Forum Posts: 8
Member Since:
23/01/2014
sp_UserOfflineSmall Offline

Unfortunately the website is only internal.

Some background... I'm using jqgrid with web2py.

From what I can tell it looks like web2py.css may be modifying it (see screen shot) If you agree the next question would be how to resolve this issue.

Image Enlarger

24/01/2014
22:15
Avatar
Lonewolf217
Member
Members
Forum Posts: 32
Member Since:
22/05/2013
sp_UserOfflineSmall Offline

the order in which your css files are included does play a role.  whichever file is included LAST in the page has highest precedence.  So you can try moving the jquery-ui CSS and jqgrid CSS down below the web2py.css to see if that helps.  Unfortunetly, unless the jquery-ui or jqgrid css explicitly set the width on input elements, the web2py.css is still going to be applied. 

Of course you could also pull out the web2py.css entirely if it is not included in the page.  Having such a generic selector in that file is likely going to cause problems elsewhere as well. Its possible that there are some styles in that stylesheet which are affecting other elements like the dropdown you mentioned in your original post.   If you comment out that stylesheet does everything look as expected ?

24/01/2014
22:33
Avatar
drembedded
Member
Members
Forum Posts: 8
Member Since:
23/01/2014
sp_UserOfflineSmall Offline

Pulled out the web2py.css and then bootstrap.min.css took over with a size of 220px instead of web2py.css's 300px.

I'll spend some time with the css files and see what I can find. There are others that are using web2py with jqgrid so I can't be alone on this issue.

Thank you for your help! I'll post if/when I figure it out.

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
41 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

OlegK: 1255

markw65: 179

kobruleht: 144

phicarre: 132

YamilBracho: 124

Renso: 118

Member Stats:

Guest Posters: 447

Members: 11373

Moderators: 2

Admins: 1

Forum Stats:

Groups: 1

Forums: 8

Topics: 10592

Posts: 31289

Newest Members:

, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.com

Moderators: tony: 7721, Rumen[Trirand]: 81

Administrators: admin: 66

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information