Adding a vertical divider

#1

How can i add a vertical divider between categories on my P.T. calculator?

I already tried rotating a HR 90 degrees (Fahrenheit) and this is what it turned out with:

image
image1920×1040 74 KB

You could try and fix this/ play around with this on lines 135- 137 of CSS (margins) & line 79 of HTML (commented out currently).

The inputs boxes are placed in Li's, example:

 <ul class="ulPt">
               <li><input type="text" id="leg1Leg" value="leg"></li>
               <li><input style="color:red;" type="text" value="Find Leg"></li>
               <li><input type="text" id="cLeg" value="C"></li>
               <button class="buttonPt">Enter</button>
            </ul>

There is 3 of these, all placed in a row (line 72). check the CSS if anything with the margins, etc are causing issues with add a divider. The only lines of the HTML you really have to worry about are lines 72-92. This is where the input box lists are, and nothing below 72 and above 92 will affect anything.

Any ideas? Please ask for clarification.

#2

Have you tried putting a containing div around it and applying the CSS border-right: 2px solid lightgray to it?

2 Likes
#3

Thanks, it works :slight_smile:

I tried adding a border not on a container (around ul) and it didn’t work, so i didn’t think of this.

I changed from lightgray to black.

#4

Another question:

Why doesn’t the buttons on my regular calculator in the right most column not work on touch screen? This is ever since i added the PT calculator. The text is also slightly off too. Iv only ever tested this on school iPad, so it might have something to do with fire wall.

#5

For touchscreens have you tried the touchstart event in your addEventListener?
For your text I’d have to see your code - that usually is just a case of adjusting margins and/or padding. Or adjusting relative position.

#6

Sorry, can’t help you.

I’ve never had a problem with touchscreens. And I’m not sure how a firewall would affect the layout - I would expect it more to be a function of the browser.

#7

The thing is, its only the farthest right column. Like the +, - one (there not arranged in rows, arranged in columns).

This could be with the margins, as the text isn’t even centered (on the button in that column) when i look at it on iPad.

Speaking of the firewall, its so strict i cant even look at Github (blocked) as all IT related stuff is blocked for some reason.

#8

As to the ipad, just remember that JS and CSS are not interpreted exactly the same on all browsers. It’s the whole issue of cross-browser compatibility. That is a whole science unto itself.

As to the firewall, I would expect it to either allow or disallow a site and/or allow or disallow the files to be downloaded. It won’t parse out parts of the file or change how the browser renders the file once the browser gets it. At least that’s how I understand it.

#9

The Touch screen glitch has seem to go away with me editing the margins for some reason.

Anyway to prevent my first calculator from doing this? (Happens below 768 pixel width).

My second calculator is fine, the top one isn’t?

image
image1920×1040 149 KB

#10

I might suggest doing some media queries in your css. Something isn’t scaling right. For example, you may need to change your font size as it gets smaller. Is there a link to the pen?

#11

The pen is: https://codepen.io/Mike-was-here123/pen/PQOYjB

(The URL is also in the picture)

#12

With regards to the buttons overlapping the container (and not being quite centered), I think what is happening is that even though you have set the lis to list-style-type: none;, the browser is still accounting for the dot - when I turn the li dot back on, the spacing is the same.

Have you tried flexbox? It’s not in the current FCC version, but it is a really cool CSS feature. I might redo the button rows as:

<div>
  <button class="buttonCal" id="pi">π</button>
  <button class="buttonCal" id="ce">CE</button>
  <button class="buttonCal" id="ac">AC</button>
  <button class="buttonCal" id="-">(-)</button>
  <button class="buttonCal" id="sq">√</button>
</div>

Apply that to all the calc rows - the uls gets turned to divs and the lis get removed. Then add this to the css:

#buttons div {
  width: 100%;
  margin-left: 5%;
  margin-right: 5%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
}

#buttons button {
  margin-left: 1%;
  margin-right: 1%;
  flex-grow: 1;
}

When I do that, I get better, more responsive results.

#13

I think its just trying to resize. min-width:430px; seems to work.

#14