Can some one help me lining Select Drop down, Input and Submit button in one row.
I am getting only Input and Button aligned in row but Select is going upside.
I tried below in CSS but didn't work
display : inline;
Can you please help to modify the CSS to align all in one row.
Demo
Your example is a bit everywhere. Also, "selecter" should be spelled "selector", but that is beside the point. Use more <div> elements to wrap around smaller code segments. For example:
<div>
<div class="item"><p>Hello</p></div>
<div class="item"><p>Stack</p></div>
<div class="item"><p>Overflow!</p></div>
</div>
Normally, these <div>'s would display underneath one another. However, if we add a styling rule similar to the one you're using, we will get the result of these three elements together on one line.
.item {
display: inline-block;
}
Wrap your button elements in a <div> container and style them with the above. Does this answer your question?
I found the solution ,I just need to make
inline-flex =>inline-flex makes the container inline while still retaining the flex layout properties.
display : inline-flex;
Related
I am newbie in Twitter Bootstrap. It is a very simple question.
Here is the image:
And here is my Code:
<div class="col-md-8 col-xs-6 col-sm-6 placeholders">
<p id="people-things" class="text-center">PEOPLE-THINGS RECOMENDATION</p>
</div>
Problem: I want to put the Recomendation text in one line other then going in next line.
Infos: I had tried every grid in but still couldn't sort it out.
You have to make smaller font-size on .people-things or add this CSS:
.people-things { white-space: nowrap; }
Which is making .people-things to show on one line.
The solution above works but bootstrap grid classes should be ideally used by itself and you should not need any custom styles on top of it.
Try rearranging your grid structure such that apply <col-sm-6> before <col-xs-6>. That will allow more space in the grid cell to fit the text. Also you might not need three levels of grid nesting. You could use: <col-md-8><col-sm-8> and see if that works.
I made a calendar in html and css.
I have individual td for each 30 mins time span.
But i want to create 30 divs inside that td for each minute.
Right now its showing like this :
http://jsfiddle.net/mausami/FHfjL/1/
but i want to display each div in one line.
to show each div i have written ' in each div.
the divs are like this :
<div style="display:inline-block; clear:both; width:0.1%;" class="08:00">'</div>
Can anybody please help me ?
First, a few important improvements to your code.
Class names cannot start with a number.. Quick fix is to append some string to the beginning of them - I used "min_".
You have the same id multiple times. An id should only be used once.
Move all of your styles external - sop doing inline, it's hard to update.
You're not floating anything so you don't need clear:both;
Here's the same thing you have, but pretty code: http://jsfiddle.net/daCrosby/FHfjL/7/
Now, your question. "[how do I] display each div in one line?" I'm not quite sure if you want each div to be in one line (30 lines total), or each div to be in the same line (only 1 line total). So here's both ways:
To display each div on it's own line:
.tbDay div{
display:block;
}
http://jsfiddle.net/daCrosby/FHfjL/8/
To display all 30 in one line:
.tbDay div{
display:inline-block;
width:3.333333%; /* 100% divided by 30 divs */
margin-left:-4px;
}
Note the margin-left:-4px;. This is a fix for the spacing between inline-block elements as discussed here.
http://jsfiddle.net/daCrosby/FHfjL/9/
If you want to use those div to show time passing by,
you could use a gradient and % in background or even better <meter></meter> .
http://www.w3.org/wiki/HTML/Elements/meter
You can easily from js or server side script fill the right value to update your calendar.
cheers
You're displaying the minute div as display:inline-block
Change this to block or remove it completely. Also consider using a list instead of divs.
EDIT
The answer above assumed "each div in a new line" meant one minute div = one new line
As per clarification in the comments below, to make all divs within the td appear in one line, apply a white-space:nowrap
e.g. insert the following into the css portion of your fiddle:
#tblDay td{
white-space:nowrap;
}
Why are you doing clear:both if you want to display them inline-block? Just remove that style rule and it should work as you expect.
When you set display:inline-block, the element effectively behaves like a single character of text, that you can otherwise treat as a block.
Among other things, this means that it will wrap onto a new line if there isn't enough room.
To get around this, add white-space:nowrap to the container element. Optionally, add white-space:normal to the inline-block divs.
I would also suggest defining CSS rules as:
.tdDay {white-space:nowrap}
.tbDay>div {
display:inline-block;
white-space:normal;
}
Please take a look at this fiddle: http://jsfiddle.net/d3uc9/4/
I have a problem with this, as the two divs, in a table, next to each other, are not on the same margin line, even thought they share the same css class etc.
What have I done wrong in the example, and must I change to make them on the same margin-top line?
Thanks, I have tried to be as clear as possible.
What I mean is that they should share the same margin-top line, but they don't, and what must I do to fix this?
You just need something like:
td { vertical-align: top;}
Example fiddle
This says that the content of a table cell is aligned to the top of the cell rather than to the middle. This is needed because your left hand div is not as big as the one on the right.
Also I notice that you are duplicating ids several times in your HTML (eg <div id="stylized" class="myform">). This is not valid HTML and can potentially cause unexpected behaviour in browsers. IDs must be unique and if you want to identify multiple elements in the same way for style purposes then you should use classes.
eg.
<div class="stylized myform">
Just add to your css:
td {vertical-align:top;}
Adding valign="top" will make the column on the left align to the top of the row.
The problem is the vertical alignment of the table. The easiest way to fix it is to add valign="top" to either the <tbody> or <tr>. You could also do it through css by specifying vertical-align:top for the <tr>.
I'm having problems targetting the DIVs on this test page I made at http://flexibletheme.tumblr.com/
In particular I have a div with an id of columns (div#columns), I can't get the background color to change.
Any ideas on how to get the background to render in div#columns?
Add overflow: hidden to #columns to clear the floats.
Another common way to clear floats is the clearfix class.
Take your pick of the two methods, but in general overflow: hidden is easier if it works for you.
In the source code on your page, you're missing a double-quote:
<div id=columns">
Try changing it to:
<div id="columns">
I'm having a little CSS problem with a list of thumbnails. Here's an example:
http://jsfiddle.net/22hs8/
The problem is that when the link is too long to fit in the 150px block it will push the image down. By using inline-block on the list elements instead of a float I could get the images to line up properly, but now I want to have the links at the same height as well.
One thing I tried is making the links itself a block (or surrounding it by a div) and giving that a height, but that would mean they are always the same height even if none of the links uses two rules. Also, if a link is so long it uses three lines the same problem would occur.
In short: how do I align the links to the top of the list items, without breaking the image alignment?
To address one issue, you can add vertical-align:top; to the <li> tag in order to align the content to the top of the element, but unfortunately, I don't believe there's a way to resolve the issue entirely without also implementing one of the following methods:
Placing all of the tags in a separate
Specifying a height on the tags
Using javascript to equalize heights
Options
1. Separate Div
By moving the anchor tags into a separate div, they could be given the same width as the images and floated or displayed inline accordingly, but your markup becomes less semantic when you separate the anchor from the content (and may also be programmatically more complex if these are being dynamically generated).
2. Specifying a Height
This option can be thrown out almost immediately because, as you've stated, the anchor lengths can fluctuate to multiple lines. You could specify the height the the largest know line length, but then you'll ultimately end up with unnecessary white space with groups of short links.
3. JavaScript (jQuery)
While It would be ideal to resolve this issue without the requirement of JavaScript, I think it may be the only option that would allow you to preserve the semantics of your markup, and also apply an equal height to each of the anchor tags.
Recommended Solution
I would recommend setting a default height on the anchors of the largest known line length, then applying a bit of jQuery to normalize the heights of the anchors. This way, if the JavaScript parsing fails or JavaScript is disabled, the user still sees a uniform layout (albeit with potentially more whitespace), and with JavaScript active the heights are normalized.
Apply vertical-align:top; to the <li>
Define default height for non-js users
Equalize heights using jQuery:
(function(){
$.fn.equalizeHeights = function(){
return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ))
}
$(function(){ $('li a').equalizeHeights(); });
})();
Example: http://jsfiddle.net/Eg7hy/
How is this:
http://jsfiddle.net/22hs8/3/
So you're saying that you want the links to not push the content down? I don't see that as being possible unless you don't allow your content to stretch at all. It's natural flow of a page for something above content to force the content down after it if it needs more space.
Have you thought about chopping off the text after a certain number of characters, with a '...' and providing the full text through a title, and providing the full text through a popup (since I assume you're creating some kind of photo gallery)?
The first answer that came to mind was:
"just use a table, it makes this really easy, and works everywhere"
Live Demo
However, I would probably get down voted into oblivion if I posted an answer only containing a <table> tag version, so here's a version using CSS display: table and friends:
Live Demo
Of course, that won't work in IE7 because that browser doesn't support display: table.
I can't think of a way to do this using code closer to your original and display: inline-block, which would also support an arbitrary number of lines. I'd love to see a better way to do this.
HTML:
<div id="container">
<div class="row">
<div class="cell">Some text</div>
<div class="cell">Some more text (too long)</div>
<div class="cell">Some text</div>
<div class="cell">Some text (seriously too long) text text text text text text text text text text text text text</div>
</div>
<div class="row">
<div class="cell"><div class="image">image</div></div>
<div class="cell"><div class="image">image</div></div>
<div class="cell"><div class="image">image</div></div>
<div class="cell"><div class="image">image</div></div>
</div>
</div>
(you could change some of those div tags into ul and li if you wanted to)
CSS:
#container {
display: table
}
.row {
display: table-row;
text-align: center
}
.cell {
display: table-cell;
width: 150px
}
.image {
width: 150px;
height: 150px;
background: grey
}
Add vertical-align:top; to the images.