Link to home
Start Free TrialLog in
Avatar of Howard Bash
Howard BashFlag for United States of America

asked on

Setting Up a Responsive Form

I am trying to setup a form (without the form tag... a div tag is okay)  which has even lining up of components as per customer request.  My CSS skills are weak and I need some guidance.

I have embedded a mockup of what I am trying to build.  Any advise on this would be greatly appreciated.

User generated image
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

I am assuming based on previous questions that Bootstrap is not an option?
Avatar of Howard Bash

ASKER

I would love to use Bootstrap, but unfortunately due to time to update all the other pieces to use it,  that "version"  is put on hold.  Hopefully it will become the way to go.  Sometimes folks don't realize that it saves time/$ to do it the right way to begin with.
So you are looking for the CSS to create the above?

This is a mock-up in Bootstrap - just to test if this fits with your requirement. If so we can cannibalise BS to get the styles out that produces this.
First off,  it's really nice looking.  I wonder if I can use that on the SharePoint page?  The library links need to be https and also there is reference to a CSS file.

Again: "It really looks good!!!".

I have embedded an image capture with three questions/issues regarding spacing and clickability:
User generated image
Thanks.
I tried copying and pasting into a script editor web part as is:
User generated image
After resizing:
User generated image
Also (not in my original mockup), how to left justify the text in the buttons?  I could get this effect by adding a style attribute to the buttons. This works: style="text-align:left; padding-left:6px".  Just wondering if there is a bootstrap class to use instead.


Perhaps the link in the source that isn't https? That link won't load due to how SharePoint Online security is setup.
<script src="http://code.jquery.com/jquery.js"></script>
or the custom.css that isn't there?  

The textboxes and the buttons aren't behaving.  The cancel and submit have overlapped the containing DIV which houses the Script Editor web part.
Bootstrap class to align left is text-left but that won't work in this case. What you need to do is override the style by doing this in your custom stylesheet

.btn {
  text-align: inherit
}

Open in new window


The space on the buttons - I have implemented those as addon's - see the sample and let me know if that works for you.

Search as link - just involved changing <span> to an <a>

jQuery - the sample I posted does not use jQuery - the jQuery is there because I have a boilerplate I use for samples which includes the most common elements.

common.css is specifically for my container - the frame for my samples it is also not required for the code you would need.

The bootstrap link is supported on both http and https the sample uses the latter.

I have created a new sample that is a bare bones implementation without the extraneous bits and using https links

The full source is below working sample here
<!doctype html>
<html>
<head>
<title>Title</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
.full {
  width: 100%;
  margin-bottom: 15px;
}
.btn {
  text-align: inherit;
}
</style>
</head>
<body>
  <div class="container-fluid">
    <label for="person">Person to Review</label>
    <div class="input-group">
      <input type="text" class="form-control" name="field1"/>
      <div class="input-group-addon"><a href="#" class="glyphicon glyphicon-search"></a></div>
    </div>
    <br/>
    <input class="form-control" name="field2" type="text" />
    <h3>Choose one reason</h3>
    <div class="row">
      <div class="col-md-4">
        <button class="btn btn-primary full text-left">Reason 1</button><br/>
        <button class="btn btn-primary full">Reason 3</button><br/>
        <div class="input-group">
          <label class="input-group-addon">Reward Amount $</label>
          <input type="text" class="form-control" name="field3"/>
        </div>
      </div>
      <div class="col-md-4">
        <button class="btn btn-primary full">Reason 2</button><br/>
        <button class="btn btn-primary full">Reason 4</button><br/>
        <div class="input-group">
          <label class="input-group-addon">Maximum Amount $</label>
          <input type="text" class="form-control" name="field4"/>
        </div>
      </div>
      <div class="col-md-12 text-right">
        <button class="btn btn-cancel">Cancel</button> <button class="btn btn-success">Submit</button>
      </div>
    </div>
  </div>
</body>
</html>

Open in new window

It's excellent.  Last request...  How to make the two dollar amount textbox widths narrower.  As you see in my original mockup, they're quite small.  These boxes would be large enough to handle the US National Debt...

THANK YOU SIR!
Currently the boxes resize with the screen. If you make them smaller
1. They won't line up with the buttons above - so you might need to make them smaller
2. On smaller screens they might be too small - if they are still responsive, if they are not responsive then they might overflow their containers.
You could do something like this
<body>
  <div class="container-fluid">
    <label for="person">Person to Review</label>
    <div class="input-group">
      <input type="text" class="form-control" name="field1"/>
      <div class="input-group-addon"><a href="#" class="glyphicon glyphicon-search"></a></div>
    </div>
    <br/>
    <input class="form-control" name="field2" type="text" />
    <h3>Choose one reason</h3>
    <div class="row">
      <div class="col-md-3 col-sm-6">
        <button class="btn btn-primary full text-left">Reason 1</button><br/>
        <button class="btn btn-primary full">Reason 3</button><br/>
        <div class="input-group">
          <label class="input-group-addon">Reward Amount $</label>
          <input type="text" class="form-control" name="field3"/>
        </div>
      </div>
      <div class="col-md-3 col-sm-6">
        <button class="btn btn-primary full">Reason 2</button><br/>
        <button class="btn btn-primary full">Reason 4</button><br/>
        <div class="input-group">
          <label class="input-group-addon">Maximum Amount $</label>
          <input type="text" class="form-control" name="field4"/>
        </div>
      </div>
      <div class="col-md-12 text-right">
        <button class="btn btn-cancel">Cancel</button> <button class="btn btn-success">Submit</button>
      </div>
    </div>
  </div>
</body>

Open in new window

Sample here

In the above sample we have made the columns smaller (col-md-3) and added another class (col-sm-6). This is to tell BS that we want to use 3 columns per button column for medium screens but then to use 50% screen width for small screens. By default the elements will stack (100% width) for small screens.
Very cool.  A BS question on the buttons: does the btn-cancel cause the div to close?  I want to add my on onClick="SomeFunction()"  to the tag.
the btn-cancel btn-success btn-primary are for styling the colour of the button. You define the function that each performs. So, yes, you can add your onClick or a jQuery event handler the button.
Cool.  Can I choose my own colors for them?

Last question (I hope) on this and thanks!  Since the user wants to use the four buttons like radiobuttons (mutually exclusive with only one value of the 4 allowed),  how would you show the selected one (highlighted) and potentially maintain which one is clicked?

I thought for part of this piece, I would use a hidden input field to hold the last clicked button caption and use that.

I tried this:
<script type="text/javascript">
  function GetButtonClick(obj){
	  var currentValue = obj.value;
	  $('#hiddenDemonstratedValue').val(currentValue);
  }
  
</script>

Open in new window

With the button looking like this:
       <input type="hidden" value="not set" id="hiddenDemonstratedValue">

        <button class="btn btn-primary full" onClick="GetButtonClick(this)" 
                   value="Reason1">Reason1</button><br/>

Open in new window

which works while running through the debugger, but the value of the hidden field gets reset back to "not set" after the function completes.
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hi.  I tried putting an onClick="SomeFunction()" on the anchor tag of the search and it doesn't call the routine.  When I put the routine as the "URL" for the href, the function is called but the page then attempts to redirect and the page isn't found.  Is there a trick to this?  The code snippet follows:
1)
        <div class="input-group">
          <input type="text" id="txtSearchSelectedPeopleInitial" class="form-control" name="field1"/>
          <div class="input-group-addon"><a href="#" onClick="SearchRequest()" class="glyphicon glyphicon-search"></a></div>
        </div>


2)
        <div class="input-group">
          <input type="text" id="txtSearchSelectedPeopleInitial" class="form-control" name="field1"/>
          <div class="input-group-addon"><a href="SearchRequest()" class="glyphicon glyphicon-search"></a></div>
        </div>

Open in new window

This worked:

        <div class="input-group">
          <input type="text" id="txtSearchSelectedPeopleInitial" class="form-control" name="field1"/>
          <div class="input-group-addon"><a href="#" onClick="SearchRequest(); return false;" class="glyphicon glyphicon-search"></a></div>
        </div>

Open in new window

I hope that the points get awarded to Julian.  The interface for the site has changed a bit.  Please make sure that he does get these points (I'd give him more if I could!).
@hbash did you mean to accept your own answer for this?
Close request to be cancelled at request of asker
Hi,

I somehow messed up the giving you the best solution.  I may have requested it to be closed.  I have requested that they decline the close request so I can give you the points.  Sorry for the confusion.  I will try to give you the points on this now and see if it goes through.

Thanks,
Howard
Great help!
No problem:) and you are most welcome.
I don't know what the status is on this solution.  I requested that it be "unclosed" so I can give you the credit for it, but nothing has happened that I can see.
It has been closed with this solution - so all good.
Great.  You've been extremely helpful and I wanted to make sure you received the points.
Thanks!