bootstrap 3 center div in CELL - javascript

I'm using Bootstrap 3 and I want to center a div within a cell in the container row. when I looked I only found topics about centering the div in the container which is not what I need. I want to know how to center the div (both vertically and horizontally) in the particular cell that it is. The reason is that on the same row I have other divs of bigger height and at the end of the row I want to put a button which is relatively small compared to the other divs and hence I want to center it to make it look pretty.
What I've tried until now is to go into the bootstrap.min.css file and change the following:
.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td{
padding:8px;
line-height:1.42857143;
vertical-align:top;
border-top:1px solid #ddd}
to:
.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td{
padding:8px;
line-height:1.42857143;
vertical-align:middle;
border-top:1px solid #ddd}
Which didn't seem to change anything so I'm guessing I'm not on the right track.

For center-ing a div horizontally, you can put in CSS file:
margin-left: auto; margin-right:auto;
For vertical alignment:
margin-top: auto; margin-bottom: auto;
Posting your HTML code would be helpful btw.

For both vertical and horizontal centering, this solution worked for me: http://jsfiddle.net/hg8Sn/
The only downside of this is that as I am using bootstrap, when the window gets smaller the button would be aligned to the left of the div. I fixed this by making the button take up the whole width of the div so I set col-xs and col-md to 12:
<div id="addchart" class="col-md-6 col-lg-6 col-xs-12 col-sm-12 text-center">
<button id="add-chart-btn" class="btn btn-lg btn-default">Add Chart</button>
</div>
For me, this only centers the button and it doesn't stretch it to the width of the container. It could be because I am using a specific bootstrap theme but either way if someone would want to fix this then they can set a fixed width to the button.

Check and see you are using bootstrap.min.css and not bootstrap.css.
Maybe you might be linking the wrong css files.

Related

Has to be easy - Div panel text seems to realign center when clicking to collapse the panel

The issue is at: http://www.tenyeartwilight.com/
There is a jQuery slideToggle function on the second paragraph of the main section of the page (which is just a sandbox for me to learn). It works, but the enclosed text shifts from a left-align to a center-align and I can't figure out how and why, and I know this has got to be simple. The background corners change also, and I am not sure what's getting inherited/"de-herited".
I don't mind cruelty as long as I understand the solution. Thanks.
p.s. - the text is an excerpt copied from Inside the Microsoft Build Engine: MSBuild and Team Foundation Build by Sayed Ibrahim Hashimi and William Bartholomew.
EDIT: My web programming level should be pretty obvious from my question. I understand the broad strokes, but am still breaking down the details.
It is not only centered when it collapse. It is centered all the time. The reason why it looks like its centered is because the second paragraph got covered by left menu.
when it collapse, jQuery set the width of the second paragraph to a right amount which is just wide enough to show the left side of the ul.
Add this css to your code to see what i mean.
#nav{
opacity: 0.5;
}
EDIT: Responsive css and restructure for better readability
Move footer out of section. It's easier to manage and make scene to ours who read your code.So inside <body>you have
<div id="header"></div>
<div id="nav"></div>
<div id="section"></div>
<div id="footer"></div>
on the same level
Then in css you will have
#nav
{
width: 18%;
padding: 1%;
float: left
}
#section
{
width: 78%;
padding: 1%;
float: right;
}

Issues aligning links that appear on hover

I am trying to design a tumblr theme. I've set up a div with four buttons at the bottom of each post. One of these buttons is a share button. You hover over the share button and a div appears with links (you click and a new window opens and the post gets shared where ever you selected it to be shared).
In the example below: when I roll over the icon with the mouse, it comes up aligned to the left.
IMAGE HERE: https://drive.google.com/file/d/0B1O3Ee_1Z5cRTDdaSTBQNW5mM0U/view?usp=sharing
Also, when I resize the page, the menu ends up being in a totally different position.
I would like for the menu to appear as it appears in this image. I want the menu to appear directly beneath the div of buttons. I would like this menu to remain in the same position when in the page is resized or is a mobile viewport size. (This is a mock up I made with a photo editor) I've tried various adjustments in my code, etc with no avail.
IMAGE HERE: https://drive.google.com/file/d/0B1O3Ee_1Z5cRX3hPd2ZGekJhU0U/view?usp=sharing
Here is my code:
CSS:
.showme{
display: none;
width:100px;
height:120px;
text-align:right;
margin-top:30px;
z-index:5;
position:absolute;
float:right;
}
.showhim:hover .showme{
display : block;
z-index:5;
}
HTML:
<div class="showhim">
<li style="float:right; margin-left:5px; list-style-type:none; line-height:0px; padding-top:1px;">
<i class="fa fa-share-square fa-lg"></i>
</li>
<div class="showme">
Twitter<br/>
Facebook<br/>
Google Plus<br/>
Pinterest<br/>
Email
</div>
I am open to any method to try and get this to work. I also have no problems with making this an onClick event rather than a hover event. My guess is that an onClick event would be smarter for mobile users (I'd love some input on this).
Any help is greatly appreciated.
At the minimum, you'll want to add something like:
right: 0;
to the CSS of .showme. This will place the block with its right border aligned with the right border of the containing block.
Note that the containing block is not necessarily the immediate parent. You probably want to add:
position: relative;
to the CSS of whichever element you want to use as the containing block (probably .showhim).

zero height textarea is not zero pixels high

I'm trying to make collapsible widgets in a side panel on my page. For the most part it works fine. I'm able to set the height of child div's to 0px with a transition, and they disappear.
However, I've found that a textarea will not collapse completely. When I set the height of the textarea to 0px it seems to transition like the other div's, but it still appears to occupy more space then 0px high.
The html is like this:
<div class="container">
<div class="heading" onclick="toggleSiblings(this)">heading</div>
<textarea class="collapsible" placeholder="type in here..."></textarea>
</div>
<div class="container">
<div class="heading" onclick="toggleSiblings(this)">heading</div>
<div class="collapsible"></div>
</div>
toggleSibblings() loops through all the siblings with a class of "collapsible" and toggles the "collapsed" class on them. The "collapsed" class just sets the height to 0px
Here's a jsfiddle to show my problem: http://jsfiddle.net/447n50cy/
Can anyone tell my why the textarea is occupying the extra space?
Putting float:left; or display:block; along with transitioning to padding:0; will cause it to collapse. As an inline-block element it has issues collapsing properly.
Textarea have by default margin and padding:
You could reset the textarea:
textarea {
margin:0;
padding:0;
outline:0;
}
Add this to your fiddle. The problem is that you probably want some padding when people enter something in the textarea. You could easily use jQuery to add and remove classes.

Centered content with header from left to center

I didn't know what would be the best title for my question...
Well, I'll show what I want to do with a simple picture:
The issue:
I have my content centered, lets say it's 980px width.
Now, my header will have a logo and a menu.
BUT, I want my header to
use only a left side of the top, like 50% of the content width and
then stretch to the left side of the viewport. I know this is
possible using javascript and calculate the left offset of the
content and set the dynamic width div with it's left offset.
Is it the best way? I believe there should be another way, but I can't think of one. Hope you guys have a better idea than mine, since mine slows down the perfomance of the site when I resize the window.
Maybe have 2 divs; one in the background and one to contain the logo?
http://jsfiddle.net/kUKyp/1/
I believe what you are after is margin:auto in CSS. It's very simple:
Put your content div on the page, with a fixed width of say 980px as you wanted and set margin:auto.
Put your logo and menu div inside content.
Here is a good example of this in action:
http://bluerobot.com/web/css/center1.html
The CSS code from the above page:
body {
margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
text-align:center; /* Hack for IE5/Win */
}
#Content {
width:500px;
margin:0px auto; /* Right and left margin widths set to "auto" */
text-align:left; /* Counteract to IE5/Win Hack */
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
And the markup:
<body>
<div id="Content"></div>
</body>
Using twitter bootstraps fluid layouts
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="span6"> (6 for half of the width, number can be changed 1-12) your logo and menu
</div>
your content
</div>
</div>

I need a custom border for a div box. What are the ways to apply this?

The problem is that the dimensions of the div box and its location will be changing dynamically via JavaScript, and the box itself must be 100% transparent.
Look at the picture to figure out what I mean. As far as I know, there is nothing that can be done via pure CSS, am I right?
Maybe you know some tricks that could help me out (except for that when it's done with four boxes on the perimeter nor when it's done with nested boxes)?
http://savepic.org/85113.png
Yeah, short of the advanced multiple background image stuff and/or border images in CSS 3, you’d need some nested divs.
Maybe something like this:
<style type="text/css">
.box-1-top,
.box-1-bottom{height: 5px; font-size: 0;/* Make height work in IE */ background: url(box-1-background.gif) left top repeat-x;}
.box-1-left{padding-left: 5px; background: url(box-1-background.gif) left top repeat-y;}
.box-1-right{padding-right: 5px; background: url(box-1-background.gif) right top repeat-y;}
</style>
<div class="box-1">
<div class="box-1-top"></div>
<div class="box-1-left">
<div class="box-1-right">
Box content here
</div>
</div>
<div class="box-1-bottom"></div>
</div>
In CSS3 you can do this by applying
Border Images
Before applying this look at
Browser support for CSS3 properties

Categories

Resources