I have a table in which column elements have text in them. I click a button and all the text elements become input elements. Based on a condition, there is a button displayed next to the input field.
What i have to do is display a button with an icon in the same column, next to the input field. I have done this, however the result is not as expected.
This is what I am getting.
This is what I am looking for.
<form class="mytemp" id="form19af" method="post" action="./Application"><div style="width:0px;height:0px;position:absolute;left:-100px;top:-100px;overflow:hidden"><input type="hidden" name="form19af_hf_0" id="form19af_hf_0"></div>
<div style="padding:5px; border-width:0px;background-color: #ffffbb" id="editContainer19b0">
<button style="display:none;" data-toggle="modal" data-backdrop="static" class="btn btn-default btn-xs pull-right">
<span class="fa fa-bolt"></span>
<input value="Account test" name="editContainer:edit" id="edit1923">
This is the code that I currently have that gives me the first result. The layout is causing some problems. I need better layout suggestions or ways to fix this.
Use inputgroup classes to show the buttons adjacent to input type
There is no unique solution for your request.
It depends on how you are designing? Are you considering the responsiveness? Are you using fixed width? or even are you using a library or framework like Bootstrap?
By the way, I think this one works for you: use the percentage of width for your input and button. For example:
<button style="display:none; width: 10%;" data-toggle="modal" data-backdrop="static" class="btn btn-default btn-xs pull-right"> <span class="fa fa-bolt"></span> </button> <input value="Account test" style="width:80%" name="editContainer:edit" id="edit1923">
What I did was set min-width for the table. The percentage did not help me since it was dynamic. For some reason it was not taking that into account when the new element was added and the button always came in the wrong place.
I set the min-width for that column to 250 px . I tried to set it to say 30% but that did not work either.
solution: use min-width in the header elements. that sets the entire table to follow the least width.