Button dropdown bs3

I’ve added the radio effect to my codepen demo of your code.

thank you it is really nice.

1 Like

Hi PaulOB
thank you again for help. applying the code, I found the code not following the bs3 rules. obviously. I need help to make it adaptive, to be part of bs3.the new codepen is below:
registration4
thank you

Check my last example as it is working at all sizes.

It looks as though you have changed your checkboxes as well but you only asked about radios? You already had the checkboxes styled.

I can’t look at your code this evening as I am on a mobile at the moment and will be back on the computer tomorrow.

I tried to apply the code you gave me but in my ‘code environment’ that is bs3, works in a different way that I not really understand. I have an idea but I am not sure, using the css in my code somehow needs adjustment to bs3 that is where I need help. thank you.

The code I gave is based on the pen you gave when you asked bout radio buttons. It works fine in BS£ because that’s what it is using.

You need to go back to the version where you asked the question about the radios.

Here is my codepen again which is working. The extra CSS is at the bottom of the CSS file and the html has been changed and classes added to the relevant sections to make it work. Please copy my html.

Note that I have fixed numerous closing tags and incorrect bootstrap grip constructs as you are starting rows and columns in the wrong places causing columns to drop and scrollbars to appear. I have fixed those in the codepen above but there are too many for me to document so you will need to copy my html or work through your version meticulously until it matches mine.

If you want to change the checkbox code then that is a separate question again as you already have a complicated set of styling for those checkboxes so we can’t simply style them anew. We would have to undo all the previously styling and positioning for them. I don’t see the need anyway as they are matching the new ones I added.

Remember you must follow the bootstrap grid structure and match container, rows and columns exactly as stated in the manual.

thank you for help. as you can see on my last (registration4 ) I decided to replace my checkbox and radiobutton styling with your one and use to style both.please have a look. thank you

No that page is broken you need to start from my codepen. :slight_smile:

You don’t have the right code to change the checkboxes as I mentioned because you have to remove or over-ride the existing styling first. I’ve already done all the hard work and corrected a lot of the page mistakes so I don’t really want to do it all again; that’s your job :wink:

You don’t seem to have added the code for the radioboxes properly either as they don’t look like the ones in my example. I suggest you take a step back and go back to the codepen of mine and once you have that working properly we can look at changing the checkboxes. I can’t hit a moving target. :slight_smile:

yes it looks working but city is not working, the previously working jquery input field checking not working, also contact and gender is not in the right way as first name for example. can we work out all this details to get in a correct way? obviously first radio buttons then checkboxes then the rest step by step to keep everything under control.
ok I copied back the main parts into a bs basic file and it is not working that is strange. thank you.

Sorry I’ve not been online today so will have to look at this tomorrow.

Which is the version you currently want help with?

If you let me know which version I’ll try and swap my working code into your example.

At the end of the day though the layout issues are solved in my example and you should be able too look at the css I applied and the extra classes I added to the HTML in order to fix your own versions.

However I will be back tomorrow to take another look anyway :slight_smile:

Looking at your registration 4 you really should have the checkbox first followed by the text as that is rge expected way. The html would look like this:

 <div class="input-group">
   <label class="container">
     <input type="checkbox" checked="checked">
     Phone
   </label>

   <label class="container">
     <input type="checkbox">
     E-mail
   </label>

   <label class="container">
     <input type="checkbox">
     Post
   </label>

 </div>

There is no change to the css fro the above.

Regarding the radios then you need to add a new class .radio-inline in 2 places.

<label class="gender radio-inline">

e.g. like this:

<div class="col-sm-4">
                                            <label class="gender radio-inline">
                                                <input type="radio" name="genderRadios" value="male" required> Male
                                            </label>
                                        </div>
                                        <div class="col-sm-5">
                                            <label class="gender radio-inline">
                                                <input type="radio" name="genderRadios" value="female" required> Female
                                            </label>
                                        </div>

Then add this CSS:

.radio-inline input[type="radio"],
.checkbox-inline input[type="checkbox"] {
  position:static;
  cursor:pointer;
  margin-left:0;
}
.form-group .gender.radio-inline{padding-top:0;}

With those changes in place the layout will look like this:

Obviously if you want a different layout then you can adjust to suit as required but the checkboxes and radios are working as expected.

The forked codepen is here:

thank you, I like this better thank my first experiment.

I copied the html, css and js from codepen but as I enlarge the the window I’ve got this thing, did you have too? thank you.


also the submit button and reset button is located upon each other that is strange also, thank you,

Yes that’s why I wanted you to use my registration3 example as I fixed all those.

You have these rules with the wrong display:values. I have changed them around here.

form {
 /* display: inline-block;*/
  display:block;
  border: 1px solid;
  border-radius: 12px;
  padding: 12px;
}
input[type="reset"],
input[type="submit"] {
  /*display:block;*/
  display:inline-block;
  margin: 0.5em 0 0;
}

thank you, it is realy lovely. this ‘html page’ has a modal where remember me partneeds a small fixing, the remember me part needs to ‘pushed’ a bit from its checkbox. I found another crease thing, as choose city from dropdown list it is appearing in the city field. if I click on login right and up, it over rides the city appearing login. can you have a look? thank you.

You can fix the checkbox in the modal with this:

#login .checkbox input{position:static;margin-left:0}

You should have been able to detect that change from the code already given for the other checkboxes so please try to understand what these changes mean and how they work otherwise you are stuck on copying and pasting without learning.

That’s probably a scripting issue but before I go and look at it please fix the errors using the w3c validator.

You have used the same ID in some of your forms an dthat is not allowed even in the modal. All IDs must be unique.

Fix those errors first and then post a codepen with all the changes amalgamated so far and I will take a look at the issue (if it doesn’t automatically get fixed when you use valid html).

1 Like

yes I’ve done it but a few remained. specially the h2 tag that I don’t understand. please have a look, thank you.
registration3

thank you for help, I managed to fix the modal issue. there a few more. thank you.

If you need help with understanding an error message, then please quote the message here, and indicate which part of your code the error refers to.

thank you for help. I am adding a printscreen