I want to create a right to left grid layout in nativescript I search a whole day hoping to find a solution but I couldn't find any so here is what I want, consider this sample gridlayout:
<GridLayout columns="*,*,*" rows="*,*,*,*,*" sdkExampleTitle sdkToggleNavButton>
<Button text="1" row="0" col="0" style="background-color: #0099CC; margin: 5;"></Button>
<Button text="2" row="0" col="1" style="background-color: #FFFF66; margin: 5;"></Button>
<Button text="3" row="0" col="2" style="background-color: #AA0078; margin: 5;"></Button>
<Button text="4" row="1" col="0" style="background-color: #8C489F; margin: 5;"></Button>
<Button text="5" row="1" col="1" style="background-color: #CCFFFF; margin: 5;"></Button>
<Button text="6" row="1" col="2" style="background-color: #0099CC; margin: 5;"></Button>
</GridLayout>
As you see this is a grid layout with 2 row and 3 columns
As you can see in the above picture content aligned from left to right. Know I want to change this layout to achieve the right to left alignment like the below picture, how can I do this with gridlayout I test horizontal alignment and set it to right but it didn't work
GridLayout is all about how you setup the rows / columns, to get expected results in the screenshot you may have to manually reverse the col value you are assigning.
Or you may use FlexboxLayout which might give you same results, minor styling tweaks may be required still.
Related
When I use this code on forums the top image(background) always shifts left instead of staying centered. The bottom image(floating text) works as is.
<div style="background-image: url('https://i.ibb.co/TmkSL8m/bg7.jpg'); color: #000000; background-color: #000000; background-attachment: fixed; text-align: center;"><img src="https://i.ibb.co/L6zQY0S/name96.png" /></div>
tried setting the width to auto but it locks the background image in place and doesn't allow the text to float over it.
How can I fix the width of text so that it remains splitted in two columns
<div class="container">
<div class="row">
<div class="col-lg-6"><ol id="AllMessages"></ol></div>
<div class="col-lg-6">
<h1>Last Broadcasted Message:</h1>
<h3
id="output"
class="float-left"
style="
margin-top: 35px;
border-top: 1px solid #dedbdb;
padding: 15px;
width: 120px;
"
></h3>
</div>
</div>
</div>
A few observations
It looks like the text in the image is put in without any space, this will usually break the layout - see the portion width:width:width etc.
Your Markup is also incorrect as it contains ol elements without li
Using inline styles on top of bootstrap is probably not a good idea as it breaks margins etc.
Most likely it's the text without non breaking text characters that is breaking your layout.
I've tried to insert a <br /> tag to break the line after fontello icon and found that it's impossible when div is styled with "display:flex". Adding white space is also disabled. Adding new lines after some character is possible, but new line starts beneath <i> tag. Why and how to fix that?
PS: I've noticed that in Chrome situation is better than in Firefox, but new line still starts beneath <i> tag.
Example:
.with_flexbox{
display:flex;
color:purple;
}
<div class="with_flexbox red">
With flexbox I can't use <br /> tag right after <i><i></i><br /> tag
</div>
<div class="without_flexbox">
Without flexbox break after <i><i></i><br />
tag works fine.
</div>
<div class="with_flexbox">
White space is also disabled right after <i><i></i> tag. <br />And why this new line starts beneath <i> tag?
</div>
In your third example contents of your flex container are split by <i> node into 3 flex items, you get 1 item that consists of:
White space is also disabled right after, second item <i><i></i> and third item tag. <br> And why this new line starts beneath <i> tag?. Everything looks fine, you get 3 nodes displayed horizontaly, there is a line break after word tag, just as you wrote it.
Wrapping text fragments into separate tags not only makes sense semantically but also helps you maintain your code.
If you want to stick to flexbox, you should name each node separately and use flex-direction: column instead of br tags, or you could set flex basis for both elements and use flex-wrap. Example snippet attached below.
.item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
outline: 1px solid red;
}
.item__icon {
outline: 1px solid blue;
}
.item__intro {
outline: 1px solid green;
}
.item__description{
outline: 1px solid yellow;
}
<figure class="item">
<p class="item__intro">White space is also disabled right after</p>
<i class="item__icon"><i></i>
<figcaption class="item__description">tag. <br />And why this new line starts beneath <i> tag?</figcaption>
</div>
The below values represent a combobox / combo-list on a website. I am trying to select item #3 from the drop down using VBA. I have tried several things, but I have had no luck selecting said item. I have tried looking for solutions on Google and the Stack but haven't found anything that seems to work.
<DIV id=ext-gen256 class="x-layer x-combo-list x-combo-list-small" style="FONT-SIZE: 10px; HEIGHT: 92px; WIDTH: 113px; POSITION: absolute; LEFT: 744px; Z-INDEX: 12007; TOP: 235px; VISIBILITY: visible">
<DIV id=ext-gen257 class=x-combo-list-inner style="HEIGHT: 90px; WIDTH: 111px">
<DIV class="x-combo-list-item" _nodup="30829" viewIndex="0">Select</DIV>
<DIV class="x-combo-list-item" _nodup="30829" viewIndex="1">Item 1</DIV>
<DIV class="x-combo-list-item" _nodup="30829" viewIndex="2">Item 2</DIV>
<DIV class=""x-combo-list-item" _nodup="30829" viewIndex="3">Item 3</DIV>
<DIV class="x-combo-list-item" _nodup="30829" viewIndex="4">Item 4</DIV></DIV></DIV>
I have used several variatons of the below code to try and select the item in question (i.e item #3), but keep getting a runtime error
Dim inputE As MSHTML.HTMLHtmlElement
Set inputE = IE.document.getElementsByClassName("x-combo-list-item")
If inputE.innerText = "Item 3" Then
inputE.Select
End If
This doesn't seem to work. Any help is greatly appreciated. Thanks!
I read How can I get two form fields side-by-side, with each field’s label above the field, in CSS? which seems to be close to what I need. Unfortunately, I am too new to this to understand most of it. My page used to work with tables, but somehow it got changed and mow it is based in form.
I can only center the labels with position:absolute but that seems to not work in smaller screens. Besides I wanted to use overflow:auto and with the fixed labels it does not make sense when you scroll down the page. The autoflow is not so important, as the ability to keep things in place in smaller screens.
Any ideas that could help, please?
This is the page: http://pintotours.net/coding/form.php
An example for current code:
> <form method="post" action="./database.php">
> <DIV style="position: absolute; left:590px; width:40px; height:25px">Username</DIV> <DIV style="position: absolute;
> right:545px; width:150px; height:25px">Repeat username</DIV> <br>
>
> <center> <p><label for="Username"> </label><input type="text"
> name="username" />
> <label for="Repeat Username"></label><input type="text" name="repeat-username" /></p>
>
> <DIV style="position: absolute; left:590px; width:40px;
> height:25px">Password</DIV> <DIV style="position: absolute;
> right:557px; width:150px; height:25px">Repeat password</DIV> <br>
>
> <p><label for="Password"> </label><input type="text" name="password" />
> <label for="Repeat Password"></label><input type="text" name="repeat-password" /></p><br>
>
>
> </center>
Use tables for simple and speedy form design else use div with css property 'float:left'. Don't use 'absolute' and 'left' 'right' css properties. Check some other websites learn how they designed forms.