I just started out using twitter bootstrap and so far I've had a nice experience.
I'm currently having some trouble with positioning some .well elements the way I'd like them to be. Basically, this is what I'd like to see them
But this is what I get
The second row is clearly overlapping the first one because the elements are floated and the row is not wrapped around the .well element. I tried to apply .clearfix class but sadly it did not fix this.
Here's the html I'm currently using
<div class="container">
<div class="row offset-top-large">
<div class="col-md-9">
<a href="#" class="well well-lg">
</a>
</div>
</div>
<div class="row offset-top">
<div class="col-md-9">
<a href="#" class="well well-lg">
</a>
</div>
</div>
</div>
The .offset-top classes just add additional margins to the rows
.offset-top-large{
margin-top:100px;
}
.offset-top{
margin-top:20px;
}
I know that I can fix this on my own by manipulating the css, like, removing the floats, for example, but my question is - can I do this (get the desired output) without adding any additional CSS and possibly breaking the bootstrap functionality (resizing to smaller screens etc.).
Edit
Sorry, I had posted the code with the wrong well size class - I have corrected it now and here is a fiddle displaying my problem - http://www.bootply.com/127620
Thanks!
Based on the html and css you provided, this has nothing to do with floats. The problem is that you only have link elements in your rows, which by default are inline elements. Inline elements don't take up any space in their container elements. Try adding display:block or display:inline-block to the well elements.
The update to your question doesn't change a lot, you just need to increase the margin to account for the larger well size.
Try this:
.offset-top-large{
margin-top:100px;
}
.offset-top{
margin-top:50px;
}
Note: bantroth is also correct, adding display:block to your a tags is another solution.
Related
I have the following panel inside my project:
As you can see, there is something drastically wrong with it... i.e the bootstrap input tags decide to overflow and go outside of the panel.
My question is how can I get this to wrap onto the next line when there isn't enough space on the given line...
I have the following html:
<div class="panel-body">
<div style="max-width:100%">
<span *ngFor="let hobbie of sport.hobbies" class="label label-success" style="padding:2%; margin-right:1%">{{hobbie.name}}</span>
</div>
</div>
I've tried setting the max-width, display:inline-block, word-wrap: break-word yet none of these solution which I found on the web worked for me.
Can anyone suggest what else I could try?
Try float:left instead of display:inline-block
Panel is will already stay inherit to the parent. So you'll not need max-width set to 100%. But if you are trying to make sure that the buttons will cover all the row and start on new line if overflow. Either you can get rid of max-width or add code for column definition inside your panel-body, this comes from Bootstrap Grid.
<div class=col-xs-12>
what if you do it like so
<div class="panel-body">
<div class="col-xs-12">
<span *ngFor="let hobbie of sport.hobbies" class="label label-success" style="padding:2%; margin-right:1%">{{hobbie.name}}</span>
</div>
</div>
Try using the column grid of bootstrap and probably you won't need to apply any styles to it..
But it would be better if you provided a fiddle so we could be a better help to you!
I'd like to ask can this code be correct from Bootstrap point of view? I expect the answer is yes. The question is about additional tag in between row and col(s).
<div class="row">
<something>
<div class="col-sm-6">
a
</div>
<div class="col-sm-6">
b
</div>
</something>
</div>
P.S. <something> has no css styles and that's a directive from AngularJS.
There is nothing wrong here, but there are better practices on using bootstrap.
Just take care of minus margins and clearfix, check if the style flow its ok.
By the way, you can use "comment directive" if u need to use that something tag just for angularJs directive.
From the Bootstrap docs..
Content should be placed within columns, and only columns may be
immediate children of rows.
The Bootstrap row has a negative margin to compensate for column padding. <something> doesn't specifically cause a problem in your example, but it's incorrect from a Bootstrap standpoint.
In that code, the something tag will simply be given the entire 12 column width of the row div. The internal elements will then be split into the relevant grids as long as there is nothing on the something tag which would interfere.
I think this should work fine, but as a sidenote I would normally write this as
<something>
<div class="row">
<div class="col-sm-6">
a
</div>
<div class="col-sm-6">
b
</div>
</div>
</something>
That way then gives you the option to add more rows etc into the something section easily if needed, and just aids readability in my humble opinion.
In this case row basically has the same purpose as col-md-12, but row will give you a margin of -15px to both left and right. To avoid a horizontal scroll-bar you can wrap the whole thing in a div with the class container.
looks good to me but i think according to your "something" element it can vary
So, I'm attempting to make my own website (Yeah, I finally sucked it up and started doing markup, sigh) - problem I'm having is I'm trying to center a button, and it's offset a little. Without the <center> it's all the way to the left.
Also tried :
style="align-items:center"
<div id="form-container" style="align-items:center;">
<div>
<fieldset>
<center><input class="button0" value="Install Redux" type="button" /></center>
</fieldset>
</div>
</div>
You just have to put <center> before your <div> and close it after </div>.
Like this:
<center>
<div id="form-container" style="align-items:center;">
<div>
<fieldset>
<input class="button0" value="Install Redux" type="button" />
</fieldset>
</div>
</div>
</center>
I've also made a CodePen and a JSFiddle for you.
Try text-align:center on the parent, or use left:0;top:0;position:relative;webkitTransform:translate3d(-50%,0%,0%); where parent doesn't have position:static (the default)
I would also recommend checking out Bootstrap because it has a nice grid layout that lets you define which 12ths of the page you want columns to lay in, simply by defining classes like .btn-default or .nav or in your case class="col-xs-12" inside that other column
They also have really nice styles for forms and input buttons etc. (see video on my example site below)
Try resizing your browser while looking at their examples. Pretty much, you define class="col-xs-12" if you want it to appear as 12/12 width of the row on extra small (mobile) and LARGER devices, and you can mix them class="col-xs-12 col-md-6" so it will split the row on larger (tablet) size devices. It's the number 1 repository on GitHub, and only takes about 30 minutes to read through the Grid Layout and search around for "Nav" and "Button" elements.
I recently made a quick site http://neaumusic.github.io, feel free to check it out, and good luck
Two ways:
1) Set margin-left: auto; AND margin-right: auto; to the containing div OR
2) Set display:flex; AND justify-content:center;to the parent container.
Google flex box for a little more information, its very useful for layout once you get the hang of it.
As stated in the comments, the center tag is no longer supported.
What about if you try #form-container { text-align: center; } ? It will center all children, including button.
I would definitely recommend using flexbox, the only issue being ie8/9 support.
It really makes layout so much easier and you don't have to create very specific, often arbitrary margins to get your stuff to align nicely, particularly vertical alignment.
Your alignment options are split between the container and the items. It does row and column layout too.
Here is a link I used to get me started.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Here's the fiddle: http://jsfiddle.net/vhcFw/
Here's the code:
<div style='display:block-inline;height:100px;width:100px;background:red;'></div>
<div style='display:block-inline;height:100px;width:100px;background:blue;'></div>
Essentially, I cannot get the divs to render side- by side (especially when using inline styling). I realise this is a simple mistake, but I cannot figure out how to fix it. Thanks in advance.
Simple syntax error.
Use display:inline-block not display:block-inline
Updated jsFiddle here
See MDN - display properties.
Alternatively, you could also float the elements.
jsFiddle here
simply add float:left.to your style
<div style='display:block;height:100px;width:100px;background:red;float:left;'> </div>
<div style='display:block;height:100px;width:100px;background:blue;float:left;'></div>
You have a few options here to consider. The best choice would be to use a flex container to surround the the elements which will by default render them side by side.
<div style='display:flex;'>
<div style='height:100px;width:100px;background:red;'></div>
<div style='height:100px;width:100px;background:blue;'></div>
</div>
Without a container you can just leave them to their default display which would be as block elements and float them left using float: left;.
<div style='height:100px;width:100px;background:red;float:left;'></div>
<div style='height:100px;width:100px;background:blue;float:left;'></div>
You can also change their display to be inline-block which have properties of both inline and block elements. MDN has exhaustive documentation about the display property.
<div style='height:100px;width:100px;background:red;display:inline-block;'></div>
<div style='height:100px;width:100px;background:blue;display:inline-block;'></div>
I'm working with vertically aligned items in a list that needs to work in IE7. I've been referencing code on this page which seems to work well cross browser.
I am experiencing an issue in IE7 where the first list item is not expanding to fit the width of the elements inside it. Below is a link to my code.
http://jsfiddle.net/grimmus/jUFMJ/
<ul>
<li>
<div class="outerContainer">
<div class="innerContainer">
<div class="element">
<a href="#">
To Verify
</a>
</div>
</div>
</div>
<div class="outerNumber">
<div class="innerNumber">
<div class="element">
<a href="#">
3903
</a>
</div>
</div>
</div>
</li>
<li>
<div class="outerContainer">
<div class="innerContainer">
<div class="element">To Authorize</div>
</div>
</div>
</li>
<li>
<div class="outerContainer">
<div class="innerContainer">
<div class="element">View Payments</</div>
</div>
</div>
</li>
<li>
<div class="outerContainer">
<div class="innerContainer">
<div class="element">To Submit/Modify</div>
</div>
</div>
</li>
</ul>
The items in the list will be dynamic so it's not really possible to assign a specific width to each LI.
Is anyone aware of a way i can make the list item expand to fit the child elements without a specific width ?
Well, you've got a whole stack of IE7-specific hacks in there (ie the * hacks), but to be honest, some of them are making things worse rather than better.
IE7 does have some CSS issues, and sometimes CSS hacks are justified, but I don't think what you're doing here is really helping.
I was able to get things working much better simply by disabling several of the bits of hacked CSS code.
For example, .items li .outerContainer .innerContainer .element a specifies position:absolute, but only for IE7. This completely changes how the element is positioned, and of course it goes wrong.
And .items li .outerContainer .innerContainer .element,.items li .outerNumber .innerNumber .element specifies top:-50%. This is what is pushing most of your content out of the top of their boxes. If I disable that, the content appears back in view. Not quite in the right place, but visible and usable.
So the first thing I would suggest that you do is remove all of your current IE7-hacks. They are breaking things, not making them better.
Removing those hacks will make your menu usable in IE7. It won't look perfect, but it will be usable. And personally I'd leave it at that. You say you need the site to work in IE7; it will work. It may not look quite as pretty as other browsers, but it will work.
If you really do need to get it pixel perfect in IE7, then yes, you may need a few IE7 hacks. Different ones to the ones you've already tried already though! You need to be a bit more subtle with them. Maybe just adjusting the padding-top on .element or something like that to move the text down to a more central position.
Hope that helps.
[EDITS] Further thoughts on how to resolve the problem...
You mention that padding-top is tricky because some elements go over two lines. This will indeed make it difficult to accurately pad all the elements using a single style. If you know in advance which ones will be longer, you could give them a different padding to the others, but I realise that this might be problematic.
Another angle you could take is Javascript. A small bit of javascript specifically to solve this problem just for IE7 would be fairly simple to achieve, and wouldn't need to have any effect on other browsers.
You could also consider using a JS polyfill library like ie9.js or Selectivizr, which try to fix some of the CSS issues and missing features in older versions of IE.