Howard Bash

asked on 10/25/2016

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.

CSSHTML

Last Comment

Howard Bash

8/22/2022 - Mon

Julian Hansen

10/25/2016

I am assuming based on previous questions that Bootstrap is not an option?

Howard Bash

10/25/2016

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.

Julian Hansen

10/25/2016

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.

This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.

rwheeler23

Howard Bash

10/25/2016

ASKER

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:

Thanks.

Howard Bash

10/25/2016

ASKER

I tried copying and pasting into a script editor web part as is:

After resizing:

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.

Julian Hansen

10/25/2016

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

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

Howard Bash

10/25/2016

ASKER

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!

Julian Hansen

10/25/2016

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.

Howard Bash

10/26/2016

ASKER

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.

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!

James Murphy

Julian Hansen

10/26/2016

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.

Howard Bash

10/27/2016

ASKER

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

Julian Hansen

10/27/2016

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

Howard Bash

10/27/2016

ASKER

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

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

Howard Bash

10/27/2016

ASKER

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

Howard Bash

10/27/2016

ASKER

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!).

Julian Hansen

10/27/2016

@hbash did you mean to accept your own answer for this?

Your help has saved me hundreds of hours of internet surfing.

fblack61

Julian Hansen

10/28/2016

Close request to be cancelled at request of asker

Howard Bash

10/28/2016

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

Howard Bash

10/28/2016

ASKER

Great help!

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

Julian Hansen

10/28/2016

No problem:) and you are most welcome.

Howard Bash

10/31/2016

ASKER

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.

Julian Hansen

10/31/2016

It has been closed with this solution - so all good.

All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat

William Peck

Howard Bash

11/1/2016

ASKER

Great. You've been extremely helpful and I wanted to make sure you received the points.
Thanks!