extjs - Move an element to next line using CSS, if it doesn't fit in the available area width -


i have view created using extjs, composed of autocompleting textbox (bound store) , custom templated dataview (again, bound store). , view looks below.

enter image description here

here's how works.

  • user searches tag in searchbox, , selects matching tag dropdown. once selected, automatically added dataview right below, appears tag cloud (though not exactly).
  • tag item added dataview custom styled, , has "remove" link next label remove dataview.

now, here's problem:

  • the available width of dataview fixed, if tag item text longer, can see gets broken , remaining part of tag appears on next line.

what want this:

enter image description here

as can see if tag item not small enough fit available area, gets next line, if space available, on same line.

any way attain css? or need write js logic this?

note css solution, i'm bound support evil ie7/8.

yes can similar in css, have sample code can post online somewhere? can give advice on actual code?

but achieve this, each input field needs have css style of 

display: inline-block;

so if fits in provided width, remain in same line, if text box large, goto next line.

looking @ example, seems have kind div container "overflow: hidden". in senario, either remove overflow: hidden or can wrap input text boxes div , set width there.

edit

here's example

http://jsfiddle.net/raver0124/7x2h3/


Comments

Post a Comment

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

since using iframes house external pages are, accounts "not preferred method" , disallowed sites (flickr, one), want dynamically generate browser tabs. e.g., when user submits form, want dynamically generate tab on browser in response submitted. e.g., might want add new tab url like: http://www.bigsurgarrapata.com/contact how in jquery? you want form target attribute action attribute. http://www.w3schools.com/tags/att_form_target.asp browsers have ultimate control on result of target attribute open new tab value of _blank. <form action="contact_submit.php" target="_blank" method="post">
Read more

node.js - Getting the socket id,user id pair of a logged in user(s) -

i have web application done using node js , in it,i have authentication system requires users log in before can access pages. have 2 pages,the homepage , updates page. from read docs,a new socket id issued when user opens tab in browser. me being admin,i know socket id of logged in user , more so,the socket id,logged in user id pair logged in users. what method can use socket id,logged in user id pair make sure broadcast realtime info users online?.
Read more

keyboard - C++ GetAsyncKeyState alternative -

i using windows.h library's getasynckeystate function define key pushed on keyboard . here program returns int value of pushed key example. #include <iostream> #include <windows.h> using namespace std; int main (){ char i; for(i=8;i<190;i++){ if(getasynckeystate(i)== -32767){ cout<<int (i)<<endl; } } return 0; } but trying make opengl simple game , function appeared slow . there function not need cycle 180 times , if statement . thanks you're trying make opengl game, you're going use glfw. if that's case can away using glfwgetkey() such: if (glfwgetkey(glfw_key_up) == glfw_press) {...} if (glfwgetkey(glfw_key_down) == glfw_press) {...} that method nicely explained in tutorial 6 opengl-tutorial.org . should start first tutorial of beginners tutorials , later intermediate tutorials . if you're going make win32 window can listen wm_keydown or wm_keyup messages , virtua
Read more