Jump to content

search box besides an input element


Recommended Posts

take a look at this fiddle https://jsfiddle.net/fiddlehunt/Lnt74wje/18/ 

Select the doctor radio button to see what happens...an input box appears in a place I do not want.

 

I want it to appear right besides the radio button/text...as shown in  the image snapshot below

I thouht that enclosing the image input/label on a span tag(which is inline element) would the trick...but it does not.

Furthermore the label is set to display block by the css code...it is this which creates the problem in the first place.

Any ideas...

 

search_box.png

Link to post
Share on other sites

Try changing the label display to inline and put a line break after each input option. 
 

EDIT 

I’m pretty sure display:block for the input label is the problem. 

Edited by niche
Link to post
Share on other sites

thanks...there is one last detail.

when the user clicks the doc radio and then some other radio the search box stays there(unwanted)...AND

subsequent clicks of the doctor radio(after clicking othe radio buttons) displays many   search boxes in the DOM-besides the doctor radio button.

 

How to tackle these two.

I have thought some solutions but I want to hear your opinion.

Link to post
Share on other sites
7 hours ago, dsonesuk said:

On change you remove any existing input elements of that id ref,  before inserting the new input after radio button radio selection.

Ι do not get it....do you mean something like this https://jsfiddle.net/fiddlehunt/Lnt74wje/45/

The results are not the desired...

Link to post
Share on other sites

No silly, you dont use the textual html as selector, you use the id of that newly created input

    $('.basics #med').remove();

Use a existing parent as guide to element, as the newly added element did not exist on page load.

You might to make it hide completely if other radio button are checked, then make it show only when #medical is selected.

Link to post
Share on other sites
16 minutes ago, dsonesuk said:

No silly, you dont use the textual html as selector, you use the id of that newly created input

You are absolutely right....do not know what I was thinking...

This is better now https://jsfiddle.net/fiddlehunt/Lnt74wje/62/

Still I must do it  like this-your sugestion is better:

17 minutes ago, dsonesuk said:

You might to make it hide completely if other radio button are checked, then make it show only when #medical is selected.

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...