Jump to content

search box besides an input element


jimfog
 Share

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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...