Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Increase default width of inputs #58

Closed
jonashaag opened this issue Mar 25, 2013 · 3 comments
Closed

Increase default width of inputs #58

jonashaag opened this issue Mar 25, 2013 · 3 comments

Comments

@jonashaag
Copy link
Contributor

Inputs should be much wider, maybe twice as wide. Textareas in particular should be much wider -- currently they're even smaller than in Django's admin.

@grillermo
Copy link

They should be a percent, right now they have a ridiculously small fixed width.
I went with 99%(to leave a little padding) but its a far from perfect solution.

darklow added a commit that referenced this issue Mar 26, 2013
@darklow
Copy link
Owner

darklow commented Mar 26, 2013

For few projects i actually minimize inputs as default are too large

So i think it depends on you project - if it's an numeric input for price or something similar i don't think you want wider inputs for that. (However i saw some of my colleagues using browser maximized having 1920xN, this is not normal too, then of course such form looks more than strange)

Few things i could suggest:

  1. I just added .row-fluid class to center container, which means you can use any of bootstrap .spanX classes for your inputs, like .span1 to .span12. Now these classes will work better, because they will adapt browser width when used in .row-fluid class and will always fit proportionally.

image

  1. If you wish do not wish to use spanX classes, and used fixed width, you can increase twitter bootstrap default width for all inputs using following CSS in your projects .css file:
input,textarea,.uneditable-input{width:206px;}
select{width:220px}

These are twitter bootstrap values for .spanX sizes (Not fluid, regular ones), you can use one of those combinations for input and select for your default width.

input.span12,textarea.span12,.uneditable-input.span12{width:926px;}
input.span11,textarea.span11,.uneditable-input.span11{width:846px;}
input.span10,textarea.span10,.uneditable-input.span10{width:766px;}
input.span9,textarea.span9,.uneditable-input.span9{width:686px;}
input.span8,textarea.span8,.uneditable-input.span8{width:606px;}
input.span7,textarea.span7,.uneditable-input.span7{width:526px;}
input.span6,textarea.span6,.uneditable-input.span6{width:446px;}
input.span5,textarea.span5,.uneditable-input.span5{width:366px;}
input.span4,textarea.span4,.uneditable-input.span4{width:286px;}
input.span3,textarea.span3,.uneditable-input.span3{width:206px;}
.span12{width:940px;}
.span11{width:860px;}
.span10{width:780px;}
.span9{width:700px;}
.span8{width:620px;}
.span7{width:540px;}
.span6{width:460px;}
.span5{width:380px;}
.span4{width:300px;}
.span3{width:220px;}

Alternatively you can copy out from bootstrap.css fluid spanX sizes and set them as default.

phihos pushed a commit to phihos/django-suit that referenced this issue Mar 28, 2013
…allow usage of bootstrap fluid .spanX classes
@darklow
Copy link
Owner

darklow commented May 10, 2013

Since v.0.2.0 Django Suit supports fluid classes. Closing issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants