I am using jFiler for ajax upload of files, and I am trying to change the theme css to have both input box and item boxes inline in the same row something similar like the code below, just to show you an example of inline boxes in a row, or maybe in a carousel together where input box would be fixed on either left or right side of the row, and uploaded items would append next to it:
<div class="floating-box">Input box</div>
<div class="floating-box">Uploaded Item1 box</div>
<div class="floating-box">Uploaded Item2 box</div>
Css:
.floating-box {
float: left;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}
and not input box above the item boxes like it is by default. I have tried changing their css, but I haven't figured out how to do that, if anyone has any suggestions?
Related
I'm working on Angular 2 now. In my template I'm using the following to show the data I get from the APIs
<div class="blocks">
<div router-active class="block" *ngFor="let item of items">
<div class="inblock">
<p class="title">{{ item.name }}:</p>
</div>
</div>
</div>
Everything is working fine but if one of the div height was higher than the others it would look something like the image below
I want to have a nice row with three divs only and after three you start a new block, I know how to do it normally but I can't figure out how to do it with Angular 2!
UPDATE : I don't want a fixed height because the content can be as long as the user wants! so adding a fixed height with CSS will not solve the issue
You will find a solution using css. Take this code:
.block {
float: left;
width: 150px;
margin: 10px;
border: 3px solid #73AD21;
}
.block:nth-child(3n+4){
border: 1px solid red;
clear: both;
}
The above code is using float to make the blocks inline. Using nth-child you can tell it to clear each 3rd block.
Why don't you create a 'css' associated to your template and pass it to styleUrls property. In that CSS you can defile a class and set the div properties whatever you like and pass that class name to the elements.
i've got 2 div's, one to display a map and the other form-horizontal to display textboxes. currently the map is showing at the top of the page and the textboxes at the bottom. is it possible to display the textboxes at the left and the map right beside in to the right?
<div itemprop="map" id="googleMap" style="height:400px;width:100%;"></div>
<div class="form-horizontal"></div>
Without anymore CSS that you have used, all I can say is that the CSS property, display:inline-block;, should work on these elements to make them display on the same line.
Make sure you remove the width:100%; property from the first div, too.
You can use float:
CSS:
#googleMap {
float: right;
width: 50%;
}
.form-horizontal {
float: left;
width: 50%;
}
HTML:
<div itemprop="map" id="googleMap"></div>
<div class="form-horizontal"></div>
I have a simple Smart TV app that shows a list of items in a vertical list with a key handler attached to an anchor associated with the DIV containing the list.
The list comprises a set of DIVs showing a text string in each enclosed by an outer DIV. The height of the full list is 400px, well within the 540px of the screen height.
The user can move up and down the list with the up and down buttons to highlight individual items.
On the emulator this works fine, however on a real TV when the user hits down, not only does the highlight move done as it should, but the whole screen moves up.
Likewise, when the user hits up, the highlight moves correctly but the screen moves up.
Here's the markup for the list
<div id="itemList">
<div class="slot" id="slot0">Slot 0</div>
<div class="slot" id="slot1">Slot 1</div>
<div class="slot" id="slot2">Slot 2</div>
<div class="slot" id="slot3">Slot 3</div>
<div class="slot" id="slot4">Slot 4</div>
</div>
<a href='javascript:void(0);' id='anchorList' onkeydown='KeyHandler.list_KeyPress()'></a>
Here's the CSS
#itemList {
position: absolute;
left: 20px;
top: 20px;
width: 250px;
height: 400px;
background-color: #000000;
}
#itemList .slot {
color: #ff0000;
width: 100%;
height: 80px;
}
The event list_KeyPress function increments or decrements the index of the highlighted item and changes the class of it to slotSelected
Nothing on the screen is being redrawn, moved or resized. The only change being made is the class of the highlighted DIV.
To eliminate this as a factor, I commented out the code inside the list_KeyPress() and still get the same issue - so it isn't that.
It is definitely something to do with the key presses.
Actually, I've solved this myself. In the CSS I added the following to the body and html style:
body, html {
overflow: hidden;
}
<div id="content">
<div id="header">
</div>
<div id="main-content">
</div>
</div>
html, body{height:100%;margin: 0px; padding: 0px; background-color: black;}
div#content{width:600px; margin: 0 auto; height:100%;}
div#header{width:600px; height:200px;}
div#main-content{width:600px; height:100%; background-color: white;}
As you can see, adding a header pushes everything down. I want main-content to extend to the end of the browser.
I think i worked around this issue before by creating a header with an image similar to my background in order to fake the appearance, however my background i'll be using is much too complicated.
Are there any methods to do this? possibly a working javascript fix?
You can make your main-content div positioned absolutely and then specify its top and bottom attributes. I've setup a jsfiddle here: http://jsfiddle.net/wrn8Y/1/
div#main-content{
position: absolute;
top: 200px;
width:600px;
bottom: 0px;
background-color: white;
}
Note that the top attribute is set to the bottom of your header, and the bottom is set to zero to hit the bottom of the page. If you wanted to have a footer you could change the bottom attribute to accommodate the footer.
Also you can do this with javascript, I generally use JQuery so here is some JQuery code that gets it done:
$('div#main-content').height($(document).height() - $('div#header').height());
This javascript (Jquery) will work with relatively positioned divs and the only css you would need to change is to remove the "height: 100%" on the "div#main-content" style.
I have a table that is 640px wide seperated in two [TD]'s. The left one is 150px and the right one 490px.
The question is, using CSS or any other method, how do I stop the content from overflowing the size I have set and making the page look like a mess.
I have have tried the css overflow: scroll method and in some cases this works, but not in all. I need something that is going to work everytime. If I could get each TD to scroll if the content is larger that would certainly suffice.
I do not have a link to provide, this is just a general question as I will have many areas on my site that I may need to use something like this.
Thanks
If you're using tables as backbone of you website, then you do it wrong. You should use div elements instead.
Tables should be use for tabular data, not for structure.
Sometimes it's quite hard to get fast the look as when used table, but it's not impossible. For 2-row table you can use something like this
<div id="container">
<div id="left">
<div id="right">
<div class="clr" >
</div>
CSS:
#container{
width: 640px;
}
#left{
width: 150px;
flot: left; /*if you want them to be next to each other */
overflow: scroll; /*or hidden?*/
}
#right{
width: 490px;
float: left;
overflow: scroll;
}
.clr {
clear: both;
}
I agree with both answers so far - the ideal solution is to re-code your layout without the table, but if you don't have time, wrapping your table cell content in a <div> will do the trick:
HTML
<table>
<tr>
<td class="left">
<div>This is your left content</div>
</td>
<td class="right">
<div>This is your right content</div>
</td>
</tr>
</table>
CSS
table {
width: 640px;
}
td div {
overflow: scroll;
}
td.left,
td.left div {
width: 150px;
}
td.right,
td.right div {
width: 490px;
}
The added <div>'s around your content will respect the CSS overflow property and prevent non-breaking content from blowing up your layout.
Since you are using fixed widths, it sounds like you need to set table-layout: fixed on your table element.