You can try using the CSS3 box-sizing property. By default it's set to
"content-box" which first calculates the element width and then *adds*
border and padding to get the "total" width. So in your case this becomes
100% + <some value> and this is then squeezed into the parent div which
has a fixed width of 300px.
If you use the "border-box" value, it will calculate the width including
padding and border. For the textarea this seems fine, but for the input
you'll have to compensate with a bit of top and bottom padding, like this:
{{{
#qct-fieldset input, #qct-fieldset textarea {
width: 100%;
box-sizing: border-box;
}
#qct-fieldset input {
padding-top: 1em;
padding-bottom: 1em;
}
}}}
The above works fine for me, but I haven't tested it in all browsers
(you may have to use -moz-box-sizing and/or -webkit-box-sizing as well).
--
matevz
On 16. Mar, 2013, at 18:50, Ryan Ollos wrote:
> On Fri, Mar 15, 2013 at 9:48 AM, Apache Bloodhound <
> [email protected]> wrote:
>
>> #468: Content is not well aligned within the quick ticket dialog
>> --------------------------+-----------------------
>> Reporter: rjollos | Owner: rjollos
>> Type: defect | Status: new
>> Priority: major | Milestone: Release 6
>> Component: ui design | Version:
>> Keywords: quick ticket |
>> --------------------------+-----------------------
>> Add a margin on the right and prevent text from overflowing the dialog.
>>
>> [[Image(QuickTicket.png)]]
>
>
>
> Bloodhound devs,
>
> I'm struggling with some Bootstrap and CSS issues for #468. Here is a
> jsFiddle that demonstrates the issue: http://jsfiddle.net/fXsGw/2/
>
> I'd like the input element to fill the width of the div, but there should
> be some padding between the right of the input element and the edge of the
> div, the same as there is on the left.
>
> If I set the input element's padding-left and padding-right to 0, the input
> element is nicely aligned within the div, but now of course I don't have
> padding for the text within the input element:
> http://jsfiddle.net/fXsGw/3/
>
> Any ideas? Thank you for taking a look!
