Solved

Setting Up a Responsive Form

Posted on 2016-10-25
24
41 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:hbash
  • 13
  • 10
24 Comments
 
LVL 51

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:hbash
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 51

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
 
LVL 1

Author Comment

by:hbash
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:hbash
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 51

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:hbash
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 51

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:hbash
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 51

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:hbash
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 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:hbash
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:hbash
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:hbash
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 51

Expert Comment

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

Expert Comment

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

Author Comment

by:hbash
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:hbash
ID: 41863822
Great help!
0
 
LVL 51

Expert Comment

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

Author Comment

by:hbash
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 51

Expert Comment

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

Author Comment

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

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Drop down button NAMES disappear 1 41
C3-->D3 Line Chart 4 19
Help cleaning out CSS 2 31
Fixing my modal from bootstrap 18 16
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
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 …

746 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now