I'm hoping someone here can assist me. I've created a table for my site using tags, since the 'old school' way of creating it with <table> does not work on a mobile site - everything is cut off along the right hand side, without the option to slide it over.
My code is:
<style>
.list_item1 {
display: inline-block;
margin: 5px;
padding: 1px;
width: 200px;
}
.list_item2 {
display: inline-block;
margin: 5px;
padding: 1px;
width: 600px;
}
#wraplist {
width:800px;
column-count:2;
column-gap:10px;
-moz-column-count:2;
-moz-column-gap:20px;
-webkit-column-count:2;
-webkit-column-gap:20px;
}
</style>
With the following HTML:
<div id="wraplist">
<div class="list_item1"><li>A</li></div>
<div class="list_item1"><li>B</li></div>
<div class="list_item1"><li>C</li></div>
<div class="list_item1"><li>D</li></div>
<div class="list_item1"><li>E</li></div>
<div class="list_item2"><li>F</li></div>
<div class="list_item2"><li>G</li></div>
<div class="list_item2"><li>H</li></div>
<div class="list_item2"><li>I</li></div>
<div class="list_item2"><li>J</li></div>
</div>
<div style='clear:both;'> </div>
In case you're wondering why I'm using a Div instead of a <ul> controlled through the CSS, it's because for whatever reason, it doesn't work. I've literally copied and pasted other code that was proven to work, within my site and it simply shows as one list instead of a list divided into two columns. The div creates two lists but they don't show on a mobile site. The outcome is that "list_item1" shows, then one line - the first one, from "list_item2" shows with a very large font, and everything else has vanished.
I've created two 'list items' due to the fact that I need the column to be larger to make room for the extra text in the second row. I can't have them equal in size.
Does anyone have any ideas as to how to fix this so that it displays on a mobile device? Or an alternative method that does?
Related
I'm iterating through the results of query and displaying select fields of each record.
I want the text centered on screen.
Using the CSS in the example looks OK on a regular computer screen but is too small on a Smart Phone.
Of course I've greatly simplified the example to keep it short.
The Question: How can I just get the text for each record to center... without only using 505 of the available screen width?
.center {
margin: auto;
width: 50%;
border: 2px solid #d3d3d3;
padding: 10px;
}
`enter code here`Query Results:<br>
<div class="center">
Online Code Test</a><br>
``Is a site for testing some code online.<br>
But not PHP.<br>
Where can you test PHP online?<br>
</div>
<div class="center">
Programmers Resource.</a><br>
The forum is very big.<br>
Members world wide.<br>
The go to place if you get stuck.<br>
</div>
I wrote a little program in angular using an ui-select element. The problem is that the search bar is really too long and I didn't find how to reduce it. Usually, we have some "width" properties that you can change for that but the css code is too complicated and I didn't find how to manage that. What I want to do is to save three bars at the same line.
I copied the sample from the official page of the ui-select, so it contains a lot of things in css that I didn't understand and I don't know much about css or bootstrap...
The style element in the index.html is this one :
<style>
body {
padding: 15px;
}
.select2 > .select2-choice.ui-select-match {
/* Because of the inclusion of Bootstrap */
height: 29px;
}
.selectize-control > .selectize-dropdown {
top: 36px;
}
</style>
</head>
And they included a huge select.css file in their sample that you can find in my plunker : http://plnkr.co/edit/kuryoI5osBtRihYAeoVH?p=preview
Can you show me how can I reduce the width of th search bar?
Can you PLEASE show me how to remove all the unecessary line from the select.css included in the plunker that are not used in my example ?? I don't know how can I do that efficiently. I'm afraid to delete important elements and I really got lost in that huge css file.
Thank you in advance !
Edited 2 (How to use the col-xx-nn) properties with bootstrap
The xx indicates in which view you want the property to be applied:
xs : extra-small devices
sm: small devices
md: medium devices
lg: lg devices
The nn indicates how many column the element will occupy (total is 12). Please see http://getbootstrap.com/getting-started/ for reading the full docuemntation.
And this is how your code would be...
<div class="row">
<!--First ui-select-->
<div class="col-md-4"> <!--1/3 of 12 -->
<ui-select ng-model="selectedItem">
<!--ui-content-here--->
</ui-select>
</div>
<!--Second ui-select-->
<div class="col-md-4"> <!--1/3 of 12 -->
<ui-select ng-model="selectedItem">
<!--ui-content-here--->
</ui-select>
</div>
<!--Third ui-select-->
<div class="col-md-4"> <!--1/3 of 12 -->
<ui-select ng-model="selectedItem">
<!--ui-content-here--->
</ui-select>
</div>
</div>
Edited
Include a custom css and put these rules. Make sure to include this after the ui-select css files in order to overwrite its rules:
.ui-select-container {
max-width: 200px; /*put the desired width here!*/
}
.ui-select-bootstrap > .ui-select-match > .btn {
max-width: 200px; /*put the desired width here!*/
}
.ui-select-bootstrap > .ui-select-choices {
max-width: 200px; /*put the desired width here!*/
overflow-x: scroll;
}
.ui-select-container .form-control {
max-width: 200px; /*put the desired width here!*/
}
Check this working plunker http://plnkr.co/edit/GN8i5PeFebS7Bo04GiUt?p=preview
In this plunker the rules are in myOwnCss.css file and I needed to add another custom rule in order to get this done properly because some of the other default styling of the ui-select. See below
/**some additional styling in order to get
the demonstration working properly (very possibly not needed for you)*/
.ui-select-bootstrap .ui-select-choices-row.active > a {
color: black;
background-color: white;
}
Important!:
Please, be aware that if you have an option with a name too long (it
takes more than you desired width, 200px in this case) it won't be
show completely in the selected option, and besides you have to
scroll over the x axis in order to read it completely in the dropdown
list.
When you create a ui-select item, it will generate a div for all its content, and with three bars, all those divs will probably be shown, one below the others. (TIP: you can solve this using bootstrap classes: col-md-4 for every div which wraps every ui-select)
I'm having some trouble with a header in a webpage. It has several pages, and in one of them there are several big pictures. In that particular page I have observed that the header div moves a few pixels to the left, which is very obnoxious when changing between pages.
I know that the problem disappears when I remove the first picture (id="problem1"), or one of the divs with two pictures ((id="problem2" and "problem3")), but I can't figure out what's happening.
I'm using this css code to produce two colums:
.contenedor { overflow: auto; }
.div1 { float:left; width:440px;}
.div2 { float:right; width:440px;}
And this one for the header:
#header {
height: 100px;
background: #0072b8;
font-family: Arial;
font-size: 16px;
color: white;
}
This is the header that magically changes its possition:
<div id="header">
<img src="http://placekitten.com/237/100" width="237px" height="100px" border="0" style="padding: 0 3.5em; float: left;">
</div>
And this is the code that defines one of the divs that have two colums:
<div class="contenedor">
<div class="div1">
<img src="http://placekitten.com/300/305" width="300px" height="305px"/>
</div>
<div class="div2">
<img src="http://placekitten.com/300/305" width="300px" height="305px"/>
</div>
</div>
You can see the rest of the code and its result here:
JSFiddle
What puzzles me the most is that if I leave just 2 of the problematic elements, the div position is the right one, the same one that in all the other pages that doesn't have these pictures, but when I add the third one it moves.
This is happening because you have a scroll bar on some pages but not on others and your DIV elements are set to 'auto' so they expand the available browser space (which as im sure you know changes when the browser is resized, or in this case when the presence of a scroll bar changes the available space).
To fix this, it would be easiest to just design the page with
html {
overflow-y:scroll;
}
This will make sure that a scroll bar is on the page at all times and the page size won't change over it.
I believe the problem is that you have a scroll bar on the problem pages. Your content is longer then the height of the browser window. When your content is higher than the window a scroll bar is added to the page. This is unavoidable.
Trying to use divs rather than a table and the columns won't line up even though they all have the width set the same in the CSS. Here it is
<div class="title_container">
<div class="duty_date">
Date
</div>
<div class="duty_name">
Duty Name
</div>
<div class="duty_start">
Start Time
</div>
<div class="duty_end">
End Time
</div>
<div class="duty_location">
Duty Location
</div>
<div class="duty_manager">
Duty Manager
</div>
<div class="duty_members">
Required Members
</div>
<div class="duty_spaces">
Spaces
</div>
<div class="duty_notes">
Notes
</div>
</div>
and the css:
.duty_date, .duty_name, .duty_start, .duty_end, .duty_location, .duty_members,
.duty_manager, .duty_spaces, .duty_notes {
text-align: center;
border-right-style:solid;
border-right-width: 1px;
display: table-cell;
vertical-align: middle;
height:50px;
}
.duty_date, .duty_spaces {max-width:70px; width:70px;}
.duty_name, .duty_location {max-width: 150px; width:150px;}
.duty_start, .duty_end {max-width:90px; width:90px;}
.duty_manager, .duty_members {max-width:80px; width:80px;}
.duty_notes {max-width:180px; width:180px;}
Should I just use a table?
Should I just use a table?
Yes! That's tabular data, so you should just use a table.
It's a common fallacy to think "tables must never be used". Trying to emulate a table with divs is just as bad as using tables for layout.
In this case I think using a table would be perfectly acceptable. When using a table for actual design elements in a page, the <div> tags are a better option, but for displaying straightforward information like in this example, go ahead and use a table.
IMO yes - definitely a table and save yourself the pain!
From a semantic point of view using tables is the right choice for "tabular data", this will also enable you to use more structured tags like <th>. Please have a look at the specs http://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html.
In my firefox browser, it looks OK. You must have a different browser. But I would suggest you use table because that's exactly what html table is for, unless you have a strong reason not to.
If you wanted to use <div>, use:
.duty_date, .duty_name, .duty_start, .duty_end, .duty_location, .duty_members,
.duty_manager, .duty_spaces, .duty_notes
{
text-align: center;
border-right-style: solid;
border-right-width: 1px;
display: block;
height: 50px;
line-height: 50px;
float: left;
}
This is untested :)
Setting line-height equal to the height of an element will give you text that is centered vertically. You might have to add a clearing element after each row. So it would be like:
<div>Row1Cell1</div>
<div>Row1Cell2</div>
etc...
<div class="clear"></div>
<div>Row2Cell1</div>
etc...
With
.clear
{
clear: both;
}
I'm new to CSS and racking my brain on the following:
I have a row of images that are sourced from a database query. I display the photos in a row which wraps within a page. For example, if there are 20 photos, it will display 5 per row based on the width of the page and the photo.
My challenge: I want to position a DIV in the same relative spot on each photo. This div will contain a link to take an action on the photo. All of the action code is working, but I cannot, for the life of me, correctly position the DIV.
I can't post an image of the mockup I'm trying to achieve (I'm too new), but here's a description:
Imagine a row of photos the size of a postage stamp. In the upper right corner of each, is a gray box containing a link. I'm unable to consistently position the gray box in the same relative position on each photo. Each photo is the same size, but since the number of photos is unknown, I can't simply "position:abosulte;" the action box manually.
My HTML looks roughly as follows: I've simplified the loop; its a dump of a query from ColdFusion of an indeterminate number of photos.
<LOOP>
<div id="photo" style="display:inline;"><img src="abc"></div>
<div id="redBox" style="????">ACTION</div>
</LOOP>
Thoughts?
Many kind thanks in advance.
Probably easier to add your box within this div, something like:
<div id="photo" style="display:inline;">
<div id="redBox" style="position:relative;top:-10px;left:-10px">ACTION</div>
<img src="abc">
</div>
You could then offset as required using position:relative (you'll see I've guessed the amounts above, but you can obviously tweak to suit!)
Hope this helps!
Try <style>
#photo {
display: inline-block;
position: relative;
}
.action {
/* Optional */
background: #CCC;
color: #FFF;
padding: 2px 3px;
/* Necessary */
display: inline-block;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
</style>
<div id="photo">
<div class="action">Foo</div>
<img src="abc">
</div>
maybe you could wrap it all in another div?
<LOOP>
<div class="container" style="display: inline-block;">
<div class="photo"><img src="abc"></div>
<div class="redBox" style="position:relative; top: -20px; right; 10px;">ACTION</div>
</div>
</LOOP>
I may be wrong, but it looks like you're trying to reinvent the wheel...
Check out the map element (HTML4, HTML 5)