I have setup a content type to hold 3 boolean fields. Then use the content type in a form to display on screen. Only trouble is I want to tidy up the appearance of it and am not sure how to do this.
I would like the radio buttons to appear horizontally aligned and also a 2 line space after each question.
This is not really an Orchard question, more one for CSS. The simplest way to make the radio buttons appear horizontally is to float them left.
input[type="radio"] {
float: left;
}
And then just add some padding to the bottom of each question. I'm not sure what the mark up looks like, but I guess each question in the form has a div on which you can add the padding.
EDIT: I'm a CSS hack and Bertrand has pointed out a better way of achieving this using display:inline-block for the horizontal radio buttons.
Related
I have a split Bootstrap dropdown that I am wrapping in a form and adding to a table heading. The issue is that when you narrow the screen size the dropdown toggle element wraps. At first I assumed it was the form wrap but I think its the table heading.
Here is a http://www.bootply.com/zzRJxiYy80 for an example with live code.
Thanks,
Dan
MINOR UPDATE (More details on comments from answer)
In my case I am using the outline buttons. I have Ransack sort links in each button and filters in the dropdown. The second 'Major Category' one has a slightly wider line than the rest and at this point I am making way too much of a big deal of it. Minor stuff like that drives me nuts but I need to let it go :)
This one is at -0.45em
I played with this and settled on -0.37em
I would suggest overriding Bootstrap's use of float:left for keeping these .btn elements on the same line, and instead use display:inline-block for that. Then, you can use white-space:nowrap to prevent them from breaking to multiple lines when space becomes limited.
Most of the styles you need (display:inline-block and white-space:nowrap) are actually already defined in Bootstrap's CSS - you just need a couple more styles to use them to your advantage:
.btn-group.nowrap > .btn{
float:none;
}
.btn-group.nowrap > .btn:not(:first-child){
margin-left: -0.4em; /* To deal with whitespace between inline-block elements */
}
Here's an updated Bootply to demonstrate. Hope this helps! Let me know if you have any questions.
I have this really tricky CSS formatting issue that i need a quick override fix to align the bullet point with the table I have as a list item. Don't ask me why we have a form like this, but we're using JSF for an internal tool that QA is complaining about. Regardless, there is a table that contains the dropdown box and those radio buttons you see inside a <li></li> block.
What can I apply to either the table, the li, or wrap it in something else to get the bullet point to be vertically centered with that table?
Many thanks!
I have seemingly fixed the issue for IE, but not Chrome. We only are concerned with IE in the company, so I figured I'd post my solution.
I set the list item to have a vertical-align: middle; and the table to be display:inline;.
If anyone has a better solution, I'd like to hear it for the future. Thanks!
http://jsfiddle.net/ADLrh/
Hopefully you can see what I'm after. The three 'fillers' on the top row have sunk, upsetting the pyramid-like formation. Any idea what's causing this?
EDIT: I should also add that the method I go for needs to be flexible because potentially any filler could be a like button and the actual pyramid is quite a lot bigger.
Indeed, like Guy suggested, you're going to want to use the float property rather than display: inline-block, because inline-block is pretty finicky for vertical alignment when using different types of elements next to each other, with whitespace between them.
However, to keep the "pyramid" form, you'll want to wrap the buttons in another div that IS set to display: inline-block, to allow the whole row to center in the current parent div.
Like in this example: http://jsfiddle.net/syd8L/
Remove the white spaces between the HTML elements. This is not however the case where you should use display: inline-block;. Analyze this example. You could use float instead, then you wouldn't need to worry about whitespaces between HTML elements.
Easiest way would be to add some relative positioning to the buttons on the first row, like this:
http://jsfiddle.net/ADLrh/1/
Where you have display: inline-block, you should also add vertical-align: top.
See: http://jsfiddle.net/thirtydot/ADLrh/2/
I'm trying to make a button span the width of a column.
e.g. here: http://davidnhutch.com. Notice how the light grey buttons are only as large as the text they contain? I'd like each button to span the width of that column, but can't for the life of me figure out how to do it. I've done quite a bit of looking around but am still kinda new to this.
Any ideas?
You will have to make them block elements to be able to set a width:
.button {
display: block;
width: 100%;
}
Generally, these buttons are so-called "inline element". The browser renderer has very complex algorithms of layouting these elements. It's like Typesetting but with objects on your screen instead.
CSS and HTML together influence how the algorithm works: determining the width and height, color, etc. of objects. Also their position and how text flows, or how long buttons are.
There is a limitation, however. You cannot use anything that's like a variable width for inline elements.
Adding width: 100%; display: block as others suggested makes some buttons perfect: but only when they start at the left or right of the containing box. If it's after a sentence, then it (should) display as:
<---width of container--->
Text
<----------button-------->
However, the button is not after "Text" anymore, but is put below it. This is because it's now a so-called "block element". It is like a full paragraph, instead of elements in a text line.
If this is what you want; fine and problem solved. If this is not what you want, and instead want:
<---width of container--->
Text <-------button------>
This is not possible. CCS4 would be cool if it adds inline-width: 100% or inline-height, and solve a lot of problems. However CSS4 does not exists yet.
Adding width:100% to .button seems to work for the center and right buttons at the bottom of the page.
I need help to align CSS buttons. I tried many different variations and I just cannot center my button the way I want.
Firstly, have a look at this url: http://www.front-end-developer.net/cssbuttons/example.htm
I'm using 2 images to form a button (this could be done on 1 image, but in this case we've got two). Everything works as expected as long as we apply float:left or float:right to the parent div element, to 'limit' width of the div and close it as soon as the content of the div ends. You can remove float:left from the button to see what I mean.
But what about center positioned buttons? I cannot add float:left/right because I want align it in the middle.
In theory, I could set
{
width:XXpx;
margin:0 auto;
}
And I will get what you can see on this picture:
(source: front-end-developer.net)
But I don't know the length of the text inside. Having different translations my button can be very short, or 5 times that long.
I also tried to use <span> instead of <div>, but unfortunately nested inline elements don't respect their padding correctly...
And yes, I must use <a> inside, so buttons can be accessed by web crawlers.
I'm really stuck on this one.
.button {display:inline-block;}
Seems to do the trick.
inline-block browser-support: http://www.quirksmode.org/css/display.html
More about how to work around the browser issues related to inline-block:
http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/