Full width form control elements inside media/flag object

[asnoba]

Hi,

This might not be a real issue, but if I insert a form control element inside a media-body container it's not expanding to the full width like headlines and paragraphs (http://jsbin.com/tiziku/1/):

Best regards,
Asger

[jayanthkoushik]

Setting width=100% on .media-body does seem to "solve" the issue.

[hnrch02]

@stubbornella @mdo Has setting width: 100% by default any drawbacks?

[mdo]

Seems to be similar to #15023.

[mdo]

I don't think we can set width: 100%; on all .media-bodys. It'll mess with the display: table-cell we use for alignment and what not.

[davinkevin]

Same problem for me.

I want the media body to take the maximum of space with the media-left fixed to 100px and the media-right fixed to 90px of width.

I use less preprocessor with this parameters :

@img-downloadlist-width : 100px;
@button-downloadlist-width : 90px;
 .media-body {
      width : calc(~"100% - " @img-downloadlist-width+@button-downloadlist-width )
    }

All work in the preprocessor part, but the calc result ( width: calc(100% - 190px); ) is not applied at all on the browser...
It seems the display:table-cell prevent any calculation between % and px (it works if I do some calculation between the same unit...).

[warrendodsworth]

This worked in 3.2.0.. In 3.3.0 its broken

[aminariana]

Broke for me on v3.3.1.0. For some reason downgrading to v3.2.0.2 doesn't make it go away.
(I use Bootstrap-sass Rails gem for versioning)

[twbagustin]

Same issue here, width 100% fixes it temporarily also settings a high value of cols attribute, something like cols="1000". I didn't even thought it was an issue, at first I thought it was twbs's update forcing you to set desired cols, until I saw that .form-control has a 100% width so google took me here (:

[cvrebert]

Thanks folks. No further confirmations are necessary.

[m10n]

if anyone else is still stuck on this (width: 100% didn't work for me), swapping out v3.3.1.0's CSS .media-body { display: table-cell; vertical-align: top; } for v3.2.0's .media, .media-body { overflow:hidden; zoom: 1; } did

[krnjn]

I've also found that if you set the "min-width" of the media-left object (i.e. an image– note that setting the width or height attributes does NOT work) and then set the media-body width: 100% that it also works. Alas, these are all hacks and would be better if we found a different way for this to work.

[stubbornella]

Facebook (when they used this technique) set the width of all 'media-body' to 10000px. Which seemed to work well, but they weren't allowing vertical alignment of the media image. I'd have to try it in this context.

I've solved it before by using generated content (see clearfix-stubborn method in OOCSS). 

Overflow hidden works great, but will crop off content (like fly out menus inside the media body).

I'll need to look at a few test cases and see how they respond to an adjustable left image.

On Thu, Nov 27, 2014 at 3:29 PM, Karan Jain [email protected]
wrote:

I've also found that if you set the "min-width" of the media-left object (i.e. an image– note that setting the width or height attributes does NOT work) and then set the media-body width: 100% that it also works. Alas, these are all hacks and would be better if we found a different way for this to work.

Reply to this email directly or view it on GitHub:
#14990 (comment)

[wiesson]

Any updates? I would like to use this component to create nested content ;)

[stubbornella]

We added this rule and it fixed the problem:

.media .media-body {
width: 10000px;
}

[davinkevin]

I was using media-heading with text-overlow() to automatically reduce with ellipsis the title.

Since this modification, we can't do it, because (I think) text-overflow won't work inside table cell with an hard coded width.

Do you have a tricks to let us use text-overflow inside media-heading ?

Thanks

[kkirsche]

Personal support requests such as that I believe are best suited to StackOverflow with the twitter-bootstrap-3 tag rather than GitHub.

[davinkevin]

I will do that, but I think this behaviour is related to this fix... (And I was part of those reporting for this bug). So in my case, this "bug" caused some other strange behavior.

I will post it on Stack, thanks

[conghai]

This issue comeback in 3.3.6.

Iam not sure for all but this work with me:
Overwrite media-body this in your css file

.media-body
width: auto