incubator-bloodhound-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Matevž Bradač <mate...@gmail.com>
Subject Re: [Apache Bloodhound] #468: Content is not well aligned within the quick ticket dialog
Date Sat, 16 Mar 2013 19:23:39 GMT
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 <
> bloodhound-dev@incubator.apache.org> 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!


Mime
View raw message