I am trying to align mat-list-option checkbox with the text so that both can align at the top but somehow they are aligning at the center
Image
If you see the image, I want to align the Required label with the checkbox but the checkbox is showing much below the required label. Could you please suggest how to address this?
Related
I'm having an issue with radio boxes on a dev website.
In a contact form I have 4 radio buttons which can be selected. Issue is that the boxes and text are not aligned properly.
falsly aligned radio buttons
The radio boxes should not have that much space below. Right now it looks like the are aligned to the top, but should rather be aligned to the middle so they are on one height with the text. Hope you know what I mean.
I tried adding minus margin to the bottom or adding margin to the top but this adds also space to the radio box text.
after adding margin-top: 35px;
It should be aligned just like in the following screenshot. The small blue line should be in the middle of the radio box.How I want it to be
This strongly depends on your implementation, one can only guess for an answer without the code used.
A guess: you could set the height of the radio button to 1em.
Another guess that likely works but would not be nice code:
transform: translateY(50%); /* on the radio buttons */
I'm having trouble aligning menu buttons properly.
How do I move up a button into the white space above it?
Use a negative margin-top value on the span holding it,
see the little dots at the bottom right? how can i get those using an html input tag?
http://i.imgur.com/kpk7h.png
Do you want it or not? You can set the CSS property resize to one of these values, but it's not supported by all browsers.
none
horizontal
vertical
both
I have lot of thumbnail and I want to show check box on images at left-top side as shown in image. I am displaying thumbnail images in Repeater.
How can I do this?
Keep the image and check box in a container after that absolutely position the checkbox
I have these link buttons with text underneath. Right now I am using a table to get everything into alignment. But my boss wants wants a mouseover to trigger both the image and the text state to change. So ideally I would wrap both image and text in <a> and use css:hover. But I can't figure out how to do it. I've tried lists so far with no success. I would like something like:
<li><img src="" /><br /><a>href</a></li>
Something like this ?
make the buttons floated so they can have widths
set their width
put both image and text inside the link
do text-align:center
example: http://jsfiddle.net/gaby/kGd8c/
Wouldn't wotk simply set text-align:center on the li ?