I've seen this somewhere before and it worked really nicely. But I can't remember where.
Anyway, here's my desired form.
Enter a message:
+--------------------------------------------+
| |
| |
+--------------------------------------------+
|
| Enter recipients:
| +------------------+
[Send to everyone] OR | |
| +------------------+
|
| [Send to these users]
You mean like on StackOverflow?
Just inspecting the DOM will tell you what you need to know: The line is an absolutely-positioned element with a left-border, and the "or" has a background colour the same as the body to cover up the line around it.
See this jsfiddle for an example. The idea is you offer the user two options in the HTML...
<span class="screen-reader-text">Choose one of the following options:</span>
<ul>
<li id="send-to-everyone">
<!-- omitted -->
</li>
<li id="enter-recipients">
<!-- omitted -->
</li>
</ul>
...and then style the first <li> so it will float:left and have a border-right. Add some :after content to create the "or".
Related
I'm trying to populate two columns with some content in the following way (this is expected behavior)
<div id="identifier_0"></div> | <p id="paragraph_0"></p>
|
------------------------------| -------------------------
<div id="identifier_1"></div> | <p id="paragraph_1"></p>
|
|
|
----------------------------- | -------------------------
<div id="identifier_2"></div> | <p id="paragraph_2"></p>
----------------------------- | -------------------------
every paragraph_n is provided by my Rails backend. Every identifier_n is autogenerated on the fly by a javascript script (because they identify the paragraph to the right, which might change because of user input)
I want the paragraphs column to be contenteditable=true as a whole (so users can join paragraphs or split a paragraph into many, or basically edit the text inside) and identifier column to be contenteditable=false, so my javascript is the only one allowed to change them.
Currently it looks like this:
<div id="container" contenteditable="true">
<p id="paragraph_0" class="paragraph"></p>
<p id="paragraph_1" class="paragraph"></p>
<div id="identifier_0" class="identifier"></div>
<div id="identifier_1" class="identifier"></div>
</div>
But this makes both columns, the paragraphs and the identifiers, inherit the contenteditable=true attribute. And I only want the paragraphs column to have it.
Is there a way to do what I want?
Thanks in advance
(Answer in comments ==> just add contenteditable="false" to the identifier_n, and it will do it even if wrapped inside a contenteditable="true" div)
Is it possible in bootstrap to move div from one row to another?
I need something like this:
Desktop/tablet:
-----------------------------
|Brand |search| #row1
-----------------------------
|Menu: | MAIN CONTENT |
|-link 1| | #row2
|-link 2| |
|-link 3| |
------------------------------
Mobile:
-----------
|Brand | #row1
-----------
|Menu: =|
|-link 1 | #row2 (expanding/collapsing navbar with menu and search form)
|-link 2 |
|-link 3 |
| search |
| |
| Main |
| content | #row2
| ... |
| ... |
-----------
On mobile, i need to move search form from #row1 to collapse menu in #row2.
Unfortunately, no. There's no way to accomplish this as you currently have it. One possible compromise would be to have the original search box become invisible at a certain screen size and have another search box, identical in functionality, that is shown where you need it at that point. For example:
<div class="row">
<div class="col-xs-12 col-sm-6">
Brand
</div>
<div class="col-sm-6 hidden-xs">
<input type="text" class="form-control"/>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">
<ul class="menu">
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
<div class="visible-xs-block">
<input type="text" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-8">
<main>Main Content</main>
</div>
</div>
Obviously you don't want to make a habit of this kind of thing, but sometimes the optimal layout requires you to do things like this.
Gah lost all my rep opening a Bounty and now I can't comment.
Would it be a viable option to start using a framework? Not to promote any framework in particular but personally I started using Zurb Foundation for the reason you have described alone. http://foundation.zurb.com/
I'm using Selenium IDE for some test and trying to use it to select an specified option from an autocomplete. My problem is, the autocomplete is built in a <ul> and the two <li> possibles are identical. How to click a specified li? How to say to Selenium "click the first li" or "click the li with the text "apples"? I'm tried some ways that I found, but all are for other types of Selenium, and none are useful in Selenium IDE.
Here is the code:
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1003; top: 360.683px; left: 549.5px; display: block; width: 401px;">
<li class="ac_item ui-menu-item" role="menuitem">
<a class="clearfix ui-corner-all" tabindex="-1">
<span class="c1">
<b>Apple</b>
<br>
<span class="small secondary">Apples</span>
</span>
</span>
</a>
</li>
<li class="ac_item ui-menu-item" role="menuitem">
<a class="clearfix ui-corner-all" tabindex="-1">
<span class="c1">
<b>Orange</b>
<br>
<span class="small secondary">Oranges</span>
</span>
</span>
</a>
</li>
</ul>
The Selenium API gives you a number of ways to accomplish this. Since you don't have a traditional dropdown, you can't use the select command. Here are two solutions that click the second element in the autocomplete.
I created this JSFiddle to test the solutions. The clicked element will turn red.
Option 1: Use a CSS locator.
| Command | Target |
| open | http://jsfiddle.net/ansonhoyt/GYJW9/embedded/result/ |
| waitForElementPresent | css=ul.ui-autocomplete |
| click | css=ul.ui-autocomplete li.ui-menu-item:nth-child(2) |
Note: Runs fast, and most people are comfortable with CSS, but this example requires that the targeted browser support the CSS3 nth-child selector.
Option 2: Use an XPath locator.
| Command | Target |
| open | http://jsfiddle.net/ansonhoyt/GYJW9/embedded/result/ |
| waitForElementPresent | css=ul.ui-autocomplete |
| click | //ul[contains(#class,'ui-autocomplete')]/li[2] |
Note: XPath are less familiar for most people and can be very slow compared to CSS locators, especially in IE.
For more ideas, check out the documentation for Selenium IDE on locating elements and on the available Selenese commands.
I have multiple floated blocks. Is it possible to specify which block should be cleared?
Check following structure:
+------------+ +--------------------+
| | |+--------+ +-------+|
| float:left | ||fl left | |fl left||
| | |+--------+ +-------+|
| | |+------------------+|
| | || ||
| | || block that clears||
| | || prev 2 floated ||
| | || blocks but doesn't|
| | || clear first fl. ||
| | || block ||
| | |+------------------+|
| | +--------------------+
+------------+
in html:
<div class="floated-left-column">
left column content
</div>
<div class="right-column">
<div>
<div class="float-left">...</div>
<div class="float-left">...</div>
</div>
<div>
This block should clear only ".float-left" blocks (not ".floated-left-column")
</div>
<div>
Here is some content
</div>
</div>
You need to float the parent block on the right hand side "left" as well. You can float and clear in sub-containers and the parent container will not clear.
I see you added an example now. Float left the DIV "right-column"
This is basic HTML/CSS layout. Take a look at this JSFiddle example.
When you clear a float, it will usually only clear floats within the same container, or lower. This is why when you put something with clear: both into your container at the top level it clears everything.
I have solved it with following html. Thank you for your help. Is it ok solution for my problem (it works but I don't know it works in other browsers and etc.)?
<div class="floated-left-column">
left column content
</div>
<div class="right-column">
<div class="floated-left-with-100-precent-width">
<div>
<div class="float-left">...</div>
<div class="float-left">...</div>
</div>
<div class="clearfix"></div>
</div>
<div>
This block should clear only ".float-left" blocks (not ".floated-left-column")
</div>
<div>
Here is some content
</div>
</div>
This is probably pretty easy to do using bootstrap. If you're designing a new site from scratch, bootstrap's an excellent place to start anyway..
I have following code which works fine in firefox and ie 8, but in IE 7 the second li is coming with some top space instead of same line.
<LI style="PADDING-LEFT: 20px">
Sort by: <SELECT id=ddSortOrder class='content-select'>
<OPTION selected value=0>Recommended
</OPTION></SELECT>
</LI>
<LI id=lipageAnchors><< | < | Previous |
<A class=current title=1 >1</A> |
<A title=2>2</A> |
<A title=3 >3</A> |
<A title=Next >Next</A> | > | >></LI>
The First <li> comes in left as expected but the second <li> should float to right, but it is to right with some extra space. I want both the <li> in same line (position), which works in firefox and IE 8 but in IE 7 is not.
Image link alt text http://www.imagechicken.com/viewpic.php?p=1275649526056730400&x=jpg
http://www.imagechicken.com/viewpic.php?p=1275649526056730400&x=jpg
Please help!
Thanks
Ashwani
There are a few html errors in your code.
Replace your < with %lt; and your > with >.
Because < > will render as a invalid html tag.
And remember to wrap your html-tag attributes values within " (double quotes) like this:
<li id="lipageAnchors"><!-- Content goes here --></li>
And to answer your question about the float:right, put it on the <ul> tag. You might also set a width on it to be sure you get it to the right.
I Hope this will be to any help.
This is because you have the following html code:
</LI>
<LI>
You should be fine if you put them into one line.