0

I'm trying to make a file path from a group of textbox inputs and then display that filepath. But the ng-show method I'm using is adding spaces into the string. Is there anyway to prevent this or maybe another method to use to get this functionality?

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    </head>
    
    <body>
        <div ng-app="">
            <div>
                Client:
            </div>
            <div>
                <input type="text"
                       name="client"
                       ng-model="client">     
            </div>    
            <div>
                Brand:
            </div>
            <div>
                <input type="text"
                       name="brand"
                       ng-model="brand">                          
            </div>
            <strong>
                <label ng-bind="client"></label>
                <label ng-show="client.length">\</label>
                <label ng-bind="brand"></label>
                <label ng-show="brand.length">\</label>
            </strong>
        </div>                
    </body>
</html>
Berkyjay
  • 158
  • 1
  • 1
  • 10

1 Answers1

3

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    </head>
    
    <body>
        <div ng-app="">
            <div>
                Client:
            </div>
            <div>
                <input type="text"
                       name="client"
                       ng-model="client">     
            </div>    
            <div>
                Brand:
            </div>
            <div>
                <input type="text"
                       name="brand"
                       ng-model="brand">                          
            </div>
            <p>
               <span ng-bind="client" style="display: inline-block;"></span><span ng-show="client.length" style="display: inline-block;">/</span><span ng-bind="brand" style="display: inline-block;"></span><span ng-show="brand.length" style="display: inline-block;">/</span>
            </p>
        </div>                
    </body>
</html>

Taking away the bindings and the ng-show has the same effect. This is simply an html/css question. I believe this is what you are looking for.

How do I remove the space between inline-block elements?

nstanard
  • 593
  • 3
  • 12
  • Does this actually answer the question? – Mark C. Jan 29 '19 at 19:12
  • The SO post I linked is the correct answer for the problem he was having. It was simply a mis-understanding of what was adding the whitespace. This is a duplicate question at this point. Also, in the snippet I have provided a paragraph example with two inline elements with no space. That solves the issue. – nstanard Jan 29 '19 at 19:15
  • It actually doesn't fix the issue I'm having. I tried using the span tag but I'm still getting white spaces. But I marked it as the accepted answer because it points out what my issue actually was.....being not AngularJS related. – Berkyjay Jan 29 '19 at 19:26
  • I will update the snippet in my answer to just be what you need but.... that's not really helping you understand what's happening. – nstanard Jan 29 '19 at 19:30
  • I do hope you take the time to read the other SO post to understand the spacing that is being added and how to remove it. – nstanard Jan 29 '19 at 19:35
  • 1
    I'm guessing the spans were all on their own lines. That actually took me a couple min as well. :*( – nstanard Jan 29 '19 at 19:36
  • I did read it, thanks for pointing it out. Also thanks for updating your code. That helps a ton! – Berkyjay Jan 29 '19 at 20:22
  • Happy to help! Good luck with your adventures in Angular! – nstanard Jan 29 '19 at 21:04