0

I have a screenshot as shown below which I am trying to replicate in HTML, CSS and JS.

The screenshot should remain the same both for mobile and desktop version.

enter image description here

At this moment, I am working on the three dots (as marked on the image above) aligned towards the right.

I have created a fiddle for it with HTML and CSS codes. I have created an image for the three dots. The code which I have used in order to align three dots image towards the right is:

HTML:

<div class="nav-top-searchbar">
    <form>
        <span class="fa fa-search searchicon" aria-hidden="true"></span>
        <input type="text" name="search">
        <img src="https://s9.postimg.org/d6s4xvykv/Ellipsis.png" id="ellipsis">
    </form>
</div>

CSS:

#ellipsis {
    top: -30px;
    position: relative;
    left: 1320px;
}

Problem Statement:

The problem in the fiddle is when I am seeing the web-page in the mobile version, it is creating a white space all the way towards the right. I am wondering what changes do I need to make in the above CSS code/HTML code so that I don't see any white space on the right.

flash
  • 1,455
  • 11
  • 61
  • 132

4 Answers4

1

I would have advice you put the image in a div container but try this

ellipsis {

top: -30px; position: absolute ; right:0; }
Community
  • 1
  • 1
Friday Ameh
  • 1,664
  • 1
  • 10
  • 15
  • Still there is white space. Can you provide the fiddle for it ? – flash Apr 08 '18 at 22:48
  • Is the containing div having relative position?? I mean the class nav-top-searchbar?? – Friday Ameh Apr 08 '18 at 22:54
  • No. I have included all the CSS codes related to that div. – flash Apr 08 '18 at 22:56
  • Do that div need to have position relative or bottom ? – flash Apr 08 '18 at 23:05
  • Try this put both the span and input field in a single div and put the image in a separate div. Create a class for both div's. In the both class add make the display inline-block then on the first div the one one containing both span and text input set the float property to left. – Friday Ameh Apr 08 '18 at 23:10
  • No just try what I just sent let me know how far. Remember two separate div's. – Friday Ameh Apr 08 '18 at 23:12
  • According to your comment, this is what I have done in the HTML: `
    ` Can you write the CSS ? I am having difficulty understanding it.     – flash Apr 08 '18 at 23:35
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/168514/discussion-between-user5447339-and-friday-ameh). – flash Apr 08 '18 at 23:38
  • Is this the HTML you want me to use ? – flash Apr 08 '18 at 23:41
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/168515/discussion-between-friday-ameh-and-user5447339). – Friday Ameh Apr 08 '18 at 23:54
1

You should do the following:

1) The #ellipsis itself

#ellipsis {
    top: 12px; // Sounds good and a bit centered [ Vertically ]
    position: absolute;
    right: 20px; // Increase or decrease it depends on your UI needs
}

Why did I change here?

  1. top from negative to positive.
  2. position from relative to absolute as we would give relative position to the <input> itself. Because we need to be wrapped inside it. If you are confused about relative and absolute take a quick look at this answer.
  3. Instead of using left: 1320px; we used right to stick it at the right

2) The #ellipsis container / The .nav-top-searchbar

.nav-top-searchbar {
    position: relative;
}

Your code might work fine without adding this, but I highly recommend you adding this to avoid any styling issues now or even later. Some browsers might run it fine - As it works now with my without adding it - but you should consider adding the relative to the parent to keep your image inside of it.

Apply the changes above and let me know if you got any further questions!

Elharony
  • 886
  • 8
  • 18
  • I am applying those changes. Will get back to you once I am done. Can you edit your changes in the fiddle ? – flash Apr 09 '18 at 00:43
  • Ok, its look extremely good in the desktop view. No spacing at the right. Thanks. .....In the mobile view for different mobile phones (iphone 6/7/8 plus, iphone 6/7/8, Pixel 2, Pixel 2 XL ) I can see some space at the right whereas in Galaxy S5 and IPhone 5/SE mobile phones I can see fair amount of space towards the right. Is there any to fix it ? – flash Apr 09 '18 at 00:56
  • Glad it works! I noticed that you have `border` in your ``. Try to delete it and check it again, let me know if you see a white space again! – Elharony Apr 09 '18 at 01:21
  • Border in your . In HTML. I have used`` and in CSS, I have used `input[type=text] { width: 100%; background: #10314c; }` Are you asking me to remove `background: #10314c;` ? – flash Apr 09 '18 at 01:30
  • Obviously, you didn't add it yourself. But the browser did. Write `border: none` to your ``. Or reset any border made automatically by the browsers from all your elements with: * { border: none } – Elharony Apr 09 '18 at 01:34
  • Ok, In the CSS, if I am using `input[type=text] { width: 100%; // background: #10314c; border: none; }` then search-bar goes off from the webpage. But if I use `input[type=text] { width: 100%; background: #10314c; border: none; }` the spacing remains the same as in the previous fiddle send by you. Can you send me the updated fiddle ? As I am confused in your comment. – flash Apr 09 '18 at 02:02
  • Can you take a screenshot of that space? – Elharony Apr 09 '18 at 23:09
0

I would float that element right with float: right;

Robert Talada
  • 317
  • 1
  • 10
0

CSS:

   #ellipsis {
         top: -30px; 
         position: absolute; 
         right:0;
   }
Michael Seltene
  • 543
  • 1
  • 5
  • 17
  • I am still seeing the white-space by using your code. Can you provide the fiddle for it ? – flash Apr 08 '18 at 22:48
  • If you see in the full screen, three dots image is not there where it should be. Also, in the mobile view, I can see the white space on the right. – flash Apr 08 '18 at 22:54