Change form style

HTML & CSS
1

Hi
My name is Frank, trying to change bootstrap form style from vertical to horizontal conform window change, but 768 PX looks stone carved I can’t change to 300px, however background can be changed easily but not forms. I added breakpoints with @ media query, still not working .I can send code too, just please help me, thank you, Frank

2

This is really hard to understand without clear punctuation. Slow down. Add paragraph breaks and punctuation. (Sorry if you are ESL.)

Known facts:

  • You are using Bootstrap.
  • You want to go from vertical to horizontal layout on window change (rotation of device?).

Those are the only facts I can figure out, sorry. Have you read the Bootstrap docs to see how they address the issue?

3

Hi there @toronto2009 Welkcome to the SP forums.

Do you have a link to the page in question?

4

Hi
Sorry for excitement. You understand the keyfacts perfectly, just I don’t know how to handle it. I’ve done an experiment, changing layout as you mentioned in bootstrap, with help of jquery, toggling between vertical and horizontal layout. Tree classes needs to be toggled, form- horizontal, labrlel: length, control label and input, at least as I understood and done. I tried to control the breakpoint too but defaulted 768px I could not change, not even adding another one 300px, with @media query . I’ll try to post my code too.
Thank you Frank

5

I’ll try to post my code, if it is possible

6

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.

7

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

8

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…

9

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

10

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

11

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
12

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

please help me, thank you frank

13

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.

14

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

15

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?

16


I hope this will work, thank you

17

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
18

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

19

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?

20

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