I have a form, ending with an "I agree to these terms and conditions line" with a checkbox.
The code that I have for the checkbox is currently:
Although all is functioning well, the width of the checkbox element is too much. This causes a very wide space between the "I agree..." statement, and the actual checkbox. Any tips on how I can left align the checkbox, or reduce the width of the checkbox's element.enter image description here
Standard checkboxes in Rails could be changed with CSS in the following way:
input[type="checkbox"]
width: 10px //or however wide you desire
height: 10px
Although you should be detailed with your selector in case your checkbox is wrapped in some div with an ID, in which case the above will look slightly different:
#div input[type="checkbox"]
width: 10px //or however wide you desire
height: 10px
Related
I have a CheckBoxGroup that shows 8 items. The default presentation is vertical, which does not really look good in my layout.
But if I set the presentation to horizontal using
checkBoxGroup.addStyleName(ValoTheme.OPTIONGROUP_HORIZONTAL);
then the 8 items do not have enough space. So I am forced to use the vertical style but I am not at all content with that.
Is there a way to show a single CheckBoxGroup horizontally, but using 2 (or more) rows?
Edit:
I have found a quick-fix to the problem by styling the checkboxes to be floating to the left (with horizontal presentation of the group). It now shows 6 Checkboxes on the first line, and 2 on the second line. It is still not beatiful, but better than the other 2 options. I am still looking forward to receiving a better solution! (if there is none, then so be it but at least I then know that it is not possible)
This should be doable with flex box, since CheckBoxOptions are spans in div. So we need to add flex css rules for the checkBoxGroup.
First add stylename
checkBoxGroup.addStyleName("my-flex-checkboxgroup")
Then in your theme
.my-flex-checkboxgroup {
display: flex;
flex-wrap: wrap;
width: XXXpx
height: auto;
}
You need to set the width XXX so that four columns fit
E.g. if you have
CheckBoxGroup checkBoxGroup = new CheckBoxGroup();
checkBoxGroup.setItems("Option 1","Option 2","Option 3","Option 4","Option 5","Option 6","Option 7","Option 8");
You need rougly 500px or so, but if captions are longer, more naturally.
This worked for me atleast.
I need to create a a 2x2 grid for a mobile website where the cells are text areas. The problem is that when I do this there doesn't seem to be a way where the text boxes all join together at the inner-most corner. All I am able to achieve is two separate text boxes on top of two other separate text boxes none of which are touching vertically of horizontally. I have tried to manipulate the margins, padding, and borders, but nothing works. Thanks for your help!
Working example: http://jsfiddle.net/Gajotres/cGt2J/
CSS used:
.ui-input-text {
border-radius: 0 !important;
margin:0 !important;
}
I would like to know the exact size of an element without margin, border and padding, just the width and height of the most inner box (see image below).
Currently i'm aware of the function "getBoundingClientRect" which gives the size including border and padding. There is also the "client" property which returns a Rect including the padding.
So the question is, how do i get the width and height without padding?
Unfortunately the DOM does not provide such functionality. That's why most libraries like jQuery, ExtJS, etc. provide helper methods. They essentially parse the style and figure it out.
Here's an example:
<div style="width: 100px; height: 100px; padding: 5px; border: 1px solid #000"></div>
int getWidth(Element element) {
var paddingLeft = element.style.paddingLeft.replaceAll('px', ''); // You may want to deal with different units.
var paddingRight = element.style.paddingLeft.replaceAll('px', '');
return element.clientWidth - int.parse(paddingLeft) - int.parse(paddingRight);
}
And the usage:
print(getWidth(query('#test')));
Result:
100
Notes:
You might consider dealing with different types of units (px, pt, em, ...).
The box-sizing property also has an effect you might want to check for.
If I or you happen to find the time, perhaps release a Pub package or something. :)
This pub package can predict the size of a text (without margin, border and padding) that does not yet exist in the DOM: https://pub.dartlang.org/packages/textent
Try the relatively recently introduced Element.contentEdge, that seems to be exactly what you want.
This comment from a Google employee lists some more related methods that has also been added. Note that at least some of them are still marked as Experimental in the API docs, but they can be useful nonetheless.
am using jquerymobile for representing a two column radiobuttons in my project, the problem am facing is the contents of the block-a is lengther than the contents of the block-b so am getting a difference of div size the output is at (http://i40.tinypic.com/r0tt85.png) if u can lookat my out put the second question 6th option is small when compare to all the other ones the block size is based on the content how can i make same size for all the blocks without based on the content any help please needed
If you want all blocks to be the same height, you can set the height in CSS:
.ui-bar {
height: 100px !important;
}
I have a element and it is possible that it is longer than one line, so i have to set a line-height>1 otherwise it looks crappy. But if i do that, the lines are higher than the text, and the text is centered. So it does not match the top. How can i change the position of the text to the top of the line, or is there another way to get some space between two lines?
Line height by definition centers the font-size within the given line height. If you have a 12px font and a 16px line-height, the text will be centered within the 16px, leaving 2px on both the top and the bottom.
One solution to push this text up while maintaining the line height is to add a negative margin to the element and push it up negatively:
float: left;
margin-top: -2px;
Try this:
<style type="text/css">
.spacer
{
line-height:1px;
}
.spacer:after
{
content:".";
visibility:invisible;
line-height:1px;
}
</style>
You can increase the line height in the above CSS code there and use it like this:
your line one
<p class="spacer"></p>
your line two