We are working on a web app with Cordova using HTML and CSS in the pages.
For dropdowns we are using ul elements.
Now we have the following problem.
When a page is higher than the screen and we do vertically scroll so that one of the dropdowns is at the displayed end of the visible area and we open the list, the list is not displayed in the visible area, but vertically under the ul element.
Here an example for such an ul element on one of our pages:
<div class="CellOuter"
style="top: 650px; left: 115px;">
<div class="CellInner TopLeft"
style="height: 20px; width: 45px; ">
<ul id="10001"
name="myDropDown"
class="DropDownMenu TopLeft"
style="font-size: 10px; max-height: 20px; width: 45px;"
required=""
tabindex="24">
<div class="Selection">
</div>
<li class="DropDownItem" value="0" sortorder="0" style="display: none;"></li>
<li class="DropDownItem" value="1001" sortorder="1" inilang="false" textkey="DropDownList_1" style="display: none;">yes</li>
<li class="DropDownItem" value="1002" sortorder="2" inilang="false" textkey="DropDownList_2" style="display: none;">no</li>
</ul>
</div>
</div>
Is there a possibility with CSS to change the ul elements in such a kind, that the listelements are always displayed in the visible area when the list is opened?
Thanks in advance!
Patrick
Related
I have the following markup for a div of content that's being dynamically pulled from a .json file:
<div class="subSection">
<div ng-repeat="content in subSection.content" class="subSection_content">
<div class="table_container">
<p ng-if="content.type =='table_p'" ng-bind-html="content.content" class="{{content.class}}"></p>
<ul ng-if="content.type == 'table_ul'" class="{{content.class}}">
<li ng-repeat="li in content.content track by $index" ng-bind-html="li.item"></li>
</ul>
</div>
</div>
</div>
And the following CSS that applies to this div:
div.table_container {
background-color: #a9c7e1;
width: 100%;
}
p.table_img_p {
background-color: #0090c3;
color: #FFFFFF;
margin: 0;
padding: 0.5em;
}
.table_img_list {
padding: 0.5em;
}
#media only screen and (min-width: 720px){
div.subSection {
width: 100%;
}
div.subSection_content {
width: 100%;
}
div.table_container {
width: 50%;
float: left;
}
}
And here's what's it giving me instead of floating the divs to the left. It treats the elements within that div as individual divs. >.< Clearing anything at all doesn't help. Suggestions?
And here's the output code (HTML). Nothing odd going on in CSS.
<div class="subSection">
<div class="subSection_content ng-scope">
<p class="firstP">One way that toxicity can be measured is by its specific effect on an organ or organs. The kidneys and liver are most commonly associated with toxicity because of their primary roles in metabolism, detoxification, and excretion. However, all body organs can be affected including the skin, brain, heart, lungs, and gastrointestinal organs.</p>
</div>
<div class="subSection_content ng-scope">
<div class="table_container">
<p class="table_img_p">Symptoms of Liver Damage</p>
</div>
</div>
<div class="subSection_content ng-scope">
<div class="table_container">
<ul class="table_img_list">
<li class="ng-binding ng-scope">Jaundiced skin or eyes</li>
<li class="ng-binding ng-scope">Abdominal pain</li>
<li class="ng-binding ng-scope">Nausea</li>
<li class="ng-binding ng-scope">Discolored or bloody waste secretions</li>
<li class="ng-binding ng-scope">Fatigue</li>
<li class="ng-binding ng-scope">Anorexia</li>
</ul>
</div>
</div>
<div class="subSection_content ng-scope">
<div class="table_container">
<p class="table_img_p">Symptoms of Kidney Damage</p>
</div>
</div>
<div class="subSection_content ng-scope">
<div class="table_container">
<ul class="table_img_list">
<li class="ng-binding ng-scope">Hypertension</li>
<li class="ng-binding ng-scope">Nausea</li>
<li class="ng-binding ng-scope">Edema</li>
<li class="ng-binding ng-scope">Fatigue</li>
<li class="ng-binding ng-scope">Anorexia</li>
<li class="ng-binding ng-scope">Change in urine output</li>
<li class="ng-binding ng-scope">Chest pain and shortness of breath</li>
</ul>
</div>
</div>
What's wanted: on mobile it should be 1 column (two blue boxes one under the other), and on larger views it should be two columns (two blue boxes next to each other). I've done styling of this kind of thing many times before and never had such difficulty styling it. Just looking for suggestions on what is going on that it doesn't want to float on "1 line" next to each other.
NOTE: OP has updated question with visual example since this answer was provided.
You haven't given a clear definition of what you'd like to achieve but I'll take a stab at it.
I'm going to assume the following:
That the light blue DIV should be under the darker blue DIV.
That the darker blue DIV is the header for the light blue DIV.
That each dark blue DIV and light blue DIV will be treated is one item/gropu/etc.
That on smaller screens the Liver Damage group appears above the Kidney Damage group.
That on larger screens the Liver Damage group appears to the left of the Kidney Damage group.
If so, then the issue is the way you're conditionally outputting your content/markup. The template doesn't match the output markup you've provided. Each header is nested in the same set of DIVs as its associated content.
<div class="subSection_content ng-scope">
<div class="table_container">
<p><!-- header --></p>
</div>
</div>
<div class="subSection_content ng-scope">
<div class="table_container">
<ul><!-- content --></ul>
</div>
</div>
I would expect to see something like this if my assumptions are correct:
<div class="subSection_content ng-scope">
<div class="table_container">
<p><!-- header --></p>
<ul><!-- content --></ul>
</div>
</div>
Which match your template but not output markup. This would get you the results you are looking for with the supplied CSS, http://jsfiddle.net/kqwpheh9/. The jsFiddle doesn't include any spacing between the lists, you'll have to include that later.
It appears your .table_container and .subSection_content DIVs might be redundant, among other markup considerations.
Add `float:left' in css as follows
div.subSection_content {
width: 100%;
float:left;
}
complete code:-
div.table_container {
background-color: #a9c7e1;
width: 100%;
}
p.table_img_p {
background-color: #0090c3;
color: #FFFFFF;
margin: 0;
padding: 0.5em;
}
.table_img_list {
padding: 0.5em;
}
#media only screen and (min-width: 720px){
div.subSection {
width: 100%;
}
div.subSection_content {
width: 100%;
float: left;
}
div.table_container {
width: 50%;
float: left;
}
}
I'm using the Angular-slider
http://ngmodules.org/modules/angular-slider.
Everything works with one exception - I cannot get the slider bar to conform to the margins.
My goal is to have the slider in the center of the page padded on each side with about 20% white space on each side.
<div style="text-align: center;">
....
<div style="margin: 40px 0 60px 0; font-size: 10pt;">
<div style="width:20px">
<a style="text-align: left; margin-left: 20%;margin-right: 20%">
<slider floor="0" ceiling="500" step="50" precision="2" ng-model="cost"></slider>
</a>
</div>
</div>
</div>
Not sure if it helps, but you can try to set:
position: relative;
left: 20%;
right: 20%;
I don't know why are you trying to do that and styling the <a> element, but from the code in Angular's page you should use something like this:
<ul>
<li ng-repeat="item in items">
<p>Name: </p>
<p>Cost: </p>
<slider floor="100" ceiling="1000" step="50" precision="2" ng-model="item.cost"></slider>
</li>
</ul>
so, to adapt to your case:
<div class="container">
<ul>
<li ng-repeat="item in items">
<p>Name: </p>
<p>Cost: </p>
<slider floor="100" ceiling="1000" step="50" precision="2" ng-model="item.cost"></slider>
</li>
</ul>
</div>
Now, the CSS is as easy as this:
.container{text-align:center}
ul{width:60%; margin:20px auto} /* adjust vertical margins to your needs */
li{....}
Note that this example use a construction of UL and LI, but you can obviously replace it with DIV using the same logic. Not sure why you want an A, but try it out, maybe it works, I just don't understand teh need and probably need more information.
How can I make the following search bar and its button at left of a page and the pagination at right, at the same line, please ?
Here is the template that I'm working on : http://jsfiddle.net/ht97t/1/
<form role="search" method="get" action="/Accueil/Rechercher">
<div class="col-xs-8">
<input type="text" name="rech" class="form-control" placeholder="Rechercher">
</div>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button><br />
<label style="margin-left:20px;"><input type="radio" name="type" value="nomPoste" /> Nom du poste de travail</label><label style="margin-left:12px;"><input type="radio" name="type" value="nomAppMetier" checked /> Nom de l'application métier</label>
</form>
<ul class="pagination pagination-sm" style="float:right;">
<li class="disabled">«</li>
<li class="active">1 <span class="sr-only">(current)</span></li>
<li>2 </li>
<li>3 </li>
<li>4 </li>
<li>5 </li>
<li>»</li>
</ul>
I've tried this, but, this haven't work : http://jsfiddle.net/ht97t/2/
Note : I'm using bootstrap.
Thanks a lot !
From the the bootstrap CSS;
.pagination {
border-radius: 4px;
display: inline-block;
margin: 20px 0;
padding-left: 0;
}
You will need to override that margin, for now just set an inline style on your UL to confirm;
<ul class="pagination pagination-sm" style="float:right; margin: 0!important;">
Edit
You should use the Bootstrap grid as documented (http://getbootstrap.com/css/), that is to define a row and then to specify the placement of content within that row by setting div classes.
For example if you wanted to have a search box top left and a pagination control top right of a row then try this:
<div class="row">
<div class="col-xs-8"><!--search here --></div>
<div class="col-xs-4"><!--pagination here --></div>
</div>
If you want to leave some space between the left and right content then use the offset class:
<div class="row">
<div class="col-xs-6"><!--search here --></div>
<div class="col-xs-4 col-xs-offset-2"><!--pagination here --></div>
</div>
In your original example you had a Search Box left, Radio buttons middle and Pagination right, so you might just be best to go with a 4 4 4 grid:
<div class="row">
<div class="col-xs-4"><!--search here --></div>
<div class="col-xs-4"><!--radio buttons here --></div>
<div class="col-xs-4"><!--pagination here --></div>
</div>
One possible solution for this is to make the .pagination absolute and move it accordingly.
Example Fiddle
CSS:
body {position: relative;}
.pagination {
position: absolute;
right: 0px;
top: 0px;
margin: 5px 0;
}
In this case I set the body to have position:relative; but you probably would want to switch that to the closest containing element.
You have several options to do this.
The quickest fix would be just to do a margin top of like 18px
<form role="search" method="get" action="/Accueil/Rechercher">
<span style="float:left; margin:18px 0 0 10px;">
A few days ago I was working on a classic menu. It has a logo on the left and some menu buttons on the right. This was my first try – fiddle1. But someone from this community told me that menus normally aren't coded like that but with <ul>and <li>.
So I tried to rebuild that menu – fiddle2. Unfortunately nothing works.
My first issue is that I have the feeling that the <div id="menubuttons"> is not located IN the <div id="header">. The second problem is that <div id="menubuttons" align="right"> isn't aligned right as it should be.
Can you help me to get the visual result of fiddle1 with <ul>and <li> tags?
ul element by default will take margin
So please add css like this, it will remove the default margin and padding
ul{margin:0; padding:0}
#menubuttons { float:right}
Check this Demo
I changed some code, try this:
http://jsfiddle.net/WnneG/
<ul style="float:left;paddin:0px;margin:0px;">
<li class="menubutton"> Home
</li >
<li class="menubutton"> Info
</li>
<li class="menubutton"> Spenden
</li >
<li class="menubutton" align="right" style="margin-right: 20px;"> Kontakt & Impressum
</li >
</ul>
replace this line of code:
<div id="header_logo" align="left">
<img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;" />
</div>
<div id="header_menu" align="right">
with:
<div id="header_logo" style="float:left;">
<img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;" />
</div>
<div id="header_menu" style="float:right;">
hopefully you will get your desired result if this help You please mark it as green
See the code in the fiddles you posted. Yours tries to create a menu from divs, while the one you are trying to get to, has <li> items with float: left;
Put to <li> tag style display:block;float:right; like this: <li style="display:block;float:right">
Use float = right instead of align for the div menubuttons.
#menubuttons {
margin-right: 0;
margin-top: 0;
height: 2.5em;
line-height: 2.5em;
display: block;
float:right;
}
I have created a version of your menu. I think this helps: http://jsfiddle.net/yBTJF/4/
.menu
{
height: 30px;
background: #FFFFFF;
line-height: 30px;
list-style: none;
padding: 0 5px;
margin: 0px;
}
If you want :hover, all you have to do is create a selector in your CSS:
.menu a:hover
{
// ...
}
I have a simple HTML page which displays 2 lists one besides the other. Each item on the list is a div element (round-corner box) that contains some data. now when I run it from my STS and view it in my browser: lists are displayed one beside the other. When I deploy it to the couldfoundry and view it with my browser the second list is displayed below the 1st one.
Here is my HTML (I appologize on the missing indentation) :
<section title="item List">
<div class="inner"><h4>ITEMS</h4></div>
<div class="inner"><h4>OTHERS</h4></div>
<div style="clear: both"></div>
<!-- item only list -->
<div class="container">
<ul class="plainList">
<c:forEach items="${itemsFrom.itemsOnly}" var="item" varStatus="status">
<li><div class="inner">
<img src="resources/images/${item.id}.png">
<ul class="plainList">
<li><h4>${item.title} ™</h4></li>
<li><h5>${item.description}</h5></li>
</ul>
<input style="float: right;" type="checkbox" name="itemIds" value="${item.id}" />
<div style="clear: both"></div>
</div>
</li>
</c:forEach>
</ul>
</div>
<!-- Others only list -->
<div class="container">
<ul class="plainList">
<c:forEach items="${itemsFrom.othersOnly}" var="item" varStatus="status">
<li><div class="inner">
<img src="resources/images/${item.id}.png"/>
<ul class="plainList">
<li><h4>${item.title} ™</h4></li>
<li><h5>${item.description}</h5></li>
</ul>
<input style="float: right;" type="checkbox" name="itemIds" value="${item.id}" />
<div style="clear: both"></div>
</div>
</li>
</c:forEach>
</ul>
</div>
</section>
and here is the CSS:
body {
font-size:100%;
font-family: Comic Sans MS, Georgia, ariel;
}
div.inner { margin: 0; padding: 10px; border:0; zoom:1; background: #dcdcdc}
div.outer { float: left; margin: 5px; background: #c10506; padding: 8px, width: 26em}
.container {
margin: 0px;
padding: 0px;
float: left
}
ul.plainList {
list-style-type: none;
margin: 0px;
padding: 0px;
float: left
}
HTML rendering doesn't have to do with Server Side directly. The results generated from the server side can have a influence in what the dynamic portions of your page have to show.
So for instance if you view your page in dev env vs. staging, you'll see, due to the number of records being more most likely in stage, a difference in your UI.
I would say check your persistence and see if you can have the same exact number of data being sent to your client side from server side on Cloud Foundry as your localhost.
Again remember UI rending doesn't change just because your application is deployed to a PAAS environment. It's the Server Side data you have in each environment which is causing your issue. This can simply happen on your localhost as well.