Thank you for answer this is the codepen example I try to .complete.
order1
I have four button with dropdown, as I choose from dropdown list first the chosen item needs to be submitted.
second jf I did not choose anything empty check should work to prevent empty submission.
thank you.
That seems to be the opposite of what you asked in the previous question? Validation of form elements is a JS question so i will move thread to js forum.
thank you for answer. that part is ok but as I chose from dropdown list is it submitted as I press submit button? thank you.
Hi PaulOB
I would like to ask : as I choose item from dropdown list , how is it sent by the button? thank you.
Hi PaulOB
I am sorry for cumming again with small problems. I changed the social buttons, better said I replaced them but the list elements doesn’t stay aligned vertical as the display gets smaller., then adjusted right boyyom. please help me. thank you.
the codepen>
registrarion3
this is the new code
<ul class="nolistmark" style="">
<li>
<!--<button type="button" class="btn btn-lg btn-fb">-->
<!--<button type="button" class="btn1 buttonsocial" href="#"></button>-->
<a class="button button1" href="#">
<i class="fa fa-facebook i"> <span class="btnName">Facebook</span></i></a>
</li>
<li>
<!--<button type="button" class="btn btn-tw">-->
<a class="button button1" href="#">
<i class="fa fa-twitter i"> <span class="btnName">Twitter</span></i></a>
</li>
<li>
<!--<button type="button" class="btn btn-li">-->
<a class="button button1" href="#">
<i class="fa fa-linkedin i"> <span class="btnName">Linkedin</span></i></a>
</li>
<li>
<!--<button type="button" class="btn btn-ins">-->
<a class="button button1" href="#">
<i class="fa fa-instagram i"> <span class="btnName">Instagram</span></i></a>
</li>
<li>
<br>
<a class="button button1" href="#">
<i class="fa fa-wordpress i"> <span class="btnName">Wordpress</span></i></a>
</li>
</ul>
Sorry but I don’t know what type of display you are looking for.
If you want the social icons aligned vertical then you are going to have to force them with a width because the structure you have doesn’t allow for automatic alignment in that way.
I would do something like this:
.nolistmark .button{
display:flex;
}
.nolistmark .button .fa:before{
width:25px;
margin-right:1rem;
}
If you don’t want the green block on the right then remove the float:right on .button1.
You have a stray break tag here messing things up also.
<li>
<br>
<a class="button button1" href="#">
As I said I don’t really know what you wanted
Is it worth reconsidering the red and green color palette? Those two colors are directly opposite each other on the color wheel, making it very difficult for them to look good when presented together by each other.
2 Likes
thank you for reply. I am open for suggestions. anything is better then my experiment is good.thank you.
thank you for answer. I have an experiment regitration2. its code is faulty, I would like to reproduce it possibly but in a correct way. the example above is an attempt but it is not staying aligned vertical. I am open for suggestions, thank you.
also I’ve done this experiment to reinforce vertical alignment:
`
<div style="width:176px;height:280px;float:left;border:2px solid transparent;">
<ul class="nolistmark">
<li>
<!--<button type="button" class="btn btn-lg btn-fb">-->
<!--<button type="button" class="btn1 buttonsocial" href="#"></button>-->
<a class="button button1" href="#">
<i class="fa fa-facebook i">
<span class="btnName">Facebook</span></i></a>
</li>
<li>
<!--<button type="button" class="btn btn-tw">-->
<a class="button button1" href="#">
<i class="fa fa-twitter i">
<span class="btnName">Twitter</span></i></a>
</li>
<li>
<!--<button type="button" class="btn btn-li">-->
<a class="button button1" href="#">
<i class="fa fa-linkedin i">
<span class="btnName">Linkedin</span></i></a>
</li>
<li>
<!--<button type="button" class="btn btn-ins">-->
<a class="button button1" href="#">
<i class="fa fa-instagram i">
<span class="btnName">Instagram</span></i></a>
</li>
<li>
<br>
<a class="button button1" href="#">
<i class="fa fa-wordpress i">
<span class="btnName">Wordpress</span></i></a>
</li>
</ul>
</div>
I’ve already given you code for the vertical alignment. I don’t care to do the same thing twice unless you explain why my first code is not suitable
I don’t say it is not suitable, before your code I tried something something and wasn’t sure if it is good or not. I don’t understand why do I need to reinforce the vertical alignment. the previous code didn’t need that.thank you.
thank you for help. applying the code you gave me I found ‘social buttons’ aligned right, and also as window shrinks the social buttons are passing through the panel. can you help me with that?thank you.
I told you how to stop that in my post above. You have floated the button to the right so that makes it align right.
I don’t know what your previous code looked like so I can’t help you there. I’ve explained what you need to do to get the alignment right in the original code you posted today.
If you are talking about the registration2 then that’s a bit of a mess and I wouldn’t continue with that. The social icons have no logic and you seem to be using input buttons and divs in different items anyway. I’m not sure why you need the social icons as buttons as I thought they were just links.
I don’t see that happening with my code added.
yes it looks ok but as the window gets smaller the buttons pass thorough media panel.
Screenshot please as I don’t know what you mean?
What do you want to do about that?
Do you want the Social Media area to not get large enough for the buttons to wrap?
Do you want the buttons in the Social Media area to remain in a single column even when there is space for them to wrap?
Do you want something else to happen with them instead?
1 Like
thank you for answer. to be honest I would keep social buttons in a vertical form, in a single column without wrap text or buttons. theoretically should work as it was working previously but the previous code was faulty. thank you.
Actually I have told you three times already how to do that but you failed to implement it. If you did what I suggested the buttons would stay vertical in a block.
I’ll try one more time
Remove the float from .button1.
e.g.
.nolistmark .button1{float:none;}
You also failed to remove the erroneous break I mentioned and that will break the menu once its not floated.
<li>
<br>
<a class="button
Finally you may want to remove the default padding from the ul as that is offsetting things (you have also been told this numerous times so far). To centre the nolistmark element nicely do this:
.nolistmark{
display:table;
margin:10px auto;
padding:0;
}
By the way nolistmark is not really a suitable class name for what you are doing there. It would have been better named as social-buttons.
1 Like