I Need To Shift Only Name Of CheckBox To Some Pixels top not the checkbox

Question

I have created a checkbox with name.I am getting name of checkbox lower than the checkbox. so i need to make those in parallel(stright).

checkbox c=new checkbox("name");
  c.setStyleName("checkbox_style");

Below one is checkbox css code

.checkbox_styleinput { 
    font-family: "Segoe UI Semibold", "Segoe UI Semibold IE";
    font-size: 12px;
    margin-bottom: 5px;
}

By using above code the entire checkbox and its name is shifting up But I need to shift name of checkbox to upper to make checkbox and name of checkbox parallel.

Please help me to complete this

can you give more information.. or a dummy link so i can get idea — Kheema Pandey, Feb 20 '14 at 11:44
I have Added css style once see at that and help me to resolve this problem thanq — user3327342, Feb 20 '14 at 13:48

score 0 · Answer 1 · answered Feb 20 '14 at 14:32

0

Known behavior. You can see it also in the showcase.

Fix by adding the following in your stylesheet. It will be applied to all checkbox input types.

input[type="checkbox"] {
  vertical-align: middle;
}

You can apply the same also for radio inputs.

answered Feb 20 '14 at 14:32

Andrea Boscolo

3,038
1
16
21

This won't work. See different solutions at http://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers Scroll to the most popular solution (close to the bottom). – Andrei Volgin Feb 20 '14 at 16:02
Thanq Its Working Successfully.Instead Of Vertical-align: middle I used Vertical-align: -2px. Thanks a lot for giving me solution – user3327342 Feb 21 '14 at 04:57

score 0 · Answer 2 · answered Feb 20 '14 at 16:00

This is what I use to solve this problem, and make checkboxes look consistent across all browsers:

.gwt-CheckBox {
    display: block;
    margin-top: 6px;
    padding-left: 26px;
    text-indent: -26px;
}
input[type="checkbox"] {
    height: 13px;
    margin: 0 6px;
    *overflow: hidden;
    width: 13px;
}

score 0 · Answer 3 · answered Feb 21 '14 at 05:56

0

I got the solution.....I used below code Try it,Instead of -2px you can use your own length

.checkbox_styleinput {

vertical-align : -2px; }

thanq

answered Feb 21 '14 at 05:56

user3327342

9
2

I Need To Shift Only Name Of CheckBox To Some Pixels top not the checkbox

3 Answers3