Change form style

Hi @toronto2009, there’s certainly no jQuery required to achieve this – you can just apply a regular grid to your form, and add breakpoint classes as required.

Hi
Thank you for answer. My very first ,try did not work as I expected and that’s why decided to control it with jquery. Horizontal layout didn’t change to vertical, however, w3schools horizontal form appears on mobile screen as vertical one, I don’t understand this part, please help me, thank you, Frank

Did you check out the links I posted above? If you scroll down a bit in the first one there’s an example with a form that does exactly that. If this doesn’t work for you you’ll have to post your code so we can help you…

Thank you for answer. I can’t see on my phone, I need to open up my laptop, hopefully I can see that there or I’ll post my code. I have some work to do and I’ll try to post my code, thank you, Frank

Hi
I am sorry for delay, I am visiting my mother in hungary, she is not well.
watching your reply, I did not find the mentioned part, I am new at this site, still learning. I tried to post my code but did not work, the site allows me only two options as new member. Is there a way to send you my code?
Thank you
frank

toronto2009, have you read our posting guidelines or the introduction to our forums?

https://www.sitepoint.com/community/faq#civil

If you have not, please some time and read these topics and perhaps spend a little time reading some of the member’s posts. You should find your posting privileges upgraded very soon.

1 Like

Hi
here I have a codepen link, a success, to show one of my problem

please help me, thank you frank

Well you didn’t mention that the form is inside a modal – in this case you have to use the container-fluid class (see here fore details and an example). The nesting also isn’t quite right… you have multiple containers inside each other, and the columns should be direct children of rows which you don’t have at all. Here’s how it should look like:

...
<div class="modal-body">
  <h2>Horizontal form</h2>
  <p>Some text in the modal.</p>

  <form class="container-fluid" action="/action_page.php">
    <div class="row">
      <div class="form-group col-sm-6">
        <label class="control-label" for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
      </div>
      <div class="form-group col-sm-6">
        <label class="control-label" for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
      </div>
    </div>
  </form>
</div>

PS: I just noticed you’re using BS3… the links in the documentation I posted above all refer to BS4; the above snippet should also work with BS3 though. But I’d suggest to go with the current version if this is an option.

Hi
thank you for answer. applying the learned part, I tried to take it farther and I got new problems, having problem with codepen also. It was different from last time. the login here part does unexpected thing, also at window width 300px (media query) the layout does not do the expected thing, please help me, thank you, frank
ps: bootstrap 3, jquery, tyles
https://codepen.io/cfrank2000/post/bootstrap-3-login-signup-psw-recover-modal

Well that is not a code pen but a blog post… that makes it hard to tell which styles are coming from BS, which from codepen, and which are your own. Did you get a very basic standalone example working?


I hope this will work, thank you

No that isn’t working because you added style and script tags in the css and script panels.:slight_smile:. Those panels should only contain the actual code and not html script tags. You should also use the settings to add external files such as jquery and bootstrap otherwise you get them being loaded after the code in the other codepen panels.

Only add html found inside the body tag in the html panel also.

I’ve set the code up for you here:

Now can you elaborate on the question?

The media queries you added would work if anyone could get down to 300px as that is smaller than any of my devices or browsers. The smallest you need to accommodate is 320px but you wouldn’t set the media query at 320px but at a size that is larger than that to accommodate various smaller devices. e.g. use 500px and below to make buttons full width.

I changed the media queries in your codepen to 500px so you can test on a desktop.

(The above answer is only concerned with the CSS aspects of the modal and does not relate to any js behaviours as such.)

1 Like

this is a running code, not totaly, I mentioned it above , in my evironment, notepad++, but as I copied the parts does not change on change password
thank you,
frank

Can you explain your intentions in a little more detail please. Use the codepen I posted above to explain the problems you need to rectify and whether the codepen is displaying as your local version does so that we can ascertain the issues correctly?

thank you for reminding for details, now the code works in the same way as on my computer. If I click on change password still ok but when I click log in here, margin disappear and I do not know why, also as I collapse the window at 300px the switch is not working as I expect, I try to change layout. please help me, thank you, frank

You have to set the form display to “block”, not “inline”… but actually you can use the hidden helper class instead to avoid setting inline styles (and the problems related to this).

1 Like

As I mentioned above there are no devices these days at 300px (apart from an apple watch) so setting max-width media queries at 300px is virtually useless.:slight_smile:

However the CSS code you added will work if that break-point is breached. You will need to clarify exactly what isn’t working for you in more detail as the CSS code you added does what you ask of it.


it looks ok, please have a look, thank you, frank

by the way, you mentioned the hidden helper class, would you mind to write me how can I use it in a better way than present code?
also I have more problems. I would need help in menu design matter: I used css order with jquery to change ul order after collapsing I use bs3

thank you
frank

I am sorry for not explaining the 300px width. I was thinking about mobile devices like phones, where the viewport size is realy small. thank you, frank