I have a free wordpress template which I am sure will limit my ability to do anything. However, here goes.
If you visit this page you will see that I have a table and the text in column 2 appears well below the image in column 1. I've tried the things I believe I know (please note that is very limited knowledge) but can not get it to align to the left.
I'd like the text in column 2 to start from the top left of the box it is in.
Well, i don't know much of Wordpress but the problem is that your text have the css property
vertical-align: baseline;
so you must set it to
vertical-align: top;
I repeat, i don't know how to apply in Wordpress but if you can put this in the cell, it will works
<td style="vertical-align: top">...</td>
Related
I need to set the text color for each row in a striped table. When I add the color class to the table, it only affects the even rows. This solution worked for Bootstrap v3, but I recently upgraded to Bootstrap v5. Is there another way that I can accomplish this with Bootstrap v5?
See the example of the issue below. I've identified where the original (not red) color is coming from, but I don't know how to override it. I don't want to set a specific style, because I have multiple tables and each table has it's own text color.
You can overwrite --bs-table-striped-color css variable like this:
<table class="table table-striped" style="color: red; --bs-table-striped-color: red;">
<xe:namePicker id="npUserNames" for="hdnUserNames">
<xe:this.dataProvider>
<xe:dominoViewNamePicker viewName="Techs"></xe:dominoViewNamePicker>
</xe:this.dataProvider>
</xe:namePicker>
The Names in the left box of the dialog are center aligned. Same with the right (selected values) box.
I have tried text-align: left css in every possible surrounding element...The table cell, the table it is in, the surrounding div tag, the panel, the layout, the entire xpage. And the content of the namepicker dialog is still centered. How do I fix that? How can I specify the width of the dialog box?
Also, in IE11, the "X" button does not work. Nothing happens when you click it.
I'd recommend interrogating the HTML generated using your browser's developer tools to see if there's a class defined for the relevant HTML tags that you can override. If so, you can use that. If not, you may need to create your own Renderer or extension of the Name Picker to generate different HTML. That will be more complicated, but the trade-off of any framework is limited configurability at the cost of quicker development.
I'm not doing exactly what Withers suggested, but it did lead me to a solution based on a comment somewhere else.
I added a class dojo attribute and assigned a new css class to it. Only issue is that it is shifting everything in the dialog to the left...but it's ok for now.
<xe:this.dojoAttributes>
<xp:dojoAttribute name="class" value="namePickerClass">
</xp:dojoAttribute>
</xe:this.dojoAttributes>
CSS:
.namePickerClass { margin: 0 auto; width: 50%; text-align:left; border: 1px solid blue; scrolling: none;
}
On my jQuery Mobile page, i'm using a horizontal control group for some buttons.
But in some languages the text within these buttons is too long.
Instead of wrapping the text within each button, the buttons themselves wrap onto the next line.
this is the base code:
<div data-role="controlgroup" data-type="horizontal">
short button
really really really insanely long button is really really insanely long. No really, who makes buttons this big?
</div>
and with this css, we convince it to wrap inside the buttons. Otherwise the text is truncated with an ellipsis
.ui-btn-inner{
white-space: normal !important;
}
On the third page of this fiddle the problem is demonstrated
http://jsfiddle.net/koesper/R8Kwe/
Anyone have any ideas how I might tackle this?
Thanks in advance,
Casper
ps. Inspiration for the original fix came from Tosh in Jquery Mobile Multiline Button
You could set widths for the links in your control-group:
.ui-page .ui-content .ui-controlgroup a {
width : 49%;
}
This will keep them on the same line. Here is a demo: http://jsfiddle.net/R8Kwe/6/
Also, just to be thorough, the white-space : normal actually needs to be applied to the .ui-btn-text element which is a child of the .ui-btn-inner element (so it still receives the inherited value).
Trim your long buttons - that's a usability issue. If you have action buttons named that long seems like that just defeats the purpose of an action? Other than that I wouldn't use controlgroups for something like this. I would use a custom data theme & some grids to house my buttons inline.
I have an unordered list with links. The links have display:block; in the css so the hover will also have effect in the padding surrounding the links. I replace the list-items with sIFR 3. In the sifr-config.js I specify a hover color for the text but this only works on the text itself, not on the padding surrounding the text. Is there a solution for this problem?
I got it working for the padding on the left side of the text by adding margin-left:'25' in the config for .sIFR-root but margin-right doesn't have the same effect. Help greatly appreciated ;-)
It's hard to say based on your question, but if you replace the individual list items, the entire list item will be a sIFR link. If you want more space around the text you should do this within the Flash movie rather than in CSS. You can use the tuneWidth, tuneHeight, offsetTop and offsetLeft parameters for this.
In this web site when you shrink the browser window the white space on the left and right disappear first, following by the shrinking of the right panel, followed by the main container panel. I have recently started to use ASP.NET MVC and in my test case my containers drop below the other containers as I resize the browser window. I am using a a site.master page with a left, center and right section as part of the body. It there an attribute in css that dictates the behavior or an HTML element? I have viewed the page source of this site's main page and looked at the CSS but nothing obvious has jumped out at me as how this is being controlled.
One of the great things about web development is that most often, when you see a site and think "How did they do that", it's very easy to look at the code and find out, and also to test it out - tools like Firebug for Firefox, the Developer Tools in IE 8 (F12) and Chrome will all display nicely formatted source and CSS, and will let you modify it in situ.
In the case of SO, the main body of the site is contained in a div with class of "container", the style rules for "container" are:
.container {
margin: 0 auto;
text-align: left;
width: 950px;
}
The key thing we're looking at here is that this class has a fixed width - 950 pixels, and the margins are set to (expanded):
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
Setting the left and right margins to "auto" has the affect of centering the div within the edges of it's container, and allowing them to expand to whatever width is needed once the container has taken up the required 950px.
Inside the container div, you then have a div with id "content" (no style rules), and then two divs: "mainbar" and "sidebar" whose styles are:
#mainbar {
float: left;
margin-bottom: 40px;
width: 715px;
}
#sidebar {
float: right;
width: 220px; /* this is also set in the "style" attribute *
}
These left and right floats are what's positioning the bars in the right places.
Another handy CSS rule is:
clear
this can be set to "both", "left" or "right", and will basically reset the floats on the containers.
However, it sounds like you're after what is often called the "Holy Grail of CSS" (Rick points out that there's a bug in this with IE7, see here for a fix) for good reason: Three Columns, with at least one of them flexible.
Other examples, of completely flexible layouts include:
Multi-column layouts climb out of the box
Fluid grids
It can be a combination of float, position, and margin and how you set these elements up. Without a URL, it will be hard to say exactly what the problem is or how to fix it.
For a starting point, I would suggest taking a look at YUI CSS Grids or 960.gs (960 Grid System) and one of the various reset.css files floating around out there. YUI has a very good one. The reset.css file makes your css look and act the same in all browsers and the grid systems give you a starting point for designing your site. They also give you confidence that what you are designing will look and act the same in all browsers.
http://developer.yahoo.com/yui/grids/
http://960.gs/
This is a html layout issue. Probaly the asp.net mvc layout is not very well done. Have a search for 'css column layout' on web there are plenty of examples on how to achieve a good layout. See for example In Search of the Holy Grail by MATTHEW LEVINE for a good discussion of a 3 column layout technique.