I'm trying to center two <TextArea> elements using material ui and React.
They are all in the same <div> and have same className. I've tried using the !important designation in CSS. Nothing seems to work on the MUI elements. A traditional <input> does what I want the other two to do using the same CSS. How do I center the <TextField> elements?
JSX
<Container maxWidth="md">
<TextField
id="outlined-read-only-input"
label="Username"
/>
<TextField
id="outlined-read-only-input"
label="Password"
/>
</Container>
CSS
.login__input {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: 20px !important;
width: 300px !important;
}
[1]: https://i.stack.imgur.com/qu0xa.png
Try using Grid elements for positioning.
https://mui.com/material-ui/react-grid/
<Grid container justifyContent="center" spacing={2}>
<Grid item xs={10}>
<TextField
id="outlined-read-only-input"
label="Username"
/>
</Grid>
<Grid item xs={10}>
<TextField
id="outlined-read-only-input"
label="Password"
/>
</Grid>
</Grid>
I'm trying to define a group of buttons that are on top of each other with a black border and in order to have no overlapping borders I want to do something like this:
.myCustomButton {
border: 1.5px solid black;
}
.myCustomButton:not(:last-child) {
border-bottom: none;
}
I've tried a few variations of that and had no success. I assume (after some playing around with it) this is because the elements aren't a "group", so there is no actual last child.
I have tried using the "Field Group Ids" but that didn't change much. Also tried giving the "items" its own class and use :last-child on that but that also didn't work.
<VBox xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" width="auto" direction="Column" id="vbox0_copy2">
<items class="a">
<Button xmlns="sap.m" text="1" id="flight1" press="onShowFlightDetails" class="myCustomButton" type="Transparent" fieldGroupIds="flightsbuttons"/>
<Button xmlns="sap.m" text="2" id="flight2" press="onShowFlightDetails" class="myCustomButton" type="Transparent" fieldGroupIds="flightsbuttons"/>
<Button xmlns="sap.m" text="3" id="flight3" press="onShowFlightDetails" class="myCustomButton" type="Transparent" fieldGroupIds="flightsbuttons"/>
</items>
</VBox>
To my understanding, using standard HTML and css where I define the buttons in the HTML file itself should work it out but as far as I know this is how you are supposed to do it:
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "ExampleScreen2"
})
}).placeAt("content");
});
</script>
So, generally speaking, am I wrong to use only one '.placeAt("content")' or am I missing another way to use :last-child correctly?
What happens is that sapui5 add a 'div' layer for each child of a VBox.
that means the generated html will look like
<div> <-- VBox
<div> <-- item 1 container
<button />
</div>
<div> <-- item 2 container
<button />
</div>
...
</div>
thus your selector cannot target a class set on the item itself (because as you said, they are not sibling in the html tree)
to achieve your goal, set a class on the VBox, like 'myCustomButtonContainer' and then set your css as
.myCustomButtonContainer > .sapMFlexItem {
border: 1.5px solid black;
}
.myCustomButtonContainer > .sapMFlexItem:not(:last-child) {
border-bottom: none;
}
<edit>I decided to clean this question up a little bit, for easier reading.</edit>
I have a centered <menulist>, of variable width (maxwidth="200"), next to which I want to lean a couple of <toolbarbuttons> in an <hbox>. These elements are part of a xul <page> element.
The following image shows what my current result is and what my actual goal is:
The vertical red line is merely drawn to indicate the center of the window.
The current result was achieved with the following css and xul:
css:
page {
-moz-appearance: none;
background-color: #fff;
text-align: center;
}
toolbarbutton {
list-style-image: url( 'chrome://codifiertest/skin/icons.png' );
}
toolbarbutton .toolbarbutton-icon {
width: 16px;
height: 16px;
}
toolbarbutton.add {
-moz-image-region: rect( 0px, 16px, 16px, 0px );
}
toolbarbutton.edit {
-moz-image-region: rect( 0px, 32px, 16px, 16px );
}
toolbarbutton.delete {
-moz-image-region: rect( 0px, 48px, 16px, 32px );
}
toolbarbutton.config {
-moz-image-region: rect( 0px, 64px, 16px, 48px );
}
xul:
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="chrome://global/skin/"?>
<?xml-stylesheet type="text/css" href="chrome://codifiertest/skin/index.css"?>
<!DOCTYPE page>
<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml">
<div xmlns="http://www.w3.org/1999/xhtml">
<h1>Title</h1>
<vbox xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
pack="start"
align="center">
<stack maxwidth="200">
<hbox pack="center" align="center">
<menulist maxwidth="200">
<menupopup>
<menuitem label="Item" value=""/>
</menupopup>
</menulist>
</hbox>
<hbox left="200">
<toolbarbutton class="add"/>
<toolbarbutton class="edit"/>
<toolbarbutton class="delete"/>
</hbox>
</stack>
</vbox>
</div>
</page>
icons.png:
You can also download this as an installable bootstrapped test example:
http://extensions.codifier.nl/test/downloads/test#extensions.codifier.nl.xpi
Be aware that the example xpi install will immediately open a new tab with the example xul file after install. And as a disclaimer: the file is downloadable from an insecure location (my own domain), so be sure you validate what you downloaded before you install (i.e. save the xpi to disk first, before installing).
So, the goal is to always have the <menulist> horizontally centered to the page and the <hbox> with <toolbarbutton>s lean to right side of the <menulist>, no matter its width.
Is this doable with xul and perhaps some additional css?
I've actually gotten it to work by mixing in more (x)html:
css:
#container {
position: relative;
}
#container > span {
position: absolute;
left: 100%;
}
altered xul/(x)html:
<html:div id="container"> <!-- no more xul:stack -->
<hbox pack="center" align="center">
<menulist maxwidth="200">
<menupopup>
<menuitem label="Item" value=""/>
</menupopup>
</menulist>
</hbox>
<html:span> <!-- additional span -->
<hbox>
<toolbarbutton class="add"/>
<toolbarbutton class="edit"/>
<toolbarbutton class="delete"/>
</hbox>
</html:span>
</html:div>
... but I'd really rather want to see a pure xul solution though, if anyone knows one.
Thank you, in advance, for looking into this.
I think this should be the solution:
page.xul
<?xml-stylesheet type="text/css" href="page.css"?>
<!DOCTYPE page>
<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml">
<vbox>
<hbox>
<hbox>
<menulist>
<menupopup>
<menuitem label="Item" value=""/>
</menupopup>
</menulist>
</hbox>
<hbox>
<button class="add"/>
<button class="edit"/>
<button class="delete"/>
</hbox>
</hbox>
<hbox>
<hbox>
<menulist>
<menupopup>
<menuitem label="Item" value=""/>
</menupopup>
</menulist>
</hbox>
<hbox>
<button class="add"/>
<button class="edit"/>
<button class="delete"/>
</hbox>
</hbox>
</vbox>
</page>
page.css:
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
page {
-moz-appearance: none;
background-color: #fff;
text-align: center;
background-image: url( 'dot.png' );
background-position: top center;
background-repeat: repeat-y;
}
page > vbox {
-moz-box-flex: 1;
}
page > vbox {
padding-left: 90px;
-moz-box-align: center;
-moz-box-pack: start;
}
.buttonsgroup {
-moz-appearance: toolbox;
}
button {
-moz-appearance: toolbarbutton;
list-style-image: url( 'icons.png' );
min-width: 27px !important;
width: 27px;
height: 16px;
margin: 0px 0px 0px 0px;
}
button.add {
-moz-image-region: rect( 0px, 16px, 16px, 0px );
}
button.edit {
-moz-image-region: rect( 0px, 32px, 16px, 16px );
}
button.delete {
-moz-image-region: rect( 0px, 48px, 16px, 32px );
}
button.config {
-moz-image-region: rect( 0px, 64px, 16px, 48px );
}
Here is how it looks (on FF 36, Kubuntu 15.04):
Hope that helps.
There should be an answer that states the actual solution to the problem rather than it only being in the comments. This answer is based on information from Ondřej Doněk's .xpi which was placed as downloadable in a comment to the answer that user provided.
The easy solution:
All you have to do to make the original code work is change:
<hbox left="200">
to
<hbox right="-66">
MDN says that for elements immediately within XUL <stack> elements, the attribute right:
specifies the pixel position of the right edge of the element relative
to the right edge of the stack.
Based on the fact that using a negative number such as right="-66" works, we can deduce that what it is actually telling the stack to do is: enlarge such that the right edge of the <stack> is 66 pixels to the right of where it was and place the element with its right edge at the right edge of the stack.
If Ondřej Doněk's answer is updated to include information about using a negative number for the right attribute, then this community wiki answer can be deleted.
Your CSS looks good. You can solve this with pure attributes of XUL. You can use: pack, orient, align, flex ...
Try play with the xul-periodic-table example:
https://github.com/alijc/xul-periodic-table/blob/master/layout.xul
I'm trying to add a scrollbar to a firefox extension so that it displays when the window is too small.
I'm having issues with having the scrollbar span the entire range from top to bottom of the sidebar and only having it displayed when the window is too small.
One extension that has the functionality I would like is the sage extension, however searching through the CSS and XUL, I'm unable to figure out how it works.
XUL File
<vbox flex="1" id="main" align="center" pack="end" maxwidth="300">
<spacer height="10"/>
<image id="logo" maxwidth="300"/>
<spacer height="20"/>
<vbox id="button" flex="1">
<button id="a-button" label=""/>
<spacer height="20"/>
<listbox id="listbox1" width="300" maxwidth="300" rows="6">
<listhead id="list-header">
<listheader label=""/>
</listhead>
</listbox>
<spacer height="20"/>
</vbox>
<tabbox id="details-box" maxwidth="300">
<tabs id="tabs">
<tab id=a"-label" label="" style="text-align: center;"/>
</tabs>
<tabpanels>
<vbox>
<button id="another-button" label="" />
</vbox>
</tabpanels>
</tabbox>
<spacer height="20"/>
<vbox maxwidth="300">
<description id="message" style="display: none;">
<!-- updated with ajax -->
<html:h1 id="header"/>
<html:p id="body"/>
</description>
</vbox>
<spacer flex="10"/>
</vbox>
<spacer flex="10"/>
</page>
Relevant CSS
/* Main */
{
padding: 0;
margin: 0;
}
#sidebar {
background-color: #fff;
font: 10pt "arial", "sans-serif";
line-height: 11pt;
}
vbox#main {
padding-left: 20px;
padding-right: 20px;
/* min-height: 600px; */
min-width: 330px;
overflow-x: hidden;
overflow-y: auto;
}
How it currently looks
Example Screenshot http://img203.imageshack.us/img203/7209/screenshot20100805at201.png
Desired effect in Sage Extension
Sage Relevant Screenshots http://img193.imageshack.us/img193/9206/sageexample.png
The problem is that vbox#main was not the only child node of . I also had a panel in there which would popup based on some action.
By moving the panel inside of vbox#main, vbox#main would span the entire space of the sidebar.
I have created a tabbox using the following code (with a screenshot attached).
How do I set the size of the tab to be larger so there is padding around the label?
<tabbox>
<tabs>
<tab label="A LABEL"></tab>
</tabs>
<tabpanels>
<button>
</tabpanels>
</tabbox>
http://img38.imageshack.us/img38/2484/tabbox.png http://img38.imageshack.us/img38/2484/tabbox.png
I have tried the following CSS:
tab, tabs, tabbox {
height: 2em;
line-height: 20px;
padding: 10px;
margin: 10px;
}
However nothing changes, I've tried to also replace the label attribute with a child label element and a child description element, however that proves futile also.
Suggestions?
edit for searching: Unable to change styles for XUL elements in firefox on Mac OS X
It is an OSX thing, which you can override with something like this :
<tabbox>
<tabs>
<tab style="-moz-appearance: none;">
<label value="test1" style="font-size: 20px; padding: 5px;"/>
</tab>
</tabs>
<tabpanels>
<button/>
</tabpanels>
</tabbox>
Now you can pretty much customize it to anything you like.
Here is a screenshot of something I did with tabs :
alt text http://img299.imageshack.us/img299/8103/selection001.png