Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Setting Up a Responsive Form

Posted on 2016-10-25
24
Medium Priority
?
76 Views
Last Modified: 2016-11-01
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.

Form Spec Image
0
Comment
Question by:Howard Bash
  • 13
  • 10
23 Comments
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 41858756
I am assuming based on previous questions that Bootstrap is not an option?
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41858776
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.
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 41858901
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.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 1

Author Comment

by:Howard Bash
ID: 41858997
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:
Bootstrap Version
Thanks.
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41859034
I tried copying and pasting into a script editor web part as is:
Looking Good
After resizing:
Resized
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.
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 41859332
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

0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41859634
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!
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 41859819
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.
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41860987
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.
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 41861603
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.
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41862212
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.
0
 
LVL 60

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 41862425
Cool.  Can I choose my own colors for them?
Of course - you can override any style you want. For instance

.btn-orchre {
  background: #cc7722;
  color:  white;
}

Open in new window


Buttons - you can style anything as a button. There is also a trick where you can put the button <input> before the label and then use this style

input:checked + label {
  background: green;
}

Open in new window


Which says: every label immediately after a checked button set its background to green.

Here is the css
<style type="text/css">
.full {
  width: 100%;
  margin-bottom: 15px;
}
.btn {
  text-align: inherit;
}
.radio-btn-group input[type=radio] {
	display: none;
}
.radio-btn-group label {
	display: block;
}
.radio-btn-group input:checked + label{
	background: red!important;
}
</style>

Open in new window


Here is the HTML
    <h3>Choose one reason</h3>
    <div class="row">
      <div class="col-md-3 col-sm-6">
	    <div class="radio-btn-group">
		  <input type="radio" name="reason" id="reason1" autocomplete="off" value=1" />
          <label class="btn btn-primary" for="reason1">Reason 1</label>
          <input type="radio" name="reason" id="reason3" autocomplete="off" value=3" />
          <label class="btn btn-primary" for="reason3">Reason 3</label>
	    </div>
        <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">
	    <div class="radio-btn-group">
		  <input type="radio" name="reason" id="reason2" autocomplete="off" value=2" />
          <label class="btn btn-primary" for="reason2">Reason 2</label>
          <input type="radio" name="reason" id="reason4" autocomplete="off" value=4" />
          <label class="btn btn-primary" for="reason4">Reason 4</label>
	    </div>

Open in new window

Full sample here
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41862880
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

0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41862889
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

0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41863257
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!).
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 41863435
@hbash did you mean to accept your own answer for this?
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 41863765
Close request to be cancelled at request of asker
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41863821
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
0
 
LVL 1

Author Closing Comment

by:Howard Bash
ID: 41863822
Great help!
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 41864140
No problem:) and you are most welcome.
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41867812
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.
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 41867939
It has been closed with this solution - so all good.
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41868483
Great.  You've been extremely helpful and I wanted to make sure you received the points.
Thanks!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

824 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question